`

ztree_v3 异步加载

    博客分类：
  • java
ajaxztree_v3异步加载 
阅读更多

 

源码下载地址：itxxzZTree

 

 

 

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


"异步加载"

 


当访问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中解析的一致。

例如，我们自定义的父级节点为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>  
0
顶
0
踩
分享到：
| 软件开发的天堂–站坐办公桌和赫尔曼米勒的 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics