//增加节点 function addTreeNode() { hideRMenu(); var name = new Date().getTime(); //利用时间戳生成节点名称，保证节点名称唯一 var newNode = { name: name }; if (zTree.getSelectedNodes()[0]) { newNode.checked = zTree.getSelectedNodes()[0].checked; newNode.pid = zTree.getSelectedNodes()[0].id; zTree.addNodes(zTree.getSelectedNodes()[0], newNode); } else { zTree.addNodes(null, newNode); } var node = zTree.getNodeByParam("name", name, null); //得到新增加的节点 zTree.selectNode(node); //选中新增加的节点 zTree.editName(node); //让新增加的节点处于编辑状态 }
编辑节点
function editTreeNode() { var nodes = zTree.getSelectedNodes(); //得到选中节点集合 if (nodes && nodes.length > 0) { var parent = nodes[0].getParentNode(); //得到选中节点的父节点 if (parent) { nodes[0].pid = parent.id; //如果选中节点父节点存在，将当前结点的pid属性值设置为父节点的id } zTree.editName(nodes[0]); //让选中节点处于编辑状态 } hideRMenu(); //隐藏右键面板 };
节点编辑状态离开时触发事件
//编辑并保存节点 function beforeRename(treeId, treeNode, newName, isCancel) { if (newName.length == 0) { //节点名称判断 alert("不能为空。"); return false; } else { $.ajax({ //数据入库 type: "Post", url: "/Design/InsertOrUpdate", data: { "dto": { "Id": treeNode.id, "ParentId": treeNode.pid, "Name": newName } }, succes: function (data) { if (data.result == "Faild") { layerAlert("保存失败。"); return false; } else { treeNode.id = data.result; //将返回的id赋值给当前结点 return true; } } }); } };
删除节点数据
function removeTreeNode() { hideRMenu(); var nodes = zTree.getSelectedNodes(); if (nodes && nodes.length > 0) { if (nodes[0].children && nodes[0].children.length > 0) { alert("包含下级，无法删除。"); } else { if (confirm("该操作会将关联数据同步删除，是否确认删除？") == true) { $.ajax({ type: "Post", url: "/Design/Delete", data: { "id": nodes[0].id }, success: function (data) { if (data.result == "Success") { zTree.removeNode(nodes[0]); } else { alert("删除失败。"); } } }); }; } } };
2.4 一些总结
我们通常使用到树形控件做授权或关联类似的操作，一般会先全部取消勾选，然后根据选中的数据关联对树控件的复选框进行选中操作，在大数据量时，大约几万条数据，全部取消勾选+根据关联数据勾选相关节点这个操作通过js执行会很慢，这种情况建议在后台通过关联关系重新组织zTree需要的数据源，对每条数据（对应树节点）设置checked属性，然后再前台页面重新加载树，这种操作速度要快得多。
$.ajax({ type: "Get", url: "/Model/GetRelationModelTreeData?designId=" + treeNode.id + "&t=" + new Date(), success: function (data) { //$.each(data.result, function (i, item) { // var node = modelTree.getNodeByParam("id", item, null); // modelTree.checkNode(node, true, true); //}); $.fn.zTree.init($("#treejian"), setting1, data.result); //改为重新加载，比js循环勾选速度要快。 } });