使用zTree插件實現可拖拽的樹

       在目前接觸到的樹插件中，我以爲zTree比較簡單，也容易上手。有一次業務需求是將某對象分組樹上的對象能夠隨意拖拽，至關於改變了對象的分組，所以我用到了zTree，對其進行了一些列學習。


        首先下載zTree所需的相關包，附上官方下載鏈接：zTree下載，引入相關文件後就能夠進行zTree的構建了。首先在頁面上加ul標籤，而後爲樹加上id，calss爲ztree，前端頁面就完成了。


注意：下面全部的代碼是根據我本身的需求寫的，且不完整，主要參考配置流程和回調函數的使用便可。


前端頁面：

<ul id="modelTree" class="ztree"></ul>

        而後寫JavaScript，寫以前必定要多多閱讀zTree的官方API，上面已經解釋的很詳細了，只須要照着一步一步作便可。首先就是配置setting，這個是整個zTree的核心配置，我這裏除了基本配置外，由於須要拖拽功能，所以配置了edit，其中enable必定要設爲true，其餘參數看需求配置。callback中也配置相關的回調函數。

setting配置：

var setting = {
    data: {
        key:{
            name:'nodeName'
        },
        simpleData: {
            enable: true,
            idKey: 'nodeId',
            pIdKey: 'parentNodeId'
        },
        keep:{
            leaf:true,
            parent:true,
        }
    },
    edit:{
        drag:{
            isCopy: false,
            isMove: true,
            prev: true,
            next: true,
            inner: true,
            autoOpenTime: 0,
            minMoveSize: 10


        },
        enable:true,
        editNameSelectAll: true,
        removeTitle: "刪除節點",
        renameTitle: "編輯節點名稱",
        showRemoveBtn: false,
        showRenameBtn: false,
    },

    callback: {
        beforeClick: beforeClick,

        beforeDrag:beforeDrag,
        beforeDragOpen:beforeDragOpen,
        beforeDrop:beforeDrop,
        onDrag:onDr},
};

        配置完setting，將各個回調函數補充完整，根據需求來定裏面的內容，我這裏根據父節點的類型以及一些其餘一些規則對可否拖拽，拖拽可否成功進行了相應的限制。

回調函數：

//拖拽以前調用的函數
function beforeDrag(treeId,treeNode){
    if(treeNode[0].nodeType == 'GROUP'){
        return false;
    }
    if(treeNode.parentId == null && treeNode.modelType !=null){
        return true;
    }
    var  node =  treeNode[0].getParentNode();
    var modelType = treeNode[0].getParentNode().modelType;
    if(modelType == 'INTERFACE'){
        return false;
    }else {
        return true;
    }
}

//預留被拖拽的回調函數
function onDrag(event, treeId, treeNode){
    //暫時沒用到
}

//拖拽移動到展開父節點以前調用的函數
function beforeDragOpen(){
    return true;
}

//拖拽操做結束以前調用的函數
function beforeDrop(treeId, treeNode, targetNode, moveType){
    BRS.fileLoading('show');
    var result = false;
    if(targetNode == null || (moveType != "inner" && !targetNode.parentTId)){
        BRS.fileLoading('hide');
        return false;
    }
    if(targetNode.modelType != null){
        if((targetNode.modelType == 'INTERFACE' && moveType == 'inner') || targetNode.getParentNode().modelType == 'INTERFACE'){
            BRS.fileLoading('hide');
            return false;
        }
    }
    var objDetail = {
        url: '/api/model/' + treeNode[0].id,
        async:false,
    }
    jsonAjax(objDetail,function (detailData) {
        var data = {
            nodeType : detailData.nodeType,
            code : detailData.code,
            name : detailData.name,
            builtIn : detailData.builtIn,
            iconUrl : detailData.iconUrl,
            modelType : detailData.modelType.code,
            interfaceModelId : detailData.interfaceModelId,
        };
        data.id = treeNode[0].id;
        if(moveType != 'inner'){
            data.groupId = targetNode.parentId;
        }else{
            data.groupId = targetNode.id;
        }
        var obj = {
            type:"put",
            showSuccessMsg: false,
            param: {
                params:JSON.stringify(data)
            },
            async:false,
            url: '/api/model',
        }
        jsonAjax(obj,function(updateData){
            if(updateData != null){
                result = true;
      ing('hide');
    return result;
}

//預留拖拽結束的回調函數
function onDrop(event, treeId, treeNode, targetNode, moveType){
    befod('hide');
    return result;
}

//預留拖拽結束的回調函數
function onDrop(event, treeId, treeNode, targetNode, moveType){
    beforeClick(treeId, treeNode[0]);
}

        上面的設置和相關函數完成之後，就能夠調用zTree的初始化方法，經過Ajax請求回來的參數去填充咱們所須要的樹了。

// 初始化對象分組樹
  var treeObj = $("#modelTree");
  $.fn.zTree.init(treeObj, setting, data);
  zTree_Menu = $.fn.zTree.getZTreeObj("modelTree");

最後造成的樹（能夠拖拽的）：