zTree通用拖拽排序,实时保存数据库,批量更新部分节点

rockychen

最近有遇到需要对部门进行排序,使用的ztree插件,遂有了这么一篇,
表结构就很正常那种树形结构,包含如下3个关键字段即可,数据是拖拽完排序后最终表里存放的数据形式

ID PID ORDER
10 0
20 1
30 2
40 10 0
50 10 1
60 10 2

首先我们初始化ztree时需要设置可编辑状态,然后初始化

    var _setting = {
        check: {
            enable: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        // 开启拖拽
        edit: {
            drag: {
                // 打开复制功能,Ctrl+鼠标左键点击后拖拽
                isCopy: false,
                // 打开移动功能,鼠标左键点击后拖拽
                isMove: true
            },
            // 打开编辑
            enable: true,
            // 关闭删除
            showRemoveBtn: false,
            // 关闭修改名称
            showRenameBtn: false
        },
        callback: {
            //节点点击事件
            onClick: _treeDepOnClick,
            //拖拽结束事件
            onDrop: _zTreeOnDrop
        }
    };
    jQuery.fn.zTree.init(jQuery("#tree"), _setting, _zNodes)

拖拽的核心是思考节点的关系,比如同级排序变更节点范围,跨级拖拽影响节点等,原则上尽可能使其操作改动范围小

  • 当同级别排序和跨节点拖拽时,通过判断拖拽节点的父节点,获取其所有子节点的下标位置
  • 当子节点拖拽到根节点时,只取节点层级level为0的树节点,通过其对应的getIndex获取所处位置

具体实现如下

/**
     *
     * @param event 标准的 js event 对象
     * @param treeId 目标节点 targetNode 所在 zTree 的 treeId,便于用户操控
     * @param treeNodes 被拖拽的节点 JSON 数据集合<br>
     *      如果拖拽操作为 移动,treeNodes 是当前被拖拽节点的数据集合。<br>
     *      如果拖拽操作为 复制,treeNodes 是复制后 clone 得到的新节点数据。<br>
     * @param targetNode 成为 treeNodes 拖拽结束的目标节点 JSON 数据对象。如果拖拽成为根节点,则 targetNode = null
     * @param moveType 指定移动到目标节点的相对位置."inner":成为子节点,"prev":成为同级前一个节点,"next":成为同级后一个节点.如果 moveType = null,表明拖拽无效
     */
    var _zTreeOnDrop = function (event, treeId, treeNodes, targetNode, moveType) {

        if (!moveType) {
            return false;
        }

        var zTree = $.fn.zTree.getZTreeObj(treeId);
        var paramData = [];
        var nodeData = [];

        //子节点拖拽到跟节点 和 根节点的相互排序
        if (targetNode == null || treeNodes[0].level == 0) {
            nodeData = zTree.getNodesByParam("level", 0);
        } else {
            // 拖拽自己成为子节点
            var node = zTree.getNodeByTId(treeNodes[0].parentTId);
            if (node.isParent) {
                nodeData = zTree.transformToArray(node.children);
            }
        }

        $.each(nodeData, function (i, item) {
            var dept = {};
            dept["id"] = item.id;
            dept["pid"] = item.pId;//根目录则为null
            dept["order"] = item.getIndex();//核心:当前节点同级的下标位
            paramData.push(dept);
        });
        //得到这次操作需要变更的数据范围
        console.log(JSON.stringify(paramData));
        //请求后台批量处理即可...
    };

需要注意的是: 假如当跟节点现在的顺序是0、1、2、3,当把1拖拽入3下方成为子节点时,一级节点的排序则为0、2、3,不是0、1、2,只有当节点变更需要一级排序时才会变更一级的序号,同理位于子节点跨节点拖拽完成后,也不改变原先子节点的顺序排列,只有当该层级再次发生拖拽排序改变才会重新计算顺序,对于结果展示和业务逻辑都不影响,旨意在于尽可能少改动数据

简单来说: 只改动拖拽后的层级顺序,不影响原来位置的层级顺序

可能会遇到的问题:
关于SpringBoot 接收List参数问题(POST请求方式)见链接

阅读 1.6k
0 声望
1 粉丝
0 条评论
0 声望
1 粉丝
文章目录
宣传栏