zTree树的创建、多选、多选框信息回显附带zTree树官网地址

李艳成

zTree树官网:https://www.treejs.cn/v3/main.php#_zTreeInfo

 
首先来到首页点击右上角下载

 
可以选择使用Git拉取也可以下载ZIP压缩包，两者选其一即可

　　

下载打开文件夹以后是下面这些文件

　　

然后将这些文件放你所使用的入项目当中，如下图

 
　　

将文件放入项目当中以后，需要引入zTree树js文件

 
 

 
引入完文件以后，定义一个ul,一定要写上Class="ztree"样式

 

 
下面就比较简单了直接附上代码

 

1. [/code] 
2. [size=5]最终出来就是下面的效果，我这里后端返回数据是使用的递归[/size]
4.  
5. [align=center][/align]
6.  
7. [size=5]数据格式大概就是这样，如果使用我这种格式没出来，下面还有死数据格式可以参考，直接将死数据数组在初始化树那里替换最后一个参数即可[/size]
9.  
10. [align=center][/align]
11. [code]//数据
12.     //var zNodes = [
13.     //    注意，数据中的 menuName 必须与 settingss 中key 中定义的name一致，否则找不到
14.     //    {
15.     //        menuName: "父节点1", open: false, children: [
16.     //            { menuName: "子节点1" }, { menuName: "子节点2" }]
17.     //    },
18.     //    {
19.     //        menuName: "父节点2", open: true, children: [
20.     //            { menuName: "子节点3" }, { menuName: "子节点4" }]
21.     //    }
22.     //];

复制代码

 
下面是多选框数据回显

 
　　

  　　　　　　
　　

1. $.ajax({
2.                 url: "/Operation/GetOperationById?id=" + id,
3.                 type: "get",
4.                 async: false,
5.                 success: function (res) {
6.                     var data = res.data;
8.                     var checkedNodeIds = [];//定义一个数据接收结点编号
9.                     checkedNodeIds = data.sectionId.split(',');// 需要回显的节点 ID,我获取的是后端的数据 我存入的数据是这样的格式：1,2,3
10. 　　　　　　　　　　　 var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");//获取zTree树对象
11.                     //然后重新设置回显数据
12.                     for (var i = 0; i < checkedNodeIds.length; i++) {
13.                         var node = zTreeObj.getNodeByParam("id", checkedNodeIds[i], null);
14.                         if (node) {
15.                             node.checked = true;
16.                             zTreeObj.updateNode(node);
17.                         }
18.                     }
19.                 }
20.             });

复制代码

来源:https://www.cnblogs.com/ZXT3313/archive/2023/07/27/17586075.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！