bootstrap table系列：
Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据，支持单选，复选框，排序，分页,显示/隐藏列,固定标题滚动表,响应式设计，Ajax加载JSON数据，点击排序的列，卡片视图等。那么本文给大家介绍JS组件系列之Bootstrap table表格组件神器【终结篇】，一起学习吧！
一、效果展示
1、表格行样式
比如我们有一个显示订单页面的需求，不同状态的订单显示不同的颜色，如图：
2、表格行内编辑
第一篇的时候有园友就问过博主是否可以支持行内编辑的效果，答案是肯定的。我们先来看看效果：
编辑前
点击某个单元格数据
编辑后完成后
3、表格行列合并
关于行列合并的需求博主觉得是非常常见的，尤其是做页面报表的时候需要用到。先来看看效果：
当前页显示不全，点击进入看看。怎么样？效果还不错吧。
4、表格数据导出
关于表格数据导出，bootstrap table支持三种模式的导出：basic、all、selected。也就是当前页数据导出、所有数据导出、选中数据导出。并且支持导出多种类型的文件，比如常见的excel、xml、json等格式。
导出当前页到excel
导出表格所有数据
导出选中行数据
至于其他类型的文件的导出，和excel基本相同，就不做效果展示了。
二、表格行样式代码示例
关于表格行的样式设置，其他是它一个最基础的功能，为什么要把它放在第三篇？是因为博主觉得这功能可能到处都用得着。当然，效果并不难，自己用jQuery设置tr的背景色也可以实现，但是博主觉得，既然bootstrap table提供了机制设置行的背景色，我们何不用它内置的api呢。我们看看如何实现。
初始化表格的时候
rush:js;">
//初始化Table
$('#tb_order').bootstrapTable({
url: '/TableStyle/G
etorder',//请求
后台的URL（*）
method: 'get',//请求方式（*）
//toolbar: '#toolbar',//工具按钮用哪个容器
striped: true,//是否
显示行间隔色
cache: false,//是否使用缓存，
默认为true，所以一般情况下需要设置一下这个
属性（*）
pagination: true,//是否
显示分页（*）
sortable: false,//是否启用排序
sortOrder: "asc",//排序方式
queryP
arams: oTableInit.queryP
arams,//传递参数（*）
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: [{
check
Box: true
},{
field: 'ORDER_NO',title: '订单编号'
},{
field: 'ORDER_TYPE',title: '订单类型'
},{
field: 'ORDER_STATUS',title: '订单状态'
},{
field: 'REMARK',title: '备注'
},]
});
其实重点就在这个参数里面：
rush:js;">
rowStyle: function (row,
bootstrap table支持5中表格的行背景色，分别是'active','danger'这五种，至于每种对应的背景颜色，将代码运行起来就可看到。关于这个方法的返回值，博主第一次用的时候也研究了好久，按照bootstrap table的规则，必须返回一个json格式的对象型如： { classes: strclass } 。
三、表格行内编辑代码示例
关于表格行内编辑，需要使用bootstrap table扩展的几个js文件。
1、引入额外的js文件
rush:js;">
dist/bootstrap3-editable/css/bootstrap-editable.css">
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
