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請求方式）見連接