Implementing draggable trees using zTree plug-ins

Keywords: Javascript JSON

Among the tree plug-ins currently in contact with, I think zTree is relatively simple and easy to use. There was a business requirement that objects in a grouping tree could be dragged and dragged at will, which was equivalent to changing the grouping of objects. So I used zTree and learned some columns about it.


First, download the relevant packages required by zTree and attach the official download connection: zTree Download After introducing relevant files, we can build zTree. First put ul tag on the page, then add id to the tree, calss is ztree, and the front page is finished.


Note: The following code is written according to my own needs, and incomplete, mainly refer to the configuration process and the use of callback functions.


Front-end page:

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


Then write JavaScript and read zTree more before you write it. Official API The above explanation is very detailed, just follow one step at a time. The first is to configure setting s, which is the core configuration of the whole zTree. I configure edit here because drag-and-drop function is needed, in which enable must be set to true, and other parameters depend on the requirement configuration. Relevant callback functions are also configured in the callback.

setting configuration:

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: "Delete node",
        renameTitle: "Edit node name",
        showRemoveBtn: false,
        showRenameBtn: false,
    },

    callback: {
        beforeClick: beforeClick,

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


After configuring the setting s, the callback functions are complemented and the contents are determined according to the requirements. I have made corresponding restrictions on whether drag and drag can be successful according to the type of parent node and some other rules.

Callback function:

//Functions called before dragging
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;
    }
}

//Reserve dragged callback function
function onDrag(event, treeId, treeNode){
    //Not for the time being.
}

//Drag and drop to the function called before the parent node is expanded
function beforeDragOpen(){
    return true;
}

//Functions called before the end of the drag operation
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;
}

//Callback function reserved for drag-and-drop end
function onDrop(event, treeId, treeNode, targetNode, moveType){
    befod('hide');
    return result;
}

//Callback function reserved for drag-and-drop end
function onDrop(event, treeId, treeNode, targetNode, moveType){
    beforeClick(treeId, treeNode[0]);
}


After the above settings and related functions are completed, we can call the initialization method of zTree to fill the tree we need with the parameters returned from the Ajax request.

// Initialization object grouping tree
  var treeObj = $("#modelTree");
  $.fn.zTree.init(treeObj, setting, data);
  zTree_Menu = $.fn.zTree.getZTreeObj("modelTree");


The final tree (which can be dragged):

Posted by chrima on Wed, 22 May 2019 14:36:48 -0700