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
        });
相关推荐
朴拙数科6 分钟前
技术长期主义:用本分思维重构JavaScript逆向知识体系(一)Babel、AST、ES6+、ES5、浏览器环境、Node.js环境的关系和处理流程
javascript·重构·es6
拉不动的猪42 分钟前
vue与react的简单问答
前端·javascript·面试
污斑兔1 小时前
如何在CSS中创建从左上角到右下角的渐变边框
前端
星空寻流年1 小时前
css之定位学习
前端·css·学习
旭久2 小时前
react+antd封装一个可回车自定义option的select并且与某些内容相互禁用
前端·javascript·react.js
是纽扣也是烤奶2 小时前
关于React Redux
前端
阿丽塔~2 小时前
React 函数组件间怎么进行通信?
前端·javascript·react.js
冴羽2 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·svelte
uhakadotcom2 小时前
Langflow:打造AI应用的强大工具
前端·面试·github