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
        });
相关推荐
烂蜻蜓28 分钟前
前端已死?什么是前端
开发语言·前端·javascript·vue.js·uni-app
Rowrey2 小时前
react+typescript,初始化与项目配置
javascript·react.js·typescript
谢尔登2 小时前
Vue 和 React 的异同点
前端·vue.js·react.js
祈澈菇凉6 小时前
Webpack的基本功能有哪些
前端·javascript·vue.js
小纯洁w6 小时前
Webpack 的 require.context 和 Vite 的 import.meta.glob 的详细介绍和使用
前端·webpack·node.js
想睡好7 小时前
css文本属性
前端·css
qianmoQ7 小时前
第三章:组件开发实战 - 第五节 - Tailwind CSS 响应式导航栏实现
前端·css
记得早睡~7 小时前
leetcode150-逆波兰表达式求值
javascript·算法·leetcode
zhoupenghui1687 小时前
golang时间相关函数总结
服务器·前端·golang·time
White graces7 小时前
正则表达式效验邮箱格式, 手机号格式, 密码长度
前端·spring boot·spring·正则表达式·java-ee·maven·intellij-idea