layui 表格实现全选(所有页面都选择)与全选后再次选择和取消数据的处理,并获取选择数据。

    技术2023-07-16  68

    截图都大概体现了各个数据的位置。以供像我这样的小朋友能看的懂。 我这里是对查出来的数据,进行一个增减,已达到我想要的效果。 首先定义一个变量 changList 用于储存表格渲染时的数据。 加载表格时,把数据赋值给 changeList 注意不要写成 changeList = dataList 在页面中画一个全部选择的按钮 首先当全部选择被点击的时候,写一个监听,把当前页面的复选框都改为选择状态

    //全部选择 form.on('checkbox(checkall)', function (data) { var child = $(data.elem).parents('.checkall').find('input[type="checkbox"]'); child.each(function (index, item) { item.checked = data.elem.checked; }); //自带全选框不选中 child[1].checked = false; form.render('checkbox'); })

    然后要判断我们写的选择框是否被选中,并且当点击表格自带的全选框时候不要执行数据的增减; 如条件满足,则使用 splice() 移除或添加数据 ,因为我 fdph 里面的值都是唯一的,所以我这里用这个字段来作为判断依据 checkbox

    //监听复选框 table.on('checkbox(pushInf)', function (obj) { //判断全部选择是否勾上 if ($("#checkall")[0].checked && obj.type != "all") { //如果checked为false if (!obj.checked) { for (var i = 0; i < changeList.length; i++) { //如果数据中有这个数据就移除 if (changeList[i].fdph == obj.data.fdph) { changeList.splice(i, 1); } } } //如果checked为true if (obj.checked) { //如果没有这个数据就加进去 changeList.splice(changeList.length, 0, obj.data); } } });

    最后就是操作其他页面的复选框。这里我们用到了表格的 done 参数 当点击页码的时候,用当前页面的数据去与 changList 里面的数据做比较,如果两者都要这个数据,则然后复选框变为选中状态。

    , done: function (res, curr, count) { //获取全部选择状态 var flag = $("#checkall")[0].checked; //如果为选中状态 if (flag) { //遍历当前页面数据 for (var i = 0; i < res.data.length; i++) { //遍历全部选择时的数据 for (var j = 0; j < changeList.length; j++) { //如果全部选择的数据包含当前页面的数据,则复选框为选中状态 if (res.data[i].fdph == changeList[j].fdph) { res.data[i]["LAY_CHECKED"] = 'true'; var index = res.data[i]['LAY_TABLE_INDEX']; $('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true); $('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked'); } } } } }

    如果要把数据传到后台,直接传 changeList 即可 如果有不对的地方,望指出。

    Processed: 0.010, SQL: 9