ztree高级功能之编辑节点、删除节点

时间:2024-05-19 08:09:50

功能展示:

ztree高级功能之编辑节点、删除节点

编辑节点:

1.最基本的编辑

功能介绍:点击编辑按钮进入编辑,回车确定编辑结果。

实现代码:

var setting = {
edit: {
enable: true,
        editNameSelectAll: true,


},

只需要在setting里添加如上代码就可以编辑当前名称。


2.不允许重名、空白名称

功能介绍:不允许编辑后名称与已有名称重复和空白命名,若出现此类编辑行为则编辑无效。

实现代码:

var setting = {
    callback: {
//设置在编辑前调用函数bfRename,执行返回true时自动触发编辑函数onRename
        beforeRename: bfRename,
     onRename: onRename,
    }
}

//回调函数bfRename
function bfRename(treeId, treeNode, newName, isCancel) {
if (newName.length == 0) {
setTimeout(function () {
var zTree = $.fn.zTree.getZTreeObj("first");
zTree.cancelEditName();
alert("节点名称不能为空.");
}, 200);
return false;
}

for (var n in zNodes) {
if (zNodes[n].Name == newName) {
if (zNodes[n].id == treeNode.id) return;
setTimeout(function () {
var zTree = $.fn.zTree.getZTreeObj("first");
zTree.cancelEditName();
alert("编目名称已存在!");
}, 200)
return false;
}
}
return true;
};



function onRename(e, treeId, treeNode, isCancel) {
if (isCancel) return;
}




3.允许不同级重名,不允许同级重名

功能介绍:允许在不同级目录下出现重名,不允许同级目录下重名的编辑操作。

实现代码:

function bfRename(treeId, treeNode, newName, isCancel) {
//新名称为空时提示名称不能为空
if (newName.length == 0) {
setTimeout(function () {
var zTree = $.fn.zTree.getZTreeObj("first");
zTree.cancelEditName();
alert("节点名称不能为空.");
}, 200);
return false;
}
var Cnodes = getPeerNodes(treeNode);

//获取当前节点的同级兄弟节点,不包含本节点
function getPeerNodes(targetNode) {
if (targetNode == null) {
return null;
} else {
if (targetNode.getParentNode() != null) {
return targetNode.getParentNode().children;
}
return null;
}
}
console.log(Cnodes);

for (var n in Cnodes) {
if (Cnodes[n].Name == newName) {
if (Cnodes[n].id == treeNode.id) return;
setTimeout(function () {
var zTree = $.fn.zTree.getZTreeObj("first");
zTree.cancelEditName();
alert("编目名称已存在!");
}, 200)
return false;
}
}

return true;
};



function onRename(e, treeId, treeNode, isCancel) {
if (isCancel) return;
}


删除节点:

1.简单删除

功能介绍:点击删除按钮即可删除

代码实现:

var setting = {
edit: {
enable: true,
        editNameSelectAll: true,
},
2.确认后删除

功能介绍:点击删除按钮,弹出确认框,点击确定之后删除。

代码实现:

function beforeRemove(treeId, treeNode) {
if (confirm("删除 " + treeNode.Name + "?"))
return true;
else
return false;
};


function onRemove(e, treeId, treeNode) {
};