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
        });
相关推荐
全宝11 分钟前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele35 分钟前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮41 分钟前
【无标题】
开发语言·前端·javascript
fie88891 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式
谦行1 小时前
深度神经网络训练过程与常见概念
前端
Simon_He1 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊2 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录2 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲2 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃3 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端