bootstraptable汇总_JS组件系列——表格组件神器：
bootstraptable
前⾔：前⾯介绍了两篇关于bootstrap table的基础⽤法，这章我们继续来看看它⽐较常⽤的⼀些功能，来个终结篇吧，⽑爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能覆盖似乎不太现实，博主挑选了⼀些⾃认为⽐较常⽤的功能在此分享给各位园友。源码也在这篇统⼀给出。好了，不多说废话，开始我们的⼲货之旅吧。
bootstrap table系列：
JS组件系列——表格组件神器：bootstrap table
JS组件系列——表格组件神器：bootstrap table(⼆：⽗⼦表和⾏列调序)
JS组件系列——表格组件神器：bootstrap table(三：终结篇，最后的⼲货福利)
⼀、效果展⽰
1、表格⾏样式
⽐如我们有⼀个显⽰订单页⾯的需求，不同状态的订单显⽰不同的颜⾊，如图：
2、表格⾏内编辑
第⼀篇的时候有园友就问过博主是否可以⽀持⾏内编辑的效果，答案是肯定的。我们先来看看效果：
编辑前
点击某个单元格数据
编辑后完成后
3、表格⾏列合并
关于⾏列合并的需求博主觉得是⾮常常见的，尤其是做页⾯报表的时候需要⽤到。先来看看效果：
当前页显⽰不全，点击进⼊看看。怎么样？效果还不错吧。
4、表格数据导出
关于表格数据导出，bootstrap table⽀持三种模式的导出：basic、all、selected。也就是当前页数据
导出、所有数据导出、选中数据导出。并且⽀持导出多种类型的⽂件，⽐如常见的excel、xml、json等格式。
导出当前页到excel
导出表格所有数据
导出选中⾏数据
⾄于其他类型的⽂件的导出，和excel基本相同，就不做效果展⽰了。
⼆、表格⾏样式代码⽰例
关于表格⾏的样式设置，其他是它⼀个最基础的功能，为什么要把它放在第三篇？是因为博主觉得这功能可能到处都⽤得着。当然，效果并不难，⾃⼰⽤jQuery设置tr的背景⾊也可以实现，但是博主觉得，既然bootstrap table提供了机制设置⾏的背景⾊，我们何不⽤它内置的api呢。我们看看如何实现。
初始化表格的时候
复制代码
//初始化Table
$('#tb_order').bootstrapTable({
url: '/TableStyle/GetOrder', //请求后台的URL()
method: 'get', //请求⽅式()
jquery是什么功能组件//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, //是否显⽰⽗⼦表
rowStyle: function (row, index) {
//这⾥有5个取值代表5中颜⾊['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (row.ORDER_STATUS == "待排产") {
strclass = 'success';//还有⼀个active
}
else if (row.ORDER_STATUS == "已删除") {
strclass = 'danger';
}
else {
return {};
}
return { classes: strclass }
},
columns: [{
checkbox: true
}, {
field: 'ORDER_NO',
title: '订单编号'
}, {
field: 'ORDER_TYPE',
title: '订单类型'
}, {
field: 'ORDER_STATUS',
title: '订单状态'
}, {
field: 'REMARK',
title: '备注'
}, ]
});
复制代码
其实重点就在这个参数⾥⾯：
复制代码
rowStyle: function (row, index) {
//这⾥有5个取值代表5中颜⾊['active', 'success', 'info', 'warning', 'danger']; var strclass = "";
if (row.ORDER_STATUS == "待排产") {
strclass = 'success';//还有⼀个active
}
else if (row.ORDER_STATUS == "已删除") {
strclass = 'danger';
}
else {
return {};
}
return { classes: strclass }
},
复制代码
bootstrap table⽀持5中表格的⾏背景⾊，分别是'active', 'success', 'info', 'warning', 'danger'这五种，⾄于每种对应的背景颜⾊，将代码运⾏起来就可看到。关于这个⽅法的返回值，博主第⼀次⽤的时候也研究了好久，按照bootstrap table的规则，必须返回⼀个json格式的对象型如： { classes: strclass } 。
三、表格⾏内编辑代码⽰例
关于表格⾏内编辑，需要使⽤bootstrap table扩展的⼏个js⽂件。
1、引⼊额外的js⽂件
2、在cshtml页⾯定义表格时，添加两个属性
复制代码
部门名称上级部门部门级别描述
复制代码
如果是在js⾥⾯初始化，写法如下：
{
field: "name",
title: "名称",
editable:true
}
3、在js⾥⾯初始化表格的时候注册编辑保存的事件
复制代码
$('#tb_departments').bootstrapTable({
url: '/Editable/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, //每页的记录⾏数(*)
onEditableSave: function (field, row, oldValue, $el) { $.ajax({
type: "post",
url: "/Editable/Edit",
data: { strJson: JSON.stringify(row) },
success: function (data, status) {
if (status == "success") {
alert("编辑成功");
}
},
error: function () {
alert("Error");
},
complete: function () {
}
});
}
});
复制代码
重点还是看看这个事件的处理⽅法
复制代码
onEditableSave: function (field, row, oldValue, $el) { $.ajax({
type: "post",
url: "/Editable/Edit",
data: { strJson: JSON.stringify(row) },
success: function (data, status) {
if (status == "success") {
alert("编辑成功");
}
},
error: function () {
alert("Error");
},
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论