bootstrap table复选框选多页勾选

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'
　　}
]