layui中table表格下checkbox保存状态赋值checkbox与禁止使用表头多选

最新推荐文章于 2024-09-18 17:14:39 发布

原创最新推荐文章于 2024-09-18 17:14:39 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#layui中table表格下checkbox保存状态赋值ch

闲聊专栏收录该内容

168 篇文章

订阅专栏

本文介绍了一种在表格中保存选中项的状态，并在重新加载数据时恢复这些状态的方法。通过使用Set集合来记录选中项的唯一标识，实现了选中状态的持久化。当数据重新加载时，会检查每个项的标识是否存在于Set集合中，从而决定是否恢复其选中状态。

保存状态赋值

var checkedSet = new Set();

table.on('checkbox(dataguid1Table)', function(obj){
                      console.log(obj.checked); //当前是否选中状态
                      console.log(obj.data); //选中行的相关数据
                      console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
     //选中时加入set 否则移除
                          if(obj.checked){
                              checkedSet.add(obj.data.uuid);
                          }else{
                              checkedSet.delete(obj.data.uuid)
                          }
                      console.log(checkedSet);
                    });

parseData: function(res){ //res 即为原始返回的数据
                            for(var i in res.rows){
                                if(checkedSet.has(res.rows[i].uuid)){
                                    //如果set集合中有的话，给rows添加check属性选中
                                    res.rows[i]["LAY_CHECKED"] = true;
                                }
                            }
                            return {
                                "code": res.status, //解析接口状态
                                "count": res.total, //解析数据长度
                                "data": res.rows //解析数据列表
                              };    
                            }

禁止使用表头多选