bootstrap table复选框选多页勾选
在项目中发现,bootstrap table的复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable(‘getSelections’); 只能拿到当前页的复选框。
js - 表格初始化
/**
* 初始化表格布局和数据加载
*/
function initTable() {
$('#table').bootstrapTable({
locale: sessionStorage.getItem("userLanguage"),
height: window.innerHeight,
toolbar: "form",
method: 'post',
dataType: "json",
striped: true,
pagination: true,
clickToSelect: true,
maintainSelected : true, //如果是客户端分页,这个设为 true 翻页后已经选中的复选框不会丢失
sidePagination: "server",
pageNumber: 1,
pageSize: 20,
pageList: [20, 50, 100],
url: "/page/aliyun",
//responseHandler:responseHandler, //在渲染页面数据之前执行的方法,此配置很重要!!!!!!!
queryParams: function(params) {
var condition = $("form").serializeJSON();
var list = $('#tree').treeview("getChecked");
if (list != null && list.length > 0) {
condition.list = JSON.stringify(list);
}
condition.pageNo = params.offset / params.limit;
condition.pageSize = params.limit;
return condition;
},
columns:[
{checkbox: true, // 显示复选框
formatter: function (i,row) { // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
if($.inArray(row.deviceId,overAllIds)!=-1){// 因为 判断数组里有没有这个 id
return {
checked : true // 存在则选中
}
}
}
},
{title:"序号",align:'center',
formatter:function(value, row, index){
var options = $("#table").bootstrapTable("getOptions");
return options.pageSize * (options.pageNumber - 1) + index + 1;
}
},
{field:'deviceId',visible:false},
{field:'deviceName',title:"设备名称"},
{field:'deviceSim',title:"设备SIM"},
{field:'deviceIccid',title:"设备ICCID"},
{field:'aliyunId',visible:false},
{field:'productKey4Aliyun',title:"阿里云产品密钥"},
{field:'deviceName4Aliyun',title:"阿里云产品名称"},
],
onLoadSuccess: function(res){
var tableData = new Object();
tableData.total = res.data.pageTotal;
tableData.rows = res.data.pageRows;
$('#table').bootstrapTable("load",tableData);
},
});
$('#table').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows) {
var datas = $.isArray(rows) ? rows : [rows]; // 点击时获取选中的行或取消选中的行
examine(e.type, datas); // 保存到全局 Set() 里
})
}
js方法
```javascript
var overAllIds = new Array(); //全局数组
function examine(type,datas){
if(type.indexOf('uncheck')==-1){
$.each(datas,function(i,v){
// 添加时,判断一行或多行的 id 是否已经在数组里 不存则添加
overAllIds.indexOf(v.id) == -1 ? overAllIds.push(v.deviceId) : -1;
});
}else{
$.each(datas,function(i,v){
overAllIds.splice(overAllIds.indexOf(v.deviceId),1); //删除取消选中行
});
}
}
//设置bootstrap table checkbox自动选中(反选)
columns : [
{
checkbox : true,
formatter : function(value, row, index) {
if (row.deviceId == $("#deviceId").val()) {
overAllIds.indexOf(row.deviceId) == -1 ? overAllIds.push(row.deviceId) : -1;
return {
checked: true//设置选中
};
}
}
},
{
title : '操作',
width : '130',//设置列宽
field : 'id',
align : 'center'
}
]