ToB企服应用市场:ToB评测及商务社交产业平台

标题: zTree树的创建、多选、多选框信息回显附带zTree树官网地址 [打印本页]

---

作者: 涛声依旧在    时间: 2023-7-28 01:12
标题: 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. [img]https://img2023.cnblogs.com/blog/3202225/202307/3202225-20230727214624808-101624755.png[/img]
6.  
7. [size=5]数据格式大概就是这样，如果使用我这种格式没出来，下面还有死数据格式可以参考，直接将死数据数组在初始化树那里替换最后一个参数即可[/size]
9.  
10. [img]https://img2023.cnblogs.com/blog/3202225/202307/3202225-20230727214948433-1262434212.png[/img]
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.             });

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4