layui数据表格的多选按照选择顺序来展示当前序号

栏目：前端作者：xiaofan 时间：2024-10-29 16:37:07

最近有一个需求用户需要让数据表格中的选中项按照选择的先后顺序进行选择，以便操作。因为数据表格使用的是layui的，就去网上取查阅看看有没有相关的案例，但找了一圈下来发现没有就准备自己动手写实现以下。因为时间仓促，毕竟今天过后就放假了。先做一个第一版草草了事节后具体再优进行优化

一下就是具体的实现方式

大概思路就是选择的时候将数据存入到一个数组中，数组下标可以是默认的选择时向数组内追加下元素将下标的数字拿出来直接去替换掉layui表格默认多选框的图标内容。取消选择的话考虑到数组下标是会变得就可以根据指定内容比来删除这样效果就出来了

// 用于存储选中的数据及顺序var selectedData = [];layui.use(['table'], function () {
    var table = layui.table;
    // 监听复选框事件
    table.on('checkbox(table1_LayFilter)', function (obj) {
        let data = obj.data;
        console.log("选中")
        let list = table.checkStatus('table1').data;
        // 获取选中的行数据
        if (obj.type == 'all') {
            if (obj.checked) {
                for (let key in list) {
                    let data = list[key];
                    selectedData.push(data.url);
                }
            } else {
                //取消选中
                selectedData = [];
            }
        } else {
            let data_index = $(obj.tr).data('index');
            // let list = table.checkStatus('table1');
            if (obj.checked) {
                //选中
                selectedData.push(data.url);
                let sx = selectedData.length
                $('tr[data-index=' + data_index + '] .layui-form-checked .layui-icon').removeClass('layui-icon-ok').html(sx);
            } else {
                //取消选中的重新排序还没有写，以后优化了在发帖吧，先注释了
                // for (let key in list) {
                //     let dataIndex = list[key].data('index');
                //     console.log('key:' + key + '==' + 'di' + data_index)
                //     if (data_index <= dataIndex) {
                //         $('tr[data-index=' + dataIndex + '] .layui-form-checked .layui-icon').removeClass('layui-icon-ok').html(sx);
                //     }
                // }
                //取消选中
                let index = selectedData.indexOf(data.url);
                if (index !== -1) {
                    selectedData.splice(index, 1);
                    let sx = selectedData.length;
                    $('tr[data-index=' + data_index + '] .layui-form-checked .layui-icon').removeClass('layui-icon-ok').html(sx);
                }
            }
        }
    });});

layui数据表格的多选按照选择顺序来展示当前序号

分类栏目