zTree树的创建、多选、多选框信息回显附带zTree树官网地址
zTree树官网:https://www.treejs.cn/v3/main.php#_zTreeInfo首先来到首页点击右上角下载
https://img2023.cnblogs.com/blog/3202225/202307/3202225-20230727211342545-589042451.png
可以选择使用Git拉取也可以下载ZIP压缩包，两者选其一即可
https://img2023.cnblogs.com/blog/3202225/202307/3202225-20230727211726132-1310056477.png
下载打开文件夹以后是下面这些文件
https://img2023.cnblogs.com/blog/3202225/202307/3202225-20230727212024475-1445060947.png
然后将这些文件放你所使用的入项目当中，如下图
https://img2023.cnblogs.com/blog/3202225/202307/3202225-20230727212216715-1508788930.png
将文件放入项目当中以后，需要引入zTree树js文件
https://img2023.cnblogs.com/blog/3202225/202307/3202225-20230727212823262-36802810.png
引入完文件以后，定义一个ul,一定要写上Class="ztree"样式
https://img2023.cnblogs.com/blog/3202225/202307/3202225-20230727213351913-40596873.png
下面就比较简单了直接附上代码
最终出来就是下面的效果，我这里后端返回数据是使用的递归
https://img2023.cnblogs.com/blog/3202225/202307/3202225-20230727214624808-101624755.png
数据格式大概就是这样，如果使用我这种格式没出来，下面还有死数据格式可以参考，直接将死数据数组在初始化树那里替换最后一个参数即可
https://img2023.cnblogs.com/blog/3202225/202307/3202225-20230727214948433-1262434212.png
//数据
//var zNodes = [
// 注意，数据中的 menuName 必须与 settingss 中key 中定义的name一致，否则找不到
// {
// menuName: "父节点1", open: false, children: [
// { menuName: "子节点1" }, { menuName: "子节点2" }]
// },
// {
// menuName: "父节点2", open: true, children: [
// { menuName: "子节点3" }, { menuName: "子节点4" }]
// }
//];
下面是多选框数据回显
https://img2023.cnblogs.com/blog/3202225/202307/3202225-20230727220348242-499505618.png
$.ajax({
url: "/Operation/GetOperationById?id=" + id,
type: "get",
async: false,
success: function (res) {
var data = res.data;
var checkedNodeIds = [];//定义一个数据接收结点编号
checkedNodeIds = data.sectionId.split(',');// 需要回显的节点 ID,我获取的是后端的数据 我存入的数据是这样的格式：1,2,3
var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");//获取zTree树对象
//然后重新设置回显数据
for (var i = 0; i < checkedNodeIds.length; i++) {
var node = zTreeObj.getNodeByParam("id", checkedNodeIds, null);
if (node) {
node.checked = true;
zTreeObj.updateNode(node);
}
}
}
});
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]