一、简介
BootstrapTable是一个Bootstrap 3 的表格插件，支持单选, 复选框, 排序, 分页等功能
官网：http://bootstrap-table.wenzhixin.net.cn/
github：https://github.com/wenzhixin/bootstrap-table
二、常用属性
1.开启查询
search: true,
searchAlign: "left",
searchOnEnterKey: true, //回车查询
2.显示刷新按钮
showRefresh: true,
3.单选/多选
singleSelect: true,
maintainSelected: false,
4.开启分页
pagination: true,
sidePagination:'client' //或 'server' ，服务端必须使用url或ajax获取数据
客户端分页的数据格式:
[ { "id": 0, "name": "Item 0", "price": "$0" }, ]
服务端分页的数据格式:
{ "total": 200, "rows": [ { "id": 0, "name": "Item 0", "price": "$0" }, ] }
5.数据源
responseHandler: handler,
function handler(res) {
return res; //如果使用server分页，这里使用res.row
}
6.单元格的格式化
如行的删除按钮
$table.bootstrapTable({ columns: [ { title: '操作', align: 'center', field: 'Status', valign: 'middle', formatter: formatOperat } ] }) function formatOperat(value, row, index) { return ['<button type="button" onclick="deleteItem(\'' + row.Id + '\')" >移除</button>']; }
三、bug记录
1.三个联动table的使用jQuery Event的click-row.bs.table事件
如： 点击table1的行3次，在点击table2的行，这时候会导致连接table3的url进行了3次
$table1.on("click-row.bs.table", function (row, event) { showTable2(event.Id);//显示第二个联动table }); $table2.on("click-row.bs.table", function (row, event) { showTable3(event.Id);//显示第三个联动table });
解决：使用他自带的Option Event的onClickRow事件
$table.bootstrapTable({ url: url, dataType: "json", search: true, searchAlign: "left", buttonsAlign: "left", showRefresh: true, searchOnEnterKey: true, clickToSelect: true, singleSelect: true, maintainSelected: false, responseHandler: handler, idField: "Id", onClickRow: function (row, $element, field) { showTable2(row.Id); ....//省略 }, columns: [ { field: 'state', radio: 'true' }, ...//省略 { title: '操作', align: 'center', field: 'Status', valign: 'middle', formatter: formatOperat } ] })
2.使用radio，并启用clickToSelect: true, ，出现BUG：点击radio无反应
场景：实现点击行刷新另外一张表，但点击最后一个单元格不执行该操作，因为最后单元格自定义了自己的一系列操作
解决方法
解析：启用clickToSelect后，单击行会自动选中chebox或者radio，触发onCheck事件；
onCheck中如果直接写执行代码，但这些代码是和onClickCell是一样的，那么导致重复执行；
最后通过引入外部curField来控制解决。
代码：
var curField = 0; $table.bootstrapTable({ url: "/Get?Id=1", dataType: "json", search: true, searchAlign: "left", buttonsAlign: "left", showRefresh: true, searchOnEnterKey: true, clickToSelect: true, singleSelect: true, selectItemName: "custonSelectItem", striped: true, maintainSelected: false, responseHandler: handler, idField: "Id", onClickCell: function (field, value, row, $element) { curField = 1; if (field !== "Status") { //执行代码 } }, onCheck: function (row, $element) { if (curField === 0) { //执行代码 } else { curField = 0; } }, columns: [ { field: 'state', radio: 'true' }, { title: '名称', field: 'Name', align: 'center', valign: 'middle' }, { title: '操作', align: 'center', field: 'Status', valign: 'middle', formatter: formatOperat } ] });
