zTree简单实例与异步加载实例

Posted 2020-10-08 青小稞

 

【zTree】简单实例与异步加载实例

 

 

我们在项目中经常会需要用到树，这次按照数据库存储的特点重新了做一个小demo，使用zTree来实现这个功能。

简单实例：

    首先我们需要在界面中引入代码，很简单，但是很重要，它用来存放加载的树。

     ps:添加ztree的引用，下载地址：http://www.ztree.me/v3/main.php#_zTreeInfo

[html] view plain copy

1. <span style="font-family:KaiTi_GB2312;font-size:18px;"><ul id="tree" class="ztree"></ul> </span>  

    

     其次是js代码：

[javascript] view plain copy

1. <span style="font-family:KaiTi_GB2312;font-size:18px;"> var tree = {  
2.         /**  
3.         * 所有的初始化的操作  
4.         */  
5.         pFunction: {  
6.             zTree: ‘‘,  
7.             setting:  
8.             {  
9.                 view: {  
10.                     dblClickExpand: false,  
11.                     showLine: true,  //是否显示节点间的连线  
12.                     selectedMulti: false,  
13.                     expandSpeed: "fast"  
14.                 },  
15.                 callback: {  
16.                     onDblClick: zTreeOnDblClick  
17.                 },  
18.                 check: {  
19.                     enable: true,  
20.                     chkStyle: "radio",   
21.                     radioType: "all"    
22.                 },  
23.                 data:  
24.                 {  
25.                     key:  
26.                     {  
27.                         name: "Name"  //界面显示的名称参数  
28.                     },  
29.                     simpleData:  
30.                     {  
31.                         enable: true,  
32.                         idKey: "ID",  
33.                         pIdKey: "PID",  
34.                         rootPId: "null"  
35.                     }  
36.                 }  
37.             },  
38.             //加载树的资源    
39.             loadTree: function () {  
40.                 $.post("/HomeIndex/Ztree", null, function (resourceInfo) {  
41.                     //核心代码，将查询到的信息存放到setting格式的tree中  
42.                     $.fn.zTree.init($("#tree"), tree.pFunction.setting, resourceInfo);  
43.                 });  
44.             },  
45.         }  
46.     };</span>  

    因为项目需要，我造了一些与真实数据库类似的数据，这些数据大家可自行忽略，主要代码是将数据赋予id和Pid,返回list.，树主要就是通过父节点和子节点的id来进行匹配的。

[csharp] view plain copy

1. <span style="font-family:KaiTi_GB2312;font-size:18px;"> public JsonResult Ztree()  
2.         {  
3.             List<Tree> tree = new List<Tree>();  
4.   
5.   
6.             Tree tree1 = new Tree();  
7.             Tree tree2 = new Tree();  
8.             Tree tree3 = new Tree();  
9.             Tree tree4 = new Tree();  
10.             Tree tree5 = new Tree();  
11.             Tree tree6 = new Tree();  
12.             Tree tree7 = new Tree();  
13.   
14.             tree1.ID = "01";  
15.             tree1.Name = "一";  
16.             tree1.ID1 = "0101";  
17.             tree1.Name1 = "一一";  
18.             tree1.ID2 = "010104";  
19.             tree1.Name2 = "一一一";  
20.             tree1.ID3 = "01010406";  
21.             tree1.Name3 = "一一一一";  
22.   
23.             tree2.ID = "01";  
24.             tree2.Name = "一";  
25.             tree2.ID1 = "0102";  
26.             tree2.Name1 = "一二";  
27.             tree2.ID2 = "010204";  
28.             tree2.Name2 = "一二一";  
29.             tree2.ID3 = "01010407";  
30.             tree2.Name3 = "一二一一";  
31.   
32.             tree3.ID = "01";  
33.             tree3.Name = "一";  
34.             tree3.ID1 = "0102";  
35.             tree3.Name1 = "一二";  
36.             tree3.ID2 = "010205";  
37.             tree3.Name2 = "一二二";  
38.             tree3.ID3 = "01020501";  
39.             tree3.Name3 = "一二二一";  
40.   
41.             tree4.ID = "02";  
42.             tree4.Name = "二";  
43.             tree4.ID1 = "0201";  
44.             tree4.Name1 = "二一";  
45.             tree4.ID2 = "020101";  
46.             tree4.Name2 = "二一一";  
47.             tree4.ID3 = "02010103";  
48.             tree4.Name3 = "二一一一";  
49.   
50.             tree5.ID = "02";  
51.             tree5.Name = "二";  
52.             tree5.ID1 = "0201";  
53.             tree5.Name1 = "二一";  
54.             tree5.ID2 = "020101";  
55.             tree5.Name2 = "二一一";  
56.             tree5.ID3 = "02010104";  
57.             tree5.Name3 = "二一一二";  
58.   
59.             tree6.ID = "02";  
60.             tree6.Name = "二";  
61.             tree6.ID1 = "0201";  
62.             tree6.Name1 = "二一";  
63.             tree6.ID2 = "020102";  
64.             tree6.Name2 = "二一二";  
65.             tree6.ID3 = "02010203";  
66.             tree6.Name3 = "二一二一";  
67.   
68.             tree7.ID = "02";  
69.             tree7.Name = "二";  
70.             tree7.ID1 = "0202";  
71.             tree7.Name1 = "二二";  
72.             tree7.ID2 = "020201";  
73.             tree7.Name2 = "二二一";  
74.             tree7.ID3 = "02020103";  
75.             tree7.Name3 = "二二一一";  
76.             //将测试数据存放到tree的list集合中  
77.             tree.Add(tree1); tree.Add(tree2); tree.Add(tree3); tree.Add(tree4); tree.Add(tree5); tree.Add(tree6); tree.Add(tree7);  
78.   
79.             List<Tree> treelist = new List<Tree>();  
80.             //根据需要查询每个单位字段的个数，并附id和pid  
81.             //一级菜单  
82.             var AllCount1 = from p in tree  
83.                            group p by new  
84.                            {  
85.                                p.ID,  
86.                                p.Name  
87.                            } into g  
88.                            select g;  
89.             foreach (var item in AllCount1)  
90.             {  
91.                 Tree treea = new Tree();  
92.                 treea.PID = null;  
93.                 treea.ID=item.Key.ID;  
94.                 treea.Name = item.Key.Name;  
95.                 treelist.Add(treea);  
96.             }  
97.             //二级菜单  
98.             var AllCount2 = from p in tree  
99.                             group p by new  
100.                             {  
101.                                 p.ID1,  
102.                                 p.Name1  
103.                             } into g  
104.                             select g;  
105.             foreach (var item in AllCount2)  
106.             {  
107.                 Tree treeb = new Tree();  
108.                 treeb.PID = item.Key.ID1.Substring(0,2);  
109.                 treeb.ID = item.Key.ID1;  
110.                 treeb.Name = item.Key.Name1;  
111.                 treelist.Add(treeb);  
112.             }  
113.             //三级菜单  
114.             var AllCount3 = from p in tree  
115.                             group p by new  
116.                             {  
117.                                 p.ID2,  
118.                                 p.Name2  
119.                             } into g  
120.                             select g;  
121.             foreach (var item in AllCount3)  
122.             {  
123.                 Tree treec = new Tree();  
124.                 treec.PID = item.Key.ID2.Substring(0, 4);  
125.                 treec.ID = item.Key.ID2;  
126.                 treec.Name = item.Key.Name2;  
127.                 treelist.Add(treec);  
128.             }  
129.             //四级菜单  
130.             var AllCount4 = from p in tree  
131.                             group p by new  
132.                             {  
133.                                 p.ID3,  
134.                                 p.Name3  
135.                             } into g  
136.                             select g;  
137.             foreach (var item in AllCount4)  
138.             {  
139.                 Tree treed = new Tree();  
140.                 treed.PID = item.Key.ID3.Substring(0, 6);  
141.                 treed.ID = item.Key.ID3;  
142.                 treed.Name = item.Key.Name3;  
143.                 treelist.Add(treed);  
144.             }  
145.             return Json(treelist, JsonRequestBehavior.AllowGet);  
146.         }  
147.   
148.   
149.         public class Tree  
150.         {  
151.             public string PID { get; set; }  
152.             public string ID { get; set; }  
153.             public string Name { get; set; }  
154.             public string ID1 { get; set; }  
155.             public string Name1 { get; set; }  
156.             public string ID2 { get; set; }  
157.             public string Name2 { get; set; }  
158.             public string ID3 { get; set; }  
159.             public string Name3 { get; set; }              
160.         }</span>  

效果图：

改进版：异步加载

    用这种写法在数据量小的情况下一次性把所有节点的信息查询出来是没有问题的，但这次项目中实践中发现查询出的数据量有三万多，这样一次性快速显示是不容易的，还会造成浏览器卡死的情况。所以不得不采用zTree的异步加载来实现，初次加载显示父节点，每次点击节点后再查询加载子节点。不得不说通过查阅API文档发现zTree真的很强大。如果想了解详细内容可以看文档。

需要在代码中添加异步加载的方法：

[javascript] view plain copy

1. var setting = {  
2.     data: {  
3.         key: {  
4.             name:"name"  
5.         },  
6.         simpleData: {  
7.             enable: true,  
8.             idKey: "ID",  
9.             pIdKey: "PID",  
10.             isParent: "isParent",  
11.             rootPId:null  
12.         }  
13.     },  
14.     view: {  
15.         dblClickExpand: false,  
16.         showLine: true,  
17.         selectedMulti: false,  
18.         expandSpeed:"fast"  
19.     },  
20.     async: {  
21.         enable: true,  
22.         url: "",  
23.         autoParam: ["ID", "PID", "index"],  
24.         type:"post"  
25.     },  
26.     check:{  
27.         enable: true,  
28.         chkStyle: "radio",  
29.         radioType:"all"  
30.     },  
31.     callback: {  
32.         onClick:reLoadOpenURL   //节点被点击时调用的方法  
33.     }  
34. }  
35. function reLoadOpenURL(event, treeId, treeNode) {  
36.     if (treeNode.isParent) {  
37.   
38.     }  
39.     else {  
40.         if (confirm("确定选择此商品吗？")) {  
41.             window.opener.document.getElementById("pCode").value = treeNode.ID;  
42.             window.close();  
43.         }  
44.         else { }  
45.     }  
46. };  
47. $(document).ready(function () {  
48.     $.fn.zTree.init(("#tree"), setting);  
49. });  

后台的方法根据传递的参数再查询我们需要的每个节点信息，而不是一次性的全部查询出来。

小结：

    zTree的核心就是父节点和子节点以及一些特定的格式，比如setting、界面ul存放，最后将查询到的信息存放到setting格式tree中的代码。

    实现一个功能首先要了解需求，然后考虑实现思路，公司开发讲究的是效率，首先选择自己最擅长的方式来实现。

    最近做项目的感受就是，没有什么难与不难，会用了就不难了，凭借很多工具和途径我们总会找到解决办法。在工作中遇到什么困难不要畏惧，最后都会解决的，先去想实现再说。

    每天进步一点点~

 

 

 

摘自：http://blog.csdn.net/ww130929/article/details/51873392