bootstrap table 复选框获取选中某几行的数据 + 可翻页

前期要​​​​点：

1.Set 集合的add，delete方法

2.bootstrap table 事件列表,

1.  全选 ：check-all.bs.table 
2. 取消全选：  uncheck-all.bs.table 
3. 选中一行：check.bs.table
4. 取消选中行：uncheck-all.bs.table
5. 事件大全

3.$.inArray(i，items)   定位i存在于items数组的位置，存在返回下标，不存在返回-1

4.Array.from( new Set() ) Set集合转数组

步骤一

定义bootstrap  table表属性，以及列属性

/**
 * 设备管理管理初始化
 */
var Device = {
    id: "DeviceTable",	//表格id
    table: null,
    deviceNameChecked :null
};

/**
 * 初始化表格的列
 */
Device.initColumn = function () {
    return [
	    	{
	      checkbox: true,                          
	      formatter: function (i,row) {   
         //初始化数据时，选中已勾选的行
          if($.inArray(row.deviceName, Array.from(Device.deviceNameChecked)) != -1){
	                    return { checked : true }
	      }
	               
	      }  
	        },
            {title: '设备名称', field: 'deviceName', align: 'center', valign: 'middle'}
    ];
};

/**
* table表属性设置,简化的配置，设置clickToSelect: true
*/
   $('#' + tableId).bootstrapTable({
                    contentType: "application/x-www-form-urlencoded",
                    url: this.url,				//请求地址
                    method: this.method,		//ajax方式,post还是get
                    ajaxOptions: {				//ajax请求的附带参数
                        data: this.data
                    },
                    pageNumber: 1,      		//初始化加载第一页，默认第一页
                    pageSize: this.pageSize,    //每页的记录行数（*）

                    clickToSelect: true,    	//是否启用点击选中行
                    columns: this.columns,		//列数组
                 
                });

步骤二

进入页面初始化数据

//获取选中的数据源
async function getDeviceNameChecked(){
	    return ['110002','110001'];
}
$(function () {
    getDeviceNameChecked().then((data)=>{
    		Device.deviceNameChecked = new Set(data)
        	var defaultColunms = Device.initColumn();
            //获取表格列数据
       	    var table = new BSTable(Device.id, "/device/list", defaultColunms);
       	    Device.table = table.init();
    })
})

步骤三

定义表格事件

      $('#DeviceTable')
        .on("check-all.bs.table",(event,rows)=>{
        	rows.forEach(function(item){
        		Device.deviceNameChecked.add(item.deviceName)
        	})
        }).on("uncheck-all.bs.table",(event,rows)=>{
        	rows.forEach(function(item){
        		Device.deviceNameChecked.delete(item.deviceName)
        	})
        }).on("check.bs.table",(event,row)=>{
        	Device.deviceNameChecked.add(row.deviceName)
        }).on("uncheck.bs.table",(event,row)=>{
        	Device.deviceNameChecked.delete(row.deviceName)
        })

步骤四

获取选中的数据

      $("#btn_save").bind("click", function () {
        	var allSelections = Device.deviceNameChecked
        	console.log(allSelections)
        });

成果