layui实现表格跨越选择

网上很多方式实现的跨越选择都无法使用,自己摸索发现一个好用的方式 修改两处代码,可以实现换页后,之前选择的内容仍然保留,从而实现跨越选择

如有问题,私信修改,代码目前也在实际运行,有问题会第一时间同步优化bug

javascript 复制代码
table.render({
     elem: '#receiptsdetailTable',
      url: '/',
      page: true,
      page: {
          limit: 15,
          limits: [10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 300, 500],
      },
      toolbar: toolbar,
      cols: [[
          {type: 'checkbox', fixed: 'left'},
          {field: 'Id', width: 80,title: 'ID'},
          {field: 'FundType', title: '金额类型',width: 90,templet: function(d){
                  return dataMap['receipts_type']?.find(item => item.Ckey === d.FundType)?.Cvalue || '';
           }},
          {field: 'FundNumber', title: '金额数量'},
          
          {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 80}
      ]],
      defaultToolbar: [
          'filter', 'exports', 'print',
          {
              title: '刷新',
              name: 'refresh',
              layEvent: 'LAYTABLE_REFRESH',
              icon: 'layui-icon-refresh-3',
              onClick: function (obj) {
                  table.reload('receiptsdetailTable', {
                      page: {
                          curr: 1
                      },
                      where: {
                          page: '1',
                      }
                  });
              }
          }
      ],
      done: function(res, curr, count, origin){
          console.log(res); // 得到当前渲染的数据
          console.log(curr);  // 得到当前页码
          console.log(count); // 得到数据总量
          console.log(origin); // 回调函数所执行的来源 --- 2.8.7+

          // Get all data on the current page
          var curentdata = table.getData('receiptsdetailTable');

          // Array to store indices of rows that should be selected
          var indicesToSelect = [];

          // Iterate over current page data
          curentdata.forEach(function(item, index) {
              // If the item's ID is in the global selectedIDs array
              if (selectedIDs.includes(item.Id)) {
                  // Add the index to the indicesToSelect array
                  indicesToSelect.push(index);
              }
          });

          // Use setRowChecked to select the rows with the indices in indicesToSelect
          table.setRowChecked('receiptsdetailTable', {
              index: indicesToSelect
          });
          
      },
  });
 table.on('checkbox(receiptsdetailTable)', function (obj) {
            // console.log(obj)
            // var data = obj.data; // 当前操作的数据
            // console.log("check")
            // console.log(data)
            // console.log(table.checkStatus('receiptsdetailTable'));
            var currentCheck = table.checkStatus('receiptsdetailTable');
            var currentOperate = obj.data;
            var curentdata = table.getData('receiptsdetailTable');
            var thisCache = table.cache['test'] || {};
            console.log("当前选中的内容")
            console.log(currentCheck)
            console.log("当前操作的内容")
            console.log(currentOperate)
            console.log("当前页面的内容")
            console.log(curentdata)
            console.log("当前页面的临时数据")
            console.log(thisCache)
            
            if(obj.checked){
                //如果是选中
                console.log("选择")
                if(obj.type=='all'){
                    //如果全选
                    console.log("全选")
                    //
                    curentdata.forEach(function(item) {
                        if (selectedIDs.indexOf(item.Id) === -1) {
                            selectedIDs.push(item.Id);
                        }
                    });
                }else {
                    console.log("不全选")
                    if (selectedIDs.indexOf(currentOperate.Id) === -1) {
                        selectedIDs.push(currentOperate.Id);
                    }
                }
            }
            else {
                console.log("取消选择")
                if(obj.type=='all'){
                    //如果全选
                    console.log("全选")
                    curentdata.forEach(function(item) {
                        var index = selectedIDs.indexOf(item.Id);
                        if (index !== -1) {
                            selectedIDs.splice(index, 1);
                        }
                    });
                }else {
                    console.log("不全选")
                    var index = selectedIDs.indexOf(currentOperate.Id);
                    if (index !== -1) {
                        selectedIDs.splice(index, 1);
                    }
                }
            }

            console.log('Selected IDs:', selectedIDs); // Debugging
        });
相关推荐
爱勇宝1 小时前
第 1 章:别把“需求文档”当成真正的需求
前端·后端·程序员
梨子同志2 小时前
常用命令
前端
梨子同志2 小时前
React 状态管理
前端
Dxy12393102163 小时前
MySQL索引完整教程:创建、查看、修改、删除与日常管理
前端·javascript·mysql
剪刀石头布啊3 小时前
js能被遍历的集合有哪些特征,为何能被遍历
前端
剪刀石头布啊3 小时前
js解构
前端
剪刀石头布啊3 小时前
防抖功能的逐步递进
前端
剪刀石头布啊3 小时前
对象的大小比较与面向对象思考
前端
端庄的战斗机4 小时前
javascript 设计模式(文章很长,请自备瓜子,水果和眼药水)
开发语言·javascript·设计模式
最爱老式锅包肉5 小时前
《HarmonyOS技术精讲-ArkWeb》桥接两岸:JSBridge原生与Web互调
前端·华为·harmonyos