关于layui初始化table数据行选中的问题

灰太狼 2023-02-18 09:48 10阅读 0赞

**业务分析：**  
        有一个这样的业务需求，就是当layui table中某页的数据被用户选中完以后，用户切换到下一页浏览，然后再返回到该页面的时候，之前选中的数据应该保持选中的状态。

**全局变量ck\_Ids：**

var ck_Ids=[];//存储的表格数据编号

**done回调函数代码示例：**

done: function (res, curr, count) {
      //如果是异步请求数据方式，res即为你接口返回的信息。
      $.each(res.data, function (index, row) {
           var result = ck_Ids.some(function (item) {//判断编号是否存在
               if (item == row['Id']) {
                   return true;
               } else {
                return false;
               }
            });
           if (result) {
            //这里才是真正实现的有效勾选
            row["LAY_CHECKED"] = 'true';
           //找到对应数据改变勾选样式，呈现出选中效果
            var _index = row['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');
            }
      });
    
      //设置全选checkbox的选中状态，只有改变LAY_CHECKED的值， table.checkStatus才能抓取到选中的状态
      var checkStatus = table.checkStatus('test');
      if (checkStatus.isAll) {
        //设置表头的checkbox勾选样式
        $('.layui-table-header th[data-field="Id"] input[type="checkbox"]').prop('checked', true);
        $('.layui-table-header th[data-field="Id"] input[type="checkbox"]').next().addClass('layui-form-checked');
       }
    }

至此，业务需求完美解决！欢迎评论点赞。

不为模糊不清的未来担忧，只为清清楚楚的现在努力。