jQuery树形控件zTree使用小结

2020-05-23 06:17:32易采站长站整理

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循环勾选速度要快。