Add ztree node custom buttons, edit and delete events into their own custom events

 

Add setting

    Edit: { 
        Drag: { 
            isCopy is: to false , 
            isMove: to true 
        }, 
        enable: to true , // set is in edit mode 
        showRemoveBtn: showRemoveAndRenameBtn, 
        showRenameBtn: showRemoveAndRenameBtn, 
        removeTitle: "Delete" , 
        renameTitle: "Modify" 
    }, 
    View: { 
        dblClickExpand: false , 
        Showline: false , 
        addHoverDom: addHoverDom,    // for when the mouse is moved to the node is displayed when the user custom control, display hidden inside zTree editor with the delete button
        removeHoverDom: removeHoverDom, // when a node when the mouse is removed, hidden custom control, show hidden inside the same zTree edit, and delete button 
        selectedMulti: to false 
    }, 
    the callback: { 
        the onClick: archiveTypeTreeClick, 
        beforeRemove: deleteNodeBefore,     // node is removed prior to the event, and in accordance with the return value to determine whether to allow deletion 
        beforeEditName: zTreeBeforeEditName      // event before being edited node, and determine whether to allow the return value in accordance with an editing operation 
    }

 

The Edit and delete filters, can also be separated

function showRemoveAndRenameBtn (treeId, the treeNode) {
     IF (edit, and delete the treeNode unrealistic condition) {
         // do not display the Edit and Delete buttons 
        return  to false ; 
    } the else {
         return  to true ; 
    } 
}

 

Icon

When the edit and delete

 

 Editing and deleting is not displayed when

 

 

Move the mouse on the node [Add] button to add events

function addHoverDom (treeId, treeNode) {
     // set only parent node can add other can only edit 
    IF (condition treeNode need to add an event) { 
        treeId = $ ( "#" + treeNode.tId + "_span" ); 
        treeNode. editNameFlag || 0 <$ ( "# addBtn_" + treeNode.tId) .length || (treeId.after ( "<span class = 'the Add Button' ID = 'addBtn_" + treeNode.tId + "' title = 'new increase '> </ span> "), (treeNode = $ (" # addBtn_ "+ treeNode.tId)) && treeNode.bind (" the click ", function () { 
            here is click Add event calls (); 
            return  to true ; 
        })) 
    } 
}

 

Icon

The Add button

 

 

Delete added after removal of the mouse event

function removeHoverDom(treeId, treeNode) {
    $("#addBtn_" + treeNode.tId).unbind().remove();
}

 

Icon

Delete to remove the Add button

 

 

Modified to delete nodes event trigger custom events, and false events is to prevent the deletion of nodes

Reference official website: http://www.treejs.cn/v3/api.php  method setting.callback.beforeEditName

function deleteNodeBefore (treeId, the treeNode) {
     IF (condition deletion events not shown) {
         // do the processing 
        return  to false ; 
    } 
    This is the custom event (); 
    return  to false ; 
}

 

Edit node event modified to trigger custom events, it returns false trigger is not the original name of the event node editing ztree

Reference official website: http://www.treejs.cn/v3/api.php  method setting.callback. BeforeRemove

function zTreeBeforeEditName (treeId, the treeNode) {
     IF (condition editing event is not displayed) {
         // do the processing 
        return  to false ; 
    } 
    This is the custom event (); 
    return  to false ; 
}