一、简介
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
}
]
});
