ztree realize drag move and copy

1, download the official zTree: http://www.treejs.cn/v3/api.php

2, the introduction jquery.ztree.all.min.js

Note that this is based on jQuery plug-in, the introduction of the relevant js

3, set the setting

var setting = {
    data: {
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "parentId",
            rootPId: -1
        },
        key: {
            url: "nourl",
            name: "fieldName"
        }
    },
    check: {
        nocheckInherit: true
    },
    callback: {
        //Tree click event 
        onClick: zTreeOnClick,
         // drag the end of the event 
        onDrop: zTreeOnDrop 
    }, 
    // open drag 
    Edit: { 
        the Drag: { 
            // Open the copy function, after Ctrl + left-click drag 
            isCopy: to true ,
             // open mobile features, click the left mouse button drag 
            isMove: to true 
        }, 
        // open the edit 
        enable: to true ,
         // close the delete 
        showRemoveBtn: false ,
         // Close change the name 
        showRenameBtn: false 
    } 
};

 

4, after the drag function

function zTreeOnDrop (Event, treeId, treeNodes, targetNode, MoveType, isCopy) 
treeId: is the html of the above mentioned id 
treeNodes: drag the selected set of nodes, you can multi-select 
targetNode: drag target node can use this function to set all treeNodes id is targetNode [ 'the parentId' ], and then reload zTree 
MoveType: mobile type, PREV move, down next, the shift inner, feel less useful 
isCopy: whether to copy, copy true, false movement

 

5. Detailed drag function

// global variable, for storing a set of ztree 
var ztreeList;
 // global variable, for storing the maximum id, is used when copying by parameters passed convenient, preferably global variable 
var copyNodeMaxIndex;
 // drag 
function zTreeOnDrop ( Event, treeId, TreeNodes, targetNode, MoveType, isCopy is) {
     // copy 
    IF (isCopy is) {
         for ( var I = 0; I <ztreeList.length; I ++ ) {
             // iterate ztree set root node is found, get stored The maximum id, then set a global variable. Note: This is convenient to take the maximum value id, are placed in rows where 
            IF ( "0" == ztreeList [I] [ 'ID' ]) { 
                copyNodeMaxIndex = ztreeList [I] [ 'maxIndex' ];
                 var TEMP =ztreeList [I];
                 // call to the set of replicate sites ztree set, while changing the id and the parentId 
                copyNodesToArray (TreeNodes, targetNode [ 'id'], to true );
                 // global variables back in the root node id maximum storage will be stored into the database 
                TEMP [ 'maxIndex'] = copyNodeMaxIndex;
                 // root replacement 
                ztreeList.splice (I,. 1 , TEMP); 
            } 
        } 
    } the else {
         // move, set the selected set of nodes include [not] parent child node for the target node ID 
        for (I in TreeNodes) {
             for (J in ztreeList) {
                 IF(TreeNodes [I] [ 'ID'] == ztreeList [J] [ 'ID' ]) { 
                    ztreeList [J] [ 'the parentId'] = targetNode [ 'ID' ];
                     BREAK ; 
                } 
            } 
        } 
    } 
    // reload zTree 
    $ .fn.zTree.init ($ ( "# zTree" ), Setting, ztreeList); 
} 

/ * * 
 * copied node to set the global variable zTree set, while changing the id and the parentId 
 * @param nodes 
 * @param the parentId 
 * in Flag @param 
 * / 
function copyNodesToArray (nodes, the parentId, in Flag) {
     // cycle set of nodes 
    for (I in nodes) {
         var= Node Nodes [I];
         var Children = node.children; 
        copyNodeMaxIndex ++ ; 
        Node [ 'ID'] = copyNodeMaxIndex; 
        Node [ 'the parentId'] = the parentId;
         IF (In Flag) { 
            Node [ 'the fieldName'] = Node [ 'fieldName'] + "[copy]" ; 
        } 
        // here defined as a certain set of child nodes, or duplicate copies 
        node.children = undefined;
         // add nodes to the global ztree set, excluding the sub-node, just copy node itself 
        ztreeList.push (node);
         IF (2 == isOnlyChildren (Children)) {
             //2 represents a set of nodes returned outside in addition to their child nodes as well, so long it recursively to the global ztree the collection 
            copyNodesToArray (Children, Node [ 'ID'], to false ); 
        } the else  IF (. 1 == isOnlyChildren (Children)) {
             // returns a collection of nodes which represents in addition to their outer no child nodes, then the set of direct child nodes to traverse, and parentId id and provided to the global ztree the collection 
            for (J in Children) { 
                copyNodeMaxIndex ++ ; 
                Children [J] [ 'ID'] = copyNodeMaxIndex; 
                Children [J] [ 'the parentId'] Node = [ 'ID' ]; 
                ztreeList.push (Children [J]); 
            } 
        } 
        //It returns 0 node set does not exist, then there is no treatment available, the above node itself has been processed 
    } 
} 

/ * * 
 * is the set of nodes is determined how many child level nodes. It returns 0 node set does not exist, it returns a set of nodes represents no child nodes in addition to their outside, in addition to the set of nodes represents 2 returns itself but also have a child node 
 * @param Children 
 * Number @Returns {} 
 * / 
function isOnlyChildren (Children ) {
     IF ! (Children = undefined && children.length> 0 ) {
         for (I in Children) {
             var Children1 = Children [I] .children;
             IF ! (= undefined && children1.length Children1> 0 ) {
                 return 2 ; 
            } 
        } 
        return . 1
    }
    return 0;
}

 

6, the effect

 

 Mobile 1

 

 Mobile 2

 

 result

 

 

Test Copy

 

 1 copy

 

 Copy 2

 

 Copy results

 

 Copy can also get multiple levels of sub node