ztree_v3 异步加载

 

源码下载地址:itxxzZTree

 

 

 

很多实际应用中,考虑到性能问题,树的加载方式都是ajax异步加载。ztree则很好的做到了这一点,下面通过代码看下是如何实现的。


ztree_v3 异步加载

"异步加载"

 


当访问itxxzZTree项目时,默认会展开根节点下面的子节点,而且父节点都有蓝色显著标识,下面就分别来讲解下。

ztree_v3的异步加载方式写法如下,注意,enable为true时才会进行加载。



  1. var setting={  
  2.            async:{  
  3.             autoParam:["id"],  
  4.             enable:true,  
  5.             url:'${pageContext.request.contextPath}/FileManagerServlet',  
  6.             type:'post'  
  7.            } 



autoParam:["id"]------自动向后抬提交的字段

enable:true-----------为true标识开启异步加载

url:'${pageContext.request.contextPath}/FileManagerServlet',  ---------请求的地址

type:'post' ----------请求的方式


"层级结构展现"

 


但是如果仅仅如此配置的话,传值与加载都是没有问题的,jsp显示:

ztree_v3 异步加载

这和第一张图对比,下面两个节点并没有在根节点下,反而是并列的。这是因为我们虽然为节点指定的父级节点,但是,我们指定的字段并非同ztree中解析的一致。

例如,我们自定义的父级节点为parendid,而ztree默认的父级节点标识为pid,这样对应不起来,当然就不会呈现上下级结构的展现。

这时候我们就需要统一一下,查看官方API:


  1. data: {  
  2.                 simpleData: {  
  3.                     enable: true,  
  4.                     idKey: "id",  
  5.                     pIdKey: "parentId"  
  6.                 }  
  7.               
  8.             }  



这里就可以清楚的看到通过idKey: "id" 和 pIdKey: "parentId" 就可以统一起来了。


"字体样式"


我们可以封装一个函数function xxx(),通过返回值来指定字体的css,代码如下:


  1. view: {  
  2.                 fontCss: setFontCss  
  3.             },
  1. function setFontCss(treeId, treeNode) {  
  2.             if (treeNode && treeNode.isParent) {  
  3.                   return {color: "blue"};  
  4.            } else {  
  5.                   return null;  
  6.            }  
  7.         };  

 

"完整代码"


  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6. <title>IT学习者-itxxzZTree</title>  
  7. <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>  
  8. <script type="text/javascript" src="${pageContext.request.contextPath}/zTree_v3/js/jquery.ztree.core-3.5.js"></script>  
  9. <link href="${pageContext.request.contextPath}/zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css"/>  
  10.     <script type="text/javascript">  
  11.         var setting={  
  12.            async:{  
  13.             autoParam:["id"],  
  14.             enable:true,  
  15.             url:'${pageContext.request.contextPath}/FileManagerServlet',  
  16.             type:'post'  
  17.            } ,  
  18.            check:{  
  19.               enable:true,  
  20.               chkStyle:'checkbox',  
  21.               chkboxType: { "Y": "s", "N": "ps" }  
  22.               
  23.            },  
  24.            view: {  
  25.                 fontCss: setFontCss  
  26.             },  
  27.            data: {  
  28.                 simpleData: {  
  29.                     enable: true,  
  30.                     idKey: "id",  
  31.                     pIdKey: "parentId"  
  32.                 }  
  33.               
  34.             }  
  35.         };  
  36.    
  37.         function setFontCss(treeId, treeNode) {  
  38.             if (treeNode && treeNode.isParent) {  
  39.                   return {color: "blue"};  
  40.            } else {  
  41.                   return null;  
  42.            }  
  43.         };  
  44.          $(function(){  
  45.             $.fn.zTree.init($("#tree"),setting);  
  46.         });  
  47.            
  48.     </script>  
  49. </head>  
  50. <body>  
  51. <div id="itxxz">  
  52. <ul id="tree" class="ztree"></ul>  
  53. </div>  
  54. </body>  
  55. </html>  

你可能感兴趣的:(Ajax,异步加载,ztree_v3)