JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）
前言：前面介绍了两篇关于bootstrap table的基础用法，这章咱们继续来看看它比较经常使用的一些功能，来个终结篇吧，毛爷爷告诉咱们作事要善始善终~~bootstrap table这东西要想全部功能覆盖彷佛不太现实，博主挑选了一些自认为比较经常使用的功能在此分享给各位园友。源码也在这篇统一给出。好了，很少说废话，开始咱们的干货之旅吧。css
bootstrap table系列：html
- JS组件系列——表格组件神器：bootstrap table
- JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
- JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）
1、效果展现
一、表格行样式
好比咱们有一个显示订单页面的需求，不一样状态的订单显示不一样的颜色，如图：jquery
二、表格行内编辑
第一篇的时候有园友就问过博主是否能够支持行内编辑的效果，答案是确定的。咱们先来看看效果：git
编辑前ajax
点击某个单元格数据数据库
编辑后完成后json
三、表格行列合并
关于行列合并的需求博主以为是很是常见的，尤为是作页面报表的时候须要用到。先来看看效果：bootstrap
当前页显示不全，点击进入看看。怎么样？效果还不错吧。api
四、表格数据导出
关于表格数据导出，bootstrap table支持三种模式的导出：basic、all、selected。也就是当前页数据导出、全部数据导出、选中数据导出。而且支持导出多种类型的文件，好比常见的excel、xml、json等格式。浏览器
导出当前页到excel
导出表格全部数据
导出选中行数据
至于其余类型的文件的导出，和excel基本相同，就不作效果展现了。
2、表格行样式代码示例
关于表格行的样式设置，其余是它一个最基础的功能，为何要把它放在第三篇？是由于博主以为这功能可能处处都用得着。固然，效果并不难，本身用jQuery设置tr的背景色也能够实现，可是博主以为，既然bootstrap table提供了机制设置行的背景色，咱们何不用它内置的api呢。咱们看看如何实现。
初始化表格的时候
//初始化Table $('#tb_order').bootstrapTable({ url: '/TableStyle/GetOrder', //请求后台的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, //是否显示父子表 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 } 。
3、表格行内编辑代码示例
关于表格行内编辑，须要使用bootstrap table扩展的几个js文件。
一、引入额外的js文件
<link rel="stylesheet" href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"> <script src="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script> <script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
二、在cshtml页面定义表格时，添加两个属性
<table id="tb_departments"> <thead> <tr> <th data-field="Name" data-editable="true">部门名称</th> <th data-field="ParentName">上级部门</th> <th data-field="Level" data-editable="true">部门级别</th> <th data-field="Desc" data-editable="true">描述</th> </tr> </thead> </table>
若是是在js里面初始化，写法以下：
{ field: "name", title: "名称", editable:true }
三、在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"); }, complete: function () { } }); }
对应的方法里面须要本身处理保存的逻辑。四个参数field, row, oldValue, $el分别对应着当前列的名称、当前行数据对象、更新前的值、编辑的当前单元格的jQuery对象。
4、表格行列合并代码示例
表格的行列合并功能不用引用其余的js文件，只须要在cshtml页面使用table的colspan和rowspan便可实现。
一、cshtml页面
<table id="tb_report"> <thead> <tr> <th colspan="4" data-valign="middle" data-align="center">第一季度</th> <th colspan="4" data-valign="middle" data-align="center">第二季度</th> <th colspan="4" data-valign="middle" data-align="center">第三季度</th> <th colspan="4" data-valign="middle" data-align="center">第四季度</th> <th data-field="TotalCount" rowspan="2" data-valign="middle" data-align="center">年度汇总</th> </tr> <tr> <th data-field="JanCount" data-align="center">一月</th> <th data-field="FebCount" data-align="center">二月</th> <th data-field="MarCount" data-align="center">三月</th> <th data-field="FirstQuarter" data-align="center">第一季度</th> <th data-field="AprCount" data-align="center">四月</th> <th data-field="MayCount" data-align="center">五月</th> <th data-field="JunCount" data-align="center">六月</th> <th data-field="SecondQuarter" data-align="center">第二季度</th> <th data-field="JulCount" data-align="center">七月</th> <th data-field="AguCount" data-align="center">八月</th> <th data-field="SepCount" data-align="center">九月</th> <th data-field="ThirdQuarter" data-align="center">第三季度</th> <th data-field="OctCount" data-align="center">十月</th> <th data-field="NovCount" data-align="center">十一月</th> <th data-field="DecCount" data-align="center">十二月</th> <th data-field="ForthQuarter" data-align="center">第四季度</th> </tr> </thead> </table>
二、js初始化并没有特殊
$('#tb_report').bootstrapTable({
url: '/GroupColumns/GetReport', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪一个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，因此通常状况下须要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
});
怎么样，有没有很简单。固然，有人说了，你均可以不用js初始化，直接在cshtml里面用table的属性去设置url、分页等信息。确实，若是咱们看过它的api，会发现它初始化的每个属性都对应一个table的属性。型如
若是你的表格没有一些特殊的事件须要处理，这样是彻底没有问题的。
5、表格数据导出代码示例
表格数据的导出功能也须要一些扩展的js支持。
一、引入额外的js文件
<script src="~/Content/bootstrap-table/extensions/export/bootstrap-table-export.js"></script> <script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
二、js初始化的时候
$('#tb_departments').bootstrapTable({
url: '/Export/GetDepartment', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪一个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，因此通常状况下须要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
clickToSelect:true,
showExport: true, //是否显示导出
exportDataType: "basic", //basic', 'all', 'selected'.
columns: [{
checkbox: true
}, {
field: 'Name',
title: '部门名称'
}, {
field: 'ParentName',
title: '上级部门'
}, {
field: 'Level',
title: '部门级别'
}, {
field: 'Desc',
title: '描述'
}, ]
});
仍是来看重点：这两个属性
showExport: true, //是否显示导出 exportDataType: "basic", //basic', 'all', 'selected'.
showExport表示是否显示导出的按钮，exportDataType表示导出的模式是当前页、全部数据仍是选中数据。
6、总结
以上就是功能的效果以及实现的简单代码。博主发现有几个问题有待解决。
一、行内编辑的功能是每个单元格提交到后台，这样会形成数据库的频繁操做，感受不太合适。不知道有没有更好的方式，每行提交到后台。
二、导出的功能虽然很好用，可是遗憾的是不支持IE浏览器，博主试过官网上面的example，好像IE也导出不了。待验证。
源码提供出来，园友们有兴趣能够看看。源码下载。
最近打算作点本身的东西出来，将博客里面的一些好的技术融合进去。有项目合做的小伙伴赶快联系博主吧！
本文原创出处：http://www.cnblogs.com/landeanfen/
欢迎各位转载，可是未经做者本人赞成，转载文章以后必须在文章页面明显位置给出做者和原文链接，不然保留追究法律责任的权利！
相关文章
- 1. JS组件系列——表格组件神器：bootstrap table
- 2. JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
- 3. JS组件系列——Bootstrap Table 表格行拖拽
- 4. JS组件系列——Bootstrap文件上传组件：bootstrap fileinput
- 5. 表格组件神器：bootstrap table详细使用指南
- 6. 使用bootstrap table小记（表格组件）
- 7. JS组件系列——本身动手封装bootstrap-treegrid组件
- 8. JS组件系列——自己动手封装bootstrap-treegrid组件
- 9. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
- 更多相关文章...
- • ASP AdRotator 组件 - ASP 教程
- • MyBatis的核心组件 - MyBatis教程
- • Docker容器实战(七) - 容器眼光下的文件系统
- • 互联网组织的未来：剖析GitHub员工的任性之源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. JS组件系列——表格组件神器：bootstrap table
- 2. JS组件系列——表格组件神器：bootstrap table（二：父子表和行列调序）
- 3. JS组件系列——Bootstrap Table 表格行拖拽
- 4. JS组件系列——Bootstrap文件上传组件：bootstrap fileinput
- 5. 表格组件神器：bootstrap table详细使用指南
- 6. 使用bootstrap table小记（表格组件）
- 7. JS组件系列——本身动手封装bootstrap-treegrid组件
- 8. JS组件系列——自己动手封装bootstrap-treegrid组件
- 9. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）