码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2017-09-25 22:55:19      阅读：183      评论：0      收藏：0      [点我收藏+]

标签：php   key   集合   代码   ast   异步加载   asc   了解   id3   

 

【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

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

标签：php   key   集合   代码   ast   异步加载   asc   了解   id3   

原文地址：http://www.cnblogs.com/jiapengsongweb/p/7594163.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！