【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;
}