JS实现表格数据上移下移

一、背景

根据客户的使用感受来提出的需求，存在数据量大的列表中需要添加此功能。方便用户对数据权重的进行划分，方便用户查找数据。我将从以下几个方面介绍如何完成这个需求。

二、代码

代码给出重要部分的，下面会有相关的代码注解，如果有什么疑问，欢迎提问。如果有什么更好的解决方式，那就更好了。欢迎各位大佬指教。

        // 定义一个函数，用来比较两个对象是否相等
        isEqual: function (obj1, obj2) {
            return JSON.stringify(Object.entries(obj1).sort()) === JSON.stringify(Object.entries(obj2).sort());
       },
      // 定义一个函数，用来在数组中查找对象的索引
        findIndex: function (arr, obj) {
            return arr.findIndex(item => ArgsObj.isEqual(item, obj));
        },
        moveUp: function (oldList, newList, attr, id) {//oldList是指所有数据，newList是指选中的数据，attr是属性，id这里没有用到可以省略
            var arr = [];
            var index = 0;
            var argsArrIndex = [];//这个存放的是移动后，选中的数据的下表
            newList = oldList.filter(item => newList.some(newItem => item[attr] === newItem[attr]));
            var indexes = newList.map(item => ArgsObj.findIndex(oldList, item));
            //超出边界
            if (indexes.some(value => (value == 0)) && ArgsObj.isContinuousArray(indexes)) {
                return;
            }
            if (indexes.some(value => value > 0)) {
                oldList.forEach(item => { item.LAY_CHECKED = false; });
                    //多条数据进行上移
                    indexes.forEach(index => {
                        if (index > 0) {
                            var temp = oldList[index];
                            oldList[index] = oldList[index - 1];
                            oldList[index - 1] = temp;
                            if (attr == 'Name') {
                                oldList[index - 1].LAY_CHECKED = true;
                            } else {
                                argsArrIndex.push((index - 1));
                            }
                        }
                        else {
                            if (index == 0) {
                                argsArrIndex.push((index));
                            }
                            oldList[index].LAY_CHECKED = true;
                        }
                    });
              }
            if (attr == 'Name') {//数据源排序
                table.reload(id, {
                    data: oldList
                });
            }
            else {//参数排序
                var getTpl = $("#dataInfo").html();
                laytpl(getTpl).render($.extend([], oldList), function (html) {
                    $(".dataInfo").html(html);

                    form.render();//注意：这里一定要先渲染，再进行选中渲染
                    argsArrIndex.forEach((val) => {
                        $(".choose" + val).find('div').addClass('layui-form-checked');
                    })
                });
            }
        },
        moveDown: function (oldList, newList, attr, id) {
            var argsArrIndex = [];
            var list = [];
            list = oldList;
            newList = oldList.filter(item => newList.some(newItem => item[attr] === newItem[attr]));
            var indexes = newList.map(item => ArgsObj.findIndex(oldList, item));

            if (indexes.some(value => value > -1)) {
                //超出边界
                if (indexes.some(value => (value == oldList.length - 1)) && ArgsObj.isContinuousArray(indexes)) {
                    return;
                }
                oldList.forEach(item => { item.LAY_CHECKED = false; });
                //多条数据进行下移
                indexes.reverse().forEach(index => {
                    if (index >-1 && index < oldList.length -1) {
                        var temp = oldList[index];
                        oldList[index] = oldList[index+1];
                        oldList[index+1] = temp;

                        let checked = oldList[index].LAY_CHECKED;
                        oldList[index].LAY_CHECKED = oldList[index+1].LAY_CHECKED;
                        oldList[index+1].LAY_CHECKED = checked;
                        if (attr == 'Name') {
                            oldList[index + 1].LAY_CHECKED = true;
                        }
                        else {
                            argsArrIndex.push((index + 1));
                        }
                    }
                    else {
                        if (index == oldList.length-1) {
                            argsArrIndex.push((index));
                        }
                        oldList[index].LAY_CHECKED = true;
                    }
                });
            } 
           
            if (attr == 'Name') {//数据源排序
                table.reload(id, {
                    data: oldList
                });
            } else {//参数排序
                var getTpl = $("#dataInfo").html();
                laytpl(getTpl).render($.extend([], list), function (html) {
                    $(".dataInfo").html(html);
                    form.render();
                    argsArrIndex.forEach((val) => {
                        $(".choose" + val).find('div').addClass('layui-form-checked');
                    })
                });
            }
        },
         // 使用 JS 判断数组是否是个连续的数组
       isContinuousArray:function (arr) {
        // 对数组进行升序排序
        arr.sort((a, b) => a - b);
        // 遍历数组
        for (let i = 0; i < arr.length - 1; i++) {
            if (arr[i + 1] - arr[i] !== 1) {
                return false;
            }
        }
        return true;
    },

由于我的功能有两处需要这个操作，考虑到代码的简洁性和复用性以及可扩展性，把代码封装成若干个函数，方便调用。

三、效果图

以下只展示了下移操作。