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
        });
相关推荐
前端_学习之路21 分钟前
React--Fiber 架构
前端·react.js·架构
coderlin_23 分钟前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说38 分钟前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空1 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
柚子8161 小时前
scroll-marker轮播组件不再难
前端·css