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

最近有遇到需要对部门进行排序，使用的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请求方式）见链接

本文地址：https://blog.csdn.net/qq_27331631/article/details/107417873