使用的 jquery版本为 2.1.1
在项目中发现bootstrap table的复选框选中后,翻页操作会导致上一页选中的丢失,api中的 bootstrapTable('getSelections'); 只能拿到当前页的复选框。
js - 表格初始化
$(function(){
$('#res_table').bootstrapTable({
url : '${path}/res/listData',
contentType : "application/x-www-form-urlencoded",
method : 'post',
sortable: true,
dataType : 'json',
toolbar : '#toolbar',
striped : true,
cache : false,
pagination : true,
sidePagination : "server", //服务端分页
pageNumber : 1,
pageSize : 10,
pageList : [ 10, 20, 30, 40 ], //可供选择的每页的行数(*)
strictSearch : true,
showColumns : true,
showRefresh : true,
minimumCountColumns : 2,
clickToSelect : true, //是否启用点击选中行
uniqueId : "ID",
showToggle : true,
cardView : false,
detailView : false, //是否显示父子表
maintainSelected : true,
columns :[
{
align : 'center',
checkbox: true, // 显示复选框
formatter: function (i,row) { // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
if($.inArray(row.id,Array.from(overAllIds))!=-1){ // 因为 Set是集合,需要先转换成数组
return {
checked : true // 存在则选中
}
}
}
},{
field : 'code',
align : 'left',
title : '资源编码'
},{
field : 'name',
align : 'left',
title : '资源名称'
},{
field : 'type',
align : 'left',
title : '资源类型',
}
]
});//表格结束
当表格选中或取消选中时
$('#res_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() 里
});
//初始化结束
});
bootstrap table api 选中事件的 jquery 方法
js方法
var overAllIds = new Set(); // 全局保存选中行的对象
function examine(type,datas){ // 操作类型,选中的行
if(type.indexOf('uncheck')==-1){
$.each(datas,function(i,v){ // 如果是选中则添加选中行的 id
overAllIds.add(v.id);
});
}else{
$.each(datas,function(i,v){
overAllIds.delete(v.id); // 删除取消选中行的 id
});
}
}
如果是删除操作需要把 Set() 对象先转换为数组!
如果使用 Array()
<script type="text/javascript">
$(function(){
$('#res_table').bootstrapTable({
url:'${path}/role/resourceData',
search : true,
toolbar : '#toolbar', //工具栏
sortable: true, //开启排序
cache : false,
striped : true,
singleSelect : false,
locale : 'zh-CN',
sidePagination : "server",
clickToSelect : true, //是否启用点击选中行
pagination : true,
maintainSelected : true, //如果是客户端分页,这个设为 true 翻页后已经选中的复选框不会丢失
pageSize : 10,
pageNumber : 1,
pageList: [10, 20, 30, 40],
showRefresh : true, //是否显示刷新按钮
columns :[
{
checkbox: true, // 显示复选框
formatter: function (i,row) { // 每次加载 checkbox 时判断当前 row 的 id 是否已经存在全局 Set() 里
if($.inArray(row.id,overAllIds)!=-1){// 因为 判断数组里有没有这个 id
return {
checked : true // 存在则选中
}
}
}
},{
field : 'code',
align : 'left',
title : '资源编码',
sortable: true
},{
field : 'name',
align : 'left',
title : '资源名称',
},{
field : 'type',
align : 'left',
title : '资源类型',
}
]
});
$('#res_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); // 保存到全局 Array() 里
});
});
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.id) : -1;
});
}else{
$.each(datas,function(i,v){
overAllIds.splice(overAllIds.indexOf(v.id),1); //删除取消选中行
});
}
//console.log(overAllIds);
}
</script>