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

Posted 青小稞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了zTree简单实例与异步加载实例相关的知识,希望对你有一定的参考价值。

 

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

 

 

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


简单实例:


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

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

  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简单实例与异步加载实例的主要内容,如果未能解决你的问题,请参考以下文章

Ajax 简单的实例代码

原生Ajax用法——一个简单的实例

zTree的功能解析

插件:zTree

ztree使用实例

zTree —— JQuery Tree 插件 | 软件推介