layui 数据表格的复选按钮如果根据分页切换存储选中效果

这个是我看到的一个比较详细的,然后与我自己写的有些不同,但还给了我很大的思路。
https://www.cnblogs.com/java-hui/p/12170230.html#commentform
这里我用的多选框赋值的就是这种,(我的表格不需要分页

这里引用一下:

作者:搬块砖可以吗
博客地址:https://www.cnblogs.com/java-hui/p/12170230.html#commentform

layui.use(['layer', 'jquery', 'table'], function() {
    table.render({
        page: {
        },
        done: function (res, curr, count) {
            var len = res.data.length;
            var chooseNum = 0;   //记录当前页选中的数据行数
            for(var i = 0;i < len;i++){   //勾选行回显
                for(var key in idMap){
                    if(res.data[i].id == key){
                        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');
                         chooseNum++;
                    }
                }
            }
            if(len != 0 && chooseNum == len){   //表示该页全选  --  全选按钮样式回显
                $('input[lay-filter="layTableAllChoose"]').prop('checked',true);
                $('input[lay-filter="layTableAllChoose"]').next().addClass('layui-form-checked');
            }
        },
        cols: colArr
    });
});

注意,使用layui的数据表格组件,它会动态生成一个新的table并填充内容,并不是用你写的那行<table class="layui-hide" id="industryList" lay-filter="industrySite"></table>,layui-hide:这个是隐藏的
由于是自动填充的,所有的id和class名称都是固定的,没有可以具体识别,所以如果一个页面有两个复选框的数据表格的要注意了,

//找到对应数据改变勾选样式,呈现出选中效果
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’);

$('tr[data-index=' + index + ']这里由于有两个,也没有具体的标识,所以会影响两个。

在这里做一个补充,使用layui的时候,想要获取你选中的多选项可以通过
table.checkStatus('industryTable').data
其中industryTable是数据表格取的Id,
在这里插入图片描述
之前我的做法是在复选框监听事件
table.on('checkbox(industrySite)', function(obj){})
这里附上layui官网的说明

table.on(‘checkbox(test)’, function(obj){
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选,则为:all,如果触发的是单选,则为:one
});

步骤:
去判断是否是单选还是全选
单选:

//选中
if(obj.checked == true){
	 list=[]; //定义选择你要的数据 
	 map={}; //存储选中记录的一个集合
	 let index = list.indexOf(obj.data.XXX);
	//表示里面没有数据,添加
	if(index ==-1){
		 list.push(obj.data.XXX);
	}
	//以下省略....
	
}else{//取消选中
	let index = list.indexOf(obj.data.XXX);
	//表示里面存在数据,删除
	if(index  >-1){
		list.splice(index,1);
	}
 	//以下省略....
}

注意:
这种方法通过监听复选框的事件push添加的会出现一个问题,就是全选后,然后再次点击随便一个,会取消选中当前的复选框和全选的复选框,会导致监听事件table.on('checkbox(test)', function(obj){})
没有回调函数,意味着你拿不到任何值,后续做删除不了数组的值,然后添加的时候undefined又会判断为没有,添加进数组。本人测试过了,就这种情况有这个问题,就是全选和当前复选框一同取消选中效果才会发生,其他情况没有问题。

第二种(强烈推荐)
不管是单次点击还是点击全选,只要监听到了事件都重新直接赋值,不整那些push,splice啥的,啥事都没有问题

 //for循环获取自己想要的数据赋值
 table.checkStatus('industryTable').data //获取选中效果的所有数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值