四、bootstrap-Table
一、bootstrap-Table基础表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Dashboard | Nadhif - Responsive Admin Template</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
</head>
<body>
<table id="mytab" class="table table-hover"></table>
<script>
var data=[{"id":0,"name":"Item 0","price":"$0"},{"id":1,"name":"Item 1","price":"$1"},{"id":2,"name":"Item 2","price":"$2"},{"id":3,"name":"Item 3","price":"$3"},{"id":4,"name":"Item 4","price":"$4"},{"id":5,"name":"Item 5","price":"$5"},{"id":6,"name":"Item 6","price":"$6"},{"id":7,"name":"Item 7","price":"$7"},{"id":8,"name":"Item 8","price":"$8"},{"id":9,"name":"Item 9","price":"$9"},{"id":10,"name":"Item 10","price":"$10"},{"id":11,"name":"Item 11","price":"$11"},{"id":12,"name":"Item 12","price":"$12"},{"id":13,"name":"Item 13","price":"$13"},{"id":14,"name":"Item 14","price":"$14"},{"id":15,"name":"Item 15","price":"$15"},{"id":16,"name":"Item 16","price":"$16"},{"id":17,"name":"Item 17","price":"$17"},{"id":18,"name":"Item 18","price":"$18"},{"id":19,"name":"Item 19","price":"$19"},{"id":20,"name":"Item 20","price":"$20"}];
$('#mytab').bootstrapTable({
data:data,
queryParams: "queryParams",
toolbar: "#toolbar",
sidePagination: "true",
striped: true, // 是否显示行间隔色
//search : "true",
uniqueId: "ID",
pageSize: "5",
pagination: true, // 是否分页
sortable: true, // 是否启用排序
columns: [{
field: 'id',
title: '登录名'
},
{
field: 'name',
title: '昵称'
},
{
field: 'price',
title: '角色'
},
{
field: 'price',
title: '操作',
width: 120,
align: 'center',
valign: 'middle',
formatter: actionFormatter,
},
]
});
//操作栏的格式化
function actionFormatter(value, row, index) {
var id = value;
var result = "";
result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
return result;
}
</script>
</body>
</html>
BootstrapTable的属性一览表:
url: '/Home/GetDepartment', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
}]
如果我们想要再将这一列显示的时候就要用到：showColumns属性。当showColumns为true的时候，会在表格上方产生一个下拉框，如图所示：
bootstrap-Table列过滤的功能
免去扩展表格搜索框的烦恼具体步骤：
https://www.bootcdn.cn/bootstrap-table/
<script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/extensions/filter-control/bootstrap-table-filter-control.js"></script>
定义表格属性及表头属性
<table id="tb_roles" data-filter-control="true">
<thead>
<tr>
<th data-field="ROLE_NAME" data-filter-control="select">角色名称</th>
<th data-field="DESCRIPTION" data-filter-control="input">角色描述</th>
<th data-field="ROLE_DEFAULTURL" data-filter-control="input">角色默认页面</th>
</tr>
</thead>
</table>
因为这里定义了表头的属性，所以，js初始化的时候就不用定义列了。
二、bootstrap-Table基础表格
@*
For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
ViewData["Title"] = "Index";
Layout = null;
}
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
<title>Index</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/locale/bootstrap-table-zh-CN.min.js"></script>
<!---->
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<!---->
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<!---->
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/2.1.30/js/locales/bootstrap-datetimepicker.zh-CN.js"></script> <style>
.table th, .table td {
text-align: center;
vertical-align: middle !important;
}
</style>
<script type="text/javascript">
//
var UploadPath = "";
//开始上传
//设置不可点击
function AjaxFile(file, i,uuidN) {
var name = file.name; //文件名
if ($("#inputFileName").val()) {
name = name.split(".");
var extension = name[name.length - ].toString().toUpperCase();
name = $("#inputFileName").val()+"." + extension;
}
size = file.size, //总大小shardSize = 2 * 1024 * 1024,
shardSize = * * ,//以2MB为一个分片
shardCount = Math.ceil(size / shardSize); //总片数
if (i >= shardCount) {
return;
}
//计算每一片的起始与结束位置
var start = i * shardSize,
end = Math.min(size, start + shardSize);
//构造一个表单，FormData是HTML5新增的
var form = new FormData();
form.append("data", file.slice(start, end)); //slice方法用于切出文件的一部分
@*var uuidN="@ViewBag.uuidN";*@
form.append("uuidN", uuidN);
//form.append("lastModified", file.lastModified);
form.append("fileName", name);
form.append("total", shardCount); //总片数
form.append("index", i + ); //当前是第几片
UploadPath = file.lastModified
//Ajax提交文件
$.ajax({
url: "/Home/UploadFile",
type: "POST",
data: form,
async: true, //异步
processData: false, //很重要，告诉jquery不要对form进行处理
contentType: false, //很重要，指定为false才能形成正确的Content-Types
success: function (result) {
if (result != null) {
i = result.number++;
var num = Math.ceil(i * / shardCount);
$("#output").text(num + '%');
AjaxFile(file, i, uuidN);
if (result.state) {
SearchData();
//移除禁用操作
$("#inputFileName").attr("disabled", false);
$("#file").attr("disabled", false);
$("#upfile").attr("disabled", false);
//
var filepath = $("#path");
filepath.after(filepath.clone().val(""));
filepath.remove();//清空input file
$('#upfile').val('请选择文件');
//跳转链接
console.log("data.urlInfo:" + result.urlInfo);
var domain = window.location.host;
var urlPath = "http://" + domain + result.urlInfo;
window.open(urlPath);
}
}
}
});
}
//
function InteTable()
{
$("#table tbody tr").each(function (i) { //遍历表格tr 行(id=table下的tbody元素的tr行)
//alert($(this).text());//整行tr值
//alert($(this).children("td").eq(3).text());
if ($(this).children("td").eq().text() != "压缩完成") {
var obj = $(this).children("td").eq().children("a").eq();
obj.css('display','none');
//obj.append(" ★");
//alert(obj.text());
}
});
} //查询事件
function SearchData() {
$('#table').bootstrapTable('refresh', { pageNumber: });
//InteTable();渲染导致重新对表格td里面的a标签设置text属性无效。只有 onLoadSuccess 这个属性
} //分页数据
$(function () { $("#StartCreateTime").datetimepicker({
format: 'YYYY-MM-DD hh:mm',
locale: moment.locale('zh-cn'),
}); $("#EndCreateTime").datetimepicker({
format: 'YYYY-MM-DD hh:mm',
locale: moment.locale('zh-cn'),
}).on('show', function (ev) {
var stime = $("#EndCreateTime").val();
}); $("#DelEmpty").click(function () {
$('#StartCreateTime').val("");
$('#EndCreateTime').val("");
}) $("#file").click(function () {
$("#file").attr("disabled", true); //按钮禁止点击
$("#inputFileName").attr("disabled", "disabled");
$("#upfile").attr("disabled", "disabled");
var file = $("#path")[].files[];
var guid = generateUUID();
AjaxFile(file,,guid);
}); //
var clipboard = new ClipboardJS('.clipboard');
clipboard.on('success', function(e) {
layer.msg("已复制成功" + e.text);
});
clipboard.on('error', function (e) {
layer.open({
title: '提示',
content: '您的浏览器可能不支持，请手动复制~'
});
});
//查询条件
var query = {
Params:function queryParams(params) {
return {
pageSize: params.pageSize,
pageNumber: params.pageNumber,
StartCreateTime: $("#StartCreateTime").val(),
EndCreateTime: $("#EndCreateTime").val(),
};
}
} $("#table").bootstrapTable({
url: "/Home/GetSearchData",
queryParamsType: '', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
queryParams: query.Params,
method: "post", //
pagination: true,
pageNumber: , //初始化加载第一页，默认第一页,并记录
pageSize: , //初始化默认每页的记录行数（*）
pageList: [, , , ],
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
striped: true, //是否显示行间隔色
cache: false,
uniqueId: "Id", //每一行的唯一标识，一般为主键列
height:,
paginationPreText: "上一页",
paginationNextText: "下一页",
columns: [
//{ checkbox: true },
{ title: 'ID', field: 'Id',hidden:true},
{ title: '序号', width: , align: "center", formatter: function (value, row, index) { return index + ; } },
{ title: '文件名', field: 'File_Name' },
{ title: '文件状态', field: 'File_State' },
//{
// title: 'File_UuidN', field: 'File_UuidN',hidden: true, formatter: function (value, row, index) { // return value;
// }
//},
{
title: '视频路径', field: 'File_Path2', formatter: function (value, row, index) {
if (value != "") return "<a class=\"btn btn-info\" href=\"" + value + "\" target=\"_blank\" >播放视频</a><a style=\"margin-left:20px;\" class=\"clipboard\" href=\"javascript:;\" data-clipboard-text=\"http://" + window.location.host + value + "\" rel=\"noopener\">复制链接</a>";
else return "";
}
},
{ title: '请求时间', field: 'CreateTime' }
],onLoadSuccess: function(){ //加载成功时执行
//("#theTable th").css("text-align","center"); //设置表头内容居中
InteTable();
},
onLoadError: function(){ //加载失败时执行
alert("加载数据失败");
} });
}); // function generateUUID() {
var d = new Date().getTime();
var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = (d + Math.random()*)% | ;
d = Math.floor(d/);
return (c=='x' ? r : (r&0x3|0x8)).toString();
});
return uuid;
}; </script>
</head>
<body>
<div class="container">
<div class="form-horizontal" role="form">
<div class="form-group" style="margin-top:5%;">
<label for="inputPassword" class="col-sm-2 control-label">上传文件名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputFileName"
placeholder="请输入文件名">
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">文件上传:</label>
<div class="col-sm-10">
<div class="col-lg-4" style="margin:0;padding:0">
<input type="text" class="form-control" value="请选择文件" size="" name="upfile" id="upfile" style="border:1px dotted #ccc">
</div>
<div class="col-lg-1" style="margin:0;padding:0">
<input type="button" class="btn btn-info form-control " value="浏览" onclick="path.click()">
</div>
<div class="col-lg-1">
<input type="file" class="form-control" id="path" style="display:none" multiple="multiple" onchange="upfile.value=this.value">
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5">
<div class="col-lg-2">
<span id="output" style="margin-left:50%">%</span>
</div>
</div>
</div> <div class="form-group">
<div class="col-sm-offset-2 col-lg-2"> <button type="button" id="file" class="form-control btn btn-primary">开始上传</button> </div>
<div class="col-lg-3">
<div class="input-group">
<label class="input-group-addon">开始时间</label>
<input type="text" class="form-control" id="StartCreateTime">
</div>
</div>
<div class="col-lg-3">
<div class="input-group">
<label class="input-group-addon">结束时间</label>
<input type="text" class="form-control" id="EndCreateTime">
</div>
</div>
<div class="col-lg-2 col-sm-2">
<div class="input-group">
<div>
<input class="btn btn-primary " type="button" value="查询" onclick="SearchData()">
<input class="btn btn-danger " id="DelEmpty" type="button" value="清空">
</div>
</div>
</div>
</div>
</div>
<div class="panel-body container-fluid">
<table id="table"></table>
</div>
</div>
</body>
</html>
四、bootstrap-Table的更多相关文章
- ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十四节--后台工作者HangFire与ABP框架Abp.Hangfire及扩展
返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 HangFire与Quartz.NET相比主要是HangFire的内置提供集成化的控制台,方便后台查看及监控,对于 ...
- JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...
- 后台系统组件：一丶bootstrap table
http://www.cnblogs.com/landeanfen/p/4976838.html (bootstrap table) http://www.cnblogs.com/landeanfen ...
- Bootstrap Table使用分享
版权声明:本文为博主原创文章,未经博主允许不得转载. 最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问 ...
- [前端插件]Bootstrap Table服务器分页与在线编辑应用总结
先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...
- ABP+AdminLTE+Bootstrap Table权限管理系统一期
学而时习之,不亦说乎,温顾温知新,可以为师矣. 这也是算是一种学习的方法和态度吧,经常去学习和总结,在博客园看了很多大神的文章,写下一点对于ABP(ABP是“ASP.NET Boilerplat ...
- ABP+AdminLTE+Bootstrap Table权限管理系统第五节--WBEAPI及SwaggerUI
一,Web API ABP的动态WebApi实现了直接对服务层的调用(其实病没有跨过ApiController,只是将ApiController公共化,对于这一点的处理类似于MVC,对服务端的 调用没 ...
随机推荐
- ubuntu14.0 服务器webmin安装
添加相关的源“: sudo vim /et/apt/source.list 在文件后添加: deb http://download.webmin.com/download/repository sar ...
- MySQL MHA+Keepalived
一.MHA的简单介绍MHA是由perl语言编写的,用外挂脚本的方式实现mysql主从复制的高可用性.MHA可以自动检测mysql是否宕机,如果宕机,在10-30s内完成new master的选举,应用 ...
- Strcpy,strcpy使用注意
一.char *strcpy(char *dest, const char *src) 参数 dest -- 指向用于存储复制内容的目标数组. src -- 要复制的字符串. 注意: 1.dest需要 ...
- Es学习第八课， Filter、bool和范围查询
Filter过滤查询 filter是不计算相关性的,同时可以缓存.因此filter速度快于query. 我们先在kibana上先添加数据来做准备 POST /lib4/items/_bulk { &q ...
- JavaWeb(三)：JSP
JSP是JavaServer Page的缩写,也就是服务端网页. 一.概述 1.1 为什么使用JSP 在很多动态网页中,绝大部分内容都是固定不变的,只有局部内容需要动态产生和改变.JSP是简化Serv ...
- 调试web worker （动态生成的worker）
1.在worker.js源码文件中 写下debugger关键词 2. F12打开控制台,重新刷新页面,加载worker.js文件(注意之前的缓存,chrome推荐使用 ctrl + F5 刷新) 3. ...
- WCDB错误"No matching constructor for initialization of 'WCTColumnBinding'"
开始看到这个错误有点匪夷所思,完全不知道问题指向哪里, 最后用过排除法,把之前建立多个类进行了一一排除,发现有个属性是 @property(nonatomic, assign) NSInteger * ...
- BUUCTF | 摩丝
将得到的交上去居然不对: 然而大写却过了: flag{ILOVEYOU} 因为摩斯电码在设计的时候就没有区分大小写,而且从码表中可以看到,都是大写,所以在网站上解密出来的自己转成大写
- angularjs radio 默认选中
添加ng-model后checked="checked"失效,可见angularjs也不好,会失效html标准属性 解决:添加ng-checked="1" &l ...
- tomcat启动前端项目
前后端分离项目,前端使用vue,部署启动前端项目可以使用NodeJS,Nginx,Tomcat. *)使用Tomcat部署启动: 1.把vue项目build生成的dist包,放到Tomcat的weba ...