ztree實現拖拽移動和復制

本文轉載自查看原文 2019-09-12 23:14 1060 zTree

1、官網下載ztree：http://www.treejs.cn/v3/api.php

2、引入jquery.ztree.all.min.js

注意，這是基於jQuery的插件，請引入相關js

3、設置setting

var setting = {
    data: {
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "parentId",
            rootPId: -1
        },
        key: {
            url: "nourl",
            name: "fieldName"
        }
    },
    check: {
        nocheckInherit: true
    },
    callback: {
        // 樹的點擊事件
        onClick: zTreeOnClick,
        // 拖拽結束事件
        onDrop: zTreeOnDrop
    },
    // 開啟拖拽
    edit: {
        drag: {
            // 打開復制功能，Ctrl+鼠標左鍵點擊后拖拽
            isCopy: true,
            // 打開移動功能，鼠標左鍵點擊后拖拽
            isMove: true
        },
        // 打開編輯
        enable: true,
        // 關閉刪除
        showRemoveBtn: false,
        // 關閉修改名稱
        showRenameBtn: false
    }
};

4、拖拽后函數

function zTreeOnDrop (event, treeId, treeNodes, targetNode, moveType, isCopy)
treeId：就是html的id
treeNodes：拖拽所選中的節點集合，可以多選
targetNode：拖拽目標節點，可以通過這個函數，設置treeNodes的所有id為targetNode['parentId']，然后重新加載ztree
moveType：移動類型，上移prev，下移next，內移inner，感覺用處不大
isCopy：是否復制，復制true，移動false

5、詳解拖拽函數

// 全局變量，用於儲存ztree集合
var ztreeList;
// 全局變量，用於儲存最大id，是復制時使用，通過傳參數不方便，用全局變量最好
var copyNodeMaxIndex;
//拖拽
function zTreeOnDrop (event, treeId, treeNodes, targetNode, moveType, isCopy){
    // 復制
    if(isCopy) {
        for(var i = 0; i < ztreeList.length; i++) {
            // 遍歷ztree集合，找到根節點，拿到儲存最大id，然后設置全局變量。說明：這里只是方便拿最大值id，放到那里都行
            if("0" == ztreeList[i]['id']) {
                copyNodeMaxIndex = ztreeList[i]['maxIndex'];
                var temp = ztreeList[i];
                // 調用復制節點集合到ztree集合，同時改變id和parentId
                copyNodesToArray(treeNodes, targetNode['id'], true);
                // 全局變量最大id放回根節點儲存，將儲存到數據庫
                temp['maxIndex'] = copyNodeMaxIndex;
                // 根節點替換
                ztreeList.splice(i, 1, temp);
            }
        }
    } else {
        // 移動，設置選中的節點集合【不包括子節點】的父節點為目標節點id
        for(i in treeNodes) {
            for(j in ztreeList) {
                if(treeNodes[i]['id'] == ztreeList[j]['id']) {
                    ztreeList[j]['parentId'] = targetNode['id'];
                    break;
                }
            }
        }
    }
    // 重新加載ztree
    $.fn.zTree.init($("#ztree"), setting, ztreeList);
}

/**
 * 復制節點集合到全局變量ztree集合，同時改變id和parentId
 * @param nodes
 * @param parentId
 * @param flag
 */
function copyNodesToArray(nodes, parentId, flag) {
    // 循環節點集合
    for(i in nodes) {
        var node = nodes[i];
        var children = node.children;
        copyNodeMaxIndex++;
        node['id'] = copyNodeMaxIndex;
        node['parentId'] = parentId;
        if(flag) {
            node['fieldName'] = node['fieldName'] + "[副本]";
        }
        // 這里一定設置子節點為未定義，不然會復制雙份
        node.children = undefined;
        // 添加節點到全局ztree集合，不包括子節點，只是復制節點本身
        ztreeList.push(node);
        if(2 == isOnlyChildren(children)) {
            // 返回2表示節點集合除了本身外還有子節點，那么久讓它遞歸添加到全局ztree集合里
            copyNodesToArray(children, node['id'], false);
        } else if(1 == isOnlyChildren(children)) {
            // 返回1表示這節點集合除了本身外沒有子節點，那么直接遍歷子節點集合，設置id和parentId並添加到全局ztree集合里
            for(j in children) {
                copyNodeMaxIndex++;
                children[j]['id'] = copyNodeMaxIndex;
                children[j]['parentId'] = node['id'];
                ztreeList.push(children[j]);
            }
        }
        //返回0表示這節點集合不存在，那么就沒有可處理了，上面已經處理了節點本身
    }
}

/**
 * 判斷節點集合是有多少級子節點。返回0表示這節點集合不存在，返回1表示這節點集合除了本身外沒有子節點，返回2表示節點集合除了本身外還有子節點
 * @param children
 * @returns {number}
 */
function isOnlyChildren(children) {
    if(undefined != children && children.length > 0) {
        for(i in children) {
            var children1 = children[i].children;
            if(undefined != children1 && children1.length > 0) {
                return 2;
            }
        }
        return 1
    }
    return 0;
}