`

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
踩
分享到：
| 软件开发的天堂–站坐办公桌和赫尔曼米勒的 ...
评论
发表评论

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

相关推荐

    zTree-zTree_v3-各种tree的使用大全(带搜索)

    - 对于大数据量的树，zTree_v3支持异步加载，通过`async`配置项设置，当节点展开时动态请求子节点数据。 - 节点的动态更新则可以通过`updateNode()`或`removeNode()`方法实现，修改或删除指定节点。 6. **自定义...

    zTree-zTree_v3-master.zip

    2. **数据动态加载**：通过异步加载技术，zTree_v3可以实现节点数据的按需加载，优化了用户体验，尤其在处理大量数据时，显著提高了性能。 3. **丰富的操作事件**：包括点击、展开、折叠、选择、取消选择等事件，...

    zTree-zTree_v3-master.zip_ztree_多功能插件

    同时，zTree支持异步加载，这意味着在处理大量数据时，只需加载可视区域内的节点，大大提升了页面的响应速度。 在配置方面，zTree提供了丰富的参数设置，开发者可以根据实际需求调整节点的样式、行为以及交互效果。...

    zTree_v3插件2018

    2. **异步加载**：支持节点数据的动态异步加载，减少初次加载时的数据量，提高页面响应速度。 3. **节点操作**：提供节点的添加、删除、编辑、展开/折叠、选择/取消选择等操作，方便用户交互。 4. **丰富的API接口...

    zTree_v3-master.zip

    zTree_v3是一款基于jQuery的开源项目，它提供了强大的树形节点管理功能，支持多级展开、异步加载、拖拽排序、权限控制等多种特性。通过简单的HTML和JSON数据格式，开发者可以轻松地构建出各种复杂的树形结构。 二、...

    zTree_v3API和demo

    2. **异步加载**：演示了如何通过异步获取数据并动态加载到zTree中。 3. **复选模式**：展示了复选框的使用，包括父子节点的联动选择。 4. **节点操作**：包含添加、删除、移动节点的示例。 5. **节点展开/折叠**：...

    zTree_v3插件

    - **异步加载**：支持数据的异步加载，提高页面响应速度，尤其在处理大量数据时。 - **拖拽功能**：用户可以通过拖放操作调整节点位置，实现节点的重新排序或归属。 - **复选框与单选框**：提供选择功能，支持...

    zTree_v3.zip

    它支持多级节点、动态加载、异步数据获取、节点操作（如展开、折叠、选择、取消选择）等特性。 在zTree_v3中，要实现搜索框的模糊匹配搜索，我们需要关注以下几个关键点： 1. **配置参数**：zTree允许通过配置参数...

    zTree_v3-master

    - **异步加载**：对于层级较多的数据，zTree支持懒加载，提高页面性能。 - **搜索功能**：提供搜索框，可以快速定位到目标节点。 - **权限控制**：通过设置权限标识，实现节点的显示、操作权限控制。 4. **应用...

    树形结构显示插件zTree_v3-3.5.28

    2. **异步加载**：zTree具备动态加载子节点的能力，有效提高页面性能，尤其在数据量大的情况下。 3. **丰富的API**：提供了丰富的API接口，便于开发者进行节点操作，如添加、删除、展开、折叠等。 4. **事件驱动**：...

    zTree_v3.rar

    它支持异步加载，可以根据用户的滚动或点击行为动态加载子节点，减少初始页面的负担，提升网页响应速度。 配置方面，zTree提供了一系列灵活的参数选项，允许开发者自定义节点的样式、图标、行为等。例如，你可以...

    zTree-zTree_v3.zip

    5. **异步操作**：对于大数据量的树形结构，zTree支持异步加载，提高用户体验。 6. **权限控制**：通过配置，zTree可以实现对节点的显示、操作权限控制，适应企业级应用的权限管理需求。 7. **多语言支持**：zTree...

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