layui数据表格多选框改为按顺序多选，记录选择的先后顺序

最终实现的效果图，按照选择的先后顺序展示序号，取值

        最近有一个需求需要让数据表格中的选中项按照选择的先后顺序进行选择，以便操作。
        因为数据表格使用的是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数据表格的多选按照选择顺序来展示当前序号