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

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

//全部选择
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 即可
如果有不对的地方,望指出。

你可能感兴趣的:(小白白的各种练习)