【jquery】【ztree】節點添加自定義按鈕、編輯和刪除事件改成自己定義事件

 

setting添加

    edit: {
        drag: {
            isCopy: false,
            isMove: true
        },
        enable: true,//設置是否處於編輯狀態
        showRemoveBtn: showRemoveAndRenameBtn,
        showRenameBtn: showRemoveAndRenameBtn,
        removeTitle: "刪除",
        renameTitle: "修改"
    },
    view: {
        dblClickExpand: false,
        showLine: false,
        addHoverDom: addHoverDom,   // 用於當鼠標移動到節點上時，顯示用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕
        removeHoverDom: removeHoverDom, // 用於當鼠標移出節點時，隱藏用戶自定義控件，顯示隱藏狀態同 zTree 內部的編輯、刪除按鈕
        selectedMulti: false
    },
    callback: {
        onClick: archiveTypeTreeClick,
        beforeRemove: deleteNodeBefore,    //節點被刪除之前的事件,並且根據返回值確定是否允許刪除操作
        beforeEditName: zTreeBeforeEditName     //節點被編輯之前的事件,並且根據返回值確定是否允許編輯操作
    }

 

顯示編輯和刪除過濾，也可以分開來

function showRemoveAndRenameBtn(treeId, treeNode) {
    if (treeNode不現實編輯和刪除條件) {
        // 不顯示編輯和刪除按鈕
        return false;
    } else {
        return true;
    }
}

 

圖示

顯示編輯和刪除時

 

 不顯示編輯和刪除時

 

 

鼠標移動在節點上添加【添加事件按鈕】

function addHoverDom(treeId, treeNode) {
    //設置只有父節點可以新增 其它只能編輯
    if (treeNode需要添加事件的條件) {
        treeId = $("#" + treeNode.tId + "_span");
        treeNode.editNameFlag || 0 < $("#addBtn_" + treeNode.tId).length || (treeId.after("<span class='button add' id='addBtn_" + treeNode.tId + "' title='新增' ></span>"), (treeNode = $("#addBtn_" + treeNode.tId)) && treeNode.bind("click", function () {
            這里是點擊添加事件調用();
            return true;
        }))
    }
}

 

圖示

顯示添加按鈕

 

 

鼠標移走后刪除添加的事件

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

 

圖示

移走刪除添加按鈕

 

 

刪除節點事件修改成觸發自定義事件，返回false是阻止刪除節點事件

參考官網：http://www.treejs.cn/v3/api.php 方法setting.callback.beforeEditName

function deleteNodeBefore(treeId, treeNode) {
    if (不顯示刪除事件的條件) {
        // 不做處理
        return false;
    }
    這里是自定義事件();
    return false;
}

 

編輯節點事件修改成觸發自定義事件，返回false是不觸發原來ztree編輯節點名稱事件

參考官網：http://www.treejs.cn/v3/api.php 方法setting.callback.beforeRemove

function zTreeBeforeEditName(treeId, treeNode) {
    if (不顯示編輯事件的條件) {
        // 不做處理
        return false;
    }
    這里是自定義事件();
    return false;
}