在以前项目改造过程中涉及到ZTree的简单应用,在接下来的项目中有个业务模块涉及到ZTree节点的操作,包含新增,删除,修改,留代码备忘。
首先是ztree的配置信息
var setting = { data: { simpleData: { enable: true } }, edit: { enable: true, showRemoveBtn: false, showRenameBtn: false } };
新增方法
var newCount = 1; function addNode(e) { var zTree = $.fn.zTree.getZTreeObj("groupTree"); if (!zTree) { var zNodes = []; zTree = $.fn.zTree.init($("#groupTree"), setting, zNodes); } var isParent = e.data.isParent, nodes = zTree.getSelectedNodes(), treeNode = nodes[0]; if (treeNode) { treeNode = zTree.addNodes(treeNode, { id: (100 + newCount), pId: treeNode.id, isParent: isParent, name: "new node" + (newCount++) }); } else { treeNode = zTree.addNodes(null, { id: (100 + newCount), pId: 0, isParent: isParent, name: "new node" + (newCount++) }); } };
删除方法
function removeNode(e) { var zTree = $.fn.zTree.getZTreeObj("groupTree"), nodes = zTree.getSelectedNodes(), treeNode = nodes[0]; if (nodes.length == 0) { alert("请先选择一个节点"); return; } zTree.removeNode(treeNode, false); };
修改方法
function UpdateNode(stext) { var zTree = $.fn.zTree.getZTreeObj("groupTree"), nodes = zTree.getSelectedNodes(), treeNode = nodes[0]; if (nodes.length == 0) { alert("请先选择一个节点"); return; } else { treeNode.id = stext; treeNode.name = stext; zTree.updateNode(treeNode, false); } }
页面加载完成绑定事件
window.onload = function () { $("#addParent").bind("click", { isParent: true }, addNode); $("#addLeaf").bind("click", { isParent: false }, addNode); $("#removeNode").bind("click", removeNode); }