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

前期要点：

1.Set 集合的add，delete方法

2.bootstrap table 事件列表,

全选：check-all.bs.table
取消全选： uncheck-all.bs.table
选中一行：check.bs.table
取消选中行：uncheck-all.bs.table
事件大全

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

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

步骤一

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


/*** 设备管理管理初始化*/
var Device = {id: "DeviceTable", //表格idtable: 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还是getajaxOptions: {                //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.deviceNameCheckedconsole.log(allSelections)});

成果

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

js获取checkbox复选框获取选中的选项
分享下javascript获取checkbox 复选框获取选中的选项的方法. 有关javascript 获取checkbox复选框的实例数不胜数. js实现: var form = document. ...
input复选框获取选中的值
好久没有用原生了,已经忘得差不多了,简单整理一下: getDataLists();function getDataLists() {console.log(789)var data = [{id: ' ...
DevExpress gridcontrol添加了复选框删除选中的多行/批量删除的方法
思路:遍历gridView1的每一行,该行中checkbox列被勾选则设置该行为选中状态,执行gridView1提供的DeleteSelectedRows方法则可 public void DoDele ...
复选框遍历选中 php,jQuery的复选框选择并且获取值
这次给大家带来jQuery的复选框选择并且获取值,jQuery复选框选择并且获取值的注意事项有哪些,下面就是实战案例,一起来看一下. 一.checkbox选择在jQuery中,选中checkbox通 ...
JAVA之获取JavaSwing复选框JCheckBox选中的值（内容）
JAVA之获取JavaSwing复选框JCheckBox选中的值(内容) package shishi;import java.awt.BorderLayout; import java.awt.Co ...
jquery复选框组清空选中的值_jQuery获取复选框被选中数量及判断选择值的方法详解...
这篇文章主要介绍了jQuery获取复选框被选中数量及判断选择值的方法,结合实例形式分析了jQuery操作复选框进行判定与统计的相关技巧,非常具有实用价值,需要的朋友可以参考下本文实例讲述了jQuer ...
获取复选框的状态判断复选框是否选中状态
判断复选框是否选中状态推荐两种方法的使用第一种是prop('checked'); 示例代码 <input type="checkbox" id="checks& ...
html获取选中复选框的值,获取html复选框列表选中的值隐藏字段
如何获取选中的复选框id到一个隐藏的变量?获取html复选框列表选中的值隐藏字段我收到此错误. SyntaxError: unterminated string literal var test = ...
html获取选中复选框的值,jquery获取复选框被选中的值
JS获取复选框被选中的值 0 1 2 3 4 5 6 7 JS代码对checkbox的其他几个操作 1. 全选 2. 取消全选 3. 选中所有奇数 4. 反选 5. 获得选中的所有值 js代码 $( ...

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

前期要点：

步骤一

步骤二

步骤三

步骤四

成果

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

最新文章

热门文章

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

前期要​​​​点：

步骤一

步骤二

步骤三

步骤四

成果

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

最新文章

热门文章

前期要点：