layui监听复选框checkbox选中以及分页选中处理方式
作者:hexu_blog
这篇文章主要介绍了layui监听复选框checkbox选中以及分页选中处理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
layui监听复选框checkbox选中及分页选中处理
具体实现代码如下:
需要关注三个位置
- done表格加载完毕方法
- cols中复选框栏定义
- table.on中对复选框选中或取消的状态定义
这三个地方的代码直接复制去用就行了
最终选中的数据id为:ids
<script> layui.use(['table', 'form', 'upload','laydate'], function () { // 设置全局变量以保存选中行信息(仅需要id的话在你的业务位置调用ids即可,数据格式是int数组) let ids = new Array(); // 存储所有选中的数据(需要行内全量数据在你的业务位置调用lists即可,数据格式是对象集合) var lists = new Array(); // 保存当前页全部数据id,点击全选时使用 let tableIds = new Array(); //第一个实例 table.render({ elem: '#currentTableId' , method: "post" , dataType: "Json" , id: 'layuiReload' , url: '/page/severalquality/getshipPlan' //数据接口 , toolbar: '#toolbarTem' , page: true //开启分页 , done: function (res, curr, count) { // 设置当前页全部数据id到全局变量 tableIds = res.data.map(function (value) { return value.id; }); // 设置当前页选中项 $.each(res.data, function (idx, val) { if (ids.indexOf(val.id) > -1) { val["LAY_CHECKED"] = 'true'; //找到对应数据改变勾选样式,呈现出选中效果 let index = val['LAY_TABLE_INDEX']; $('tr[data-index=' + index + '] input[type="checkbox"]').click(); form.render('checkbox'); //刷新checkbox选择框渲染 } }); // 获取表格勾选状态,全选中时设置全选框选中 let checkStatus = table.checkStatus('test'); if (checkStatus.isAll) { $('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true); form.render('checkbox'); //刷新checkbox选择框渲染 } } , cols: [[ //表头 { field: 'id', title: '数据编号', sort: true, hide: true } , { field: 'id', sort: true, type: 'checkbox' }//在此声明表格复选框 , { field: 'DataNumber', align: 'center', title: '序号', width: 60, type: 'numbers' } , { field: 'shiptitle', align: 'center', title: '船名' } , { field: 'carrierstitle', align: 'center', title: '承运商' } , { field: 'startPortName', align: 'center', title: '始发港' } , { field: 'destPortName', align: 'center', title: '到港' } , { field: 'arrivalTime', align: 'center', title: '运达时间' } , { field: 'shipmentTon', align: 'center', title: '装油量' } , { field: 'realTon', align: 'center', title: '卸油量' } , { field: 'superConsumption', align: 'center', title: '是否超耗索赔', hide: true, templet: function (res) { if (res.superConsumption == true) { return "是"; } else { return "否"; } } } , { field: 'claimSum', align: 'center', title: '索赔量' } , { field: 'practicalprice', align: 'center', title: '实际索赔金额' } , { field: 'claimcompensationInfostateName', align: 'center', title: '索赔状态' } , { field: 'auditremark', align: 'center', title: '审核备注', hide: true } ]] }); //使用on监听checkbox选中状态并进行处理(tableFilter为table的lay-filter值) table.on('checkbox(tableFilter)', function (obj) { if (obj.checked == true) { if (obj.type == 'one') { ids.push(obj.data.id); lists.push(obj.data); } else { for (let i = 0; i < tableIds.length; i++) { //当全选之前选中了部分行进行判断,避免重复 if (ids.indexOf(tableIds[i]) == -1) { ids.push(tableIds[i]); var checkStatus = table.checkStatus('layuiReload'); //layuiReload 为table声明的id lists.push(checkStatus.data[i]); } } } } else { if (obj.type == 'one') { let i = ids.length; while (i--) { if (ids[i] == obj.data.id) { ids.splice(i, 1); lists.splice(i, 1); } } } else { let i = ids.length; while (i--) { if (tableIds.indexOf(ids[i]) != -1) { ids.splice(i, 1); lists.splice(i, 1); } } } } }); </script>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。