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、一、二、3，当把1拖拽入3下方成为子节点时，一级节点的排序则为0、二、3，不是0、一、2，只有当节点变动须要一级排序时才会变动一级的序号，同理位于子节点跨节点拖拽完成后，也不改变原先子节点的顺序排列，只有当该层级再次发生拖拽排序改变才会从新计算顺序，对于结果展现和业务逻辑都不影响，旨意在于尽量少改动数据

简单来讲： 只改动拖拽后的层级顺序，不影响原来位置的层级顺序

可能会遇到的问题：
关于SpringBoot 接收List参数问题（POST请求方式）见连接