插件使用一树形插件---zTree一zTree异步加载

zTree 可以实现异步加载。异步加载可以让初次加载速度快，带来好的用户体验。

异步加载 官方源码中的demo提示了例子。例子是采用php语言。

在java语言中，zTree如何与Servlet结合呢？

下面这个Demo演示了Servlet + Gson + MySQL 实现异步加载。

第一步，引入css和js，参考一上节《zTree》

第二步，修改ztree初始方法如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

var setting = {     data : {         simpleData : {             enable : true         }     },     async : {         enable : true,         url : "console/treeAjaxAsyncLoad.do",         autoParam : [ "id=id" ],         dataFilter : filter     } };   function filter(treeId, parentNode, childNodes) {     if (!childNodes)         return null;     for (var i = 0, l = childNodes.length; i < l; i++) {         childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');     }     return childNodes; }   $(document).ready(function() {     $.fn.zTree.init($("#treeDemo"), setting);   });

关键代码在7~12行，配置异步加载功能，传递一个参数id给控制器treeAjaxAsyncLoad.do，控制器控制id查找所以子节点（直属子节点，孙子节点就没查找）

第三步，控制器

代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

import java.io.IOException;   import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;   import com.mysql.jdbc.StringUtils;   import dao.ArticleDao; import util.JsonUtils;   /**  * Servlet implementation class UserAjaxValidatingUser  */ @WebServlet("/console/treeAjaxAsyncLoad.do") public class TreeAjaxAsyncLoad extends HttpServlet {       private static final long serialVersionUID = 1246470631076856023L;       protected void service(HttpServletRequest request, HttpServletResponse response)             throws ServletException, IOException {           String pId = request.getParameter("id");         ArticleDao dao = new ArticleDao();           if (StringUtils.isNullOrEmpty(pId)) {             JsonUtils.printJson(response, dao.getRootClassify());         } else {             JsonUtils.printJson(response, dao.getTrees(Integer.parseInt(pId)));         }       }   }

这部分代码是根据前端传递的参数，来查询子节点，并转换成json格式响应给前端。

JsonUtils.printJson()方法是将数据生成json格式。

代码如下：

1 2 3 4 5 6 7 8 9

public static void printJson(HttpServletResponse response, Object obj) throws IOException {     // 返回数据，返回数据类型是json     response.setContentType("application/json");     // 返回数据编码UTF-8     response.setCharacterEncoding("UTF-8");     // 返回数据，通过gson将数据返回给Ajax 通过gson工具提高工作效率     response.getWriter().write(new Gson().toJson(obj)); }

第四步，数据访问层两个关键方法：

方法一：

1 2 3 4 5 6 7 8 9 10

@SuppressWarnings("unchecked") public List<ArticleTree> getClassify(int id) {     String sql = "SELECT id,pId,title as name FROM article where pId=?;";     List<ArticleTree> list = JdbcUtils.getListBean(sql, ArticleTree.class, new Object[] { id });       for (ArticleTree at : list) {         at.setParent(isParent(at.getId()));     }     return list; }

从数据库里查询数据封装成树结构对象。代码的第6~8行，设置是否为父节点，如果是父节点，在html上显示是一个文件夹，前面有加号，还可以展开，如果不是，在html上显示是一个文件且不可以展开。

方法二：

1 2 3 4 5 6 7 8 9 10 11

@SuppressWarnings("unchecked") public List<ArticleTreeUrl> getTrees(int id) {     String sql = "SELECT id,pId,title as name FROM article where pId=?;";     List<ArticleTreeUrl> list = JdbcUtils.getListBean(sql, ArticleTreeUrl.class, new Object[] { id });     for (ArticleTreeUrl at : list) {         at.setParent(isParent(at.getId()));         at.setUrl("console/article.jsp?id=" + at.getId());         at.setTarget("_blank");     }     return list; }

方法二和方法一样，都从数据库里查询数据封装成树结构对象。不同的是带查询参数，查找的是子节点。

本示例数据访问层使用apache的dbutils，读者根据自己的情况（原生JDBC、Spring JDBC、mybatis、Spring Data JPA）调整。

并且设置ztree的url。

ArticleTree和ArticleTreeUrl数据模型如下：

1 2 3 4 5 6 7 8 9

public class ArticleTree {       private int id;     private int pId;     private String name;     private int ParentFlags;     boolean isParent;           // 省略构造函数 访问器和修改器

1 2 3 4 5 6 7 8 9 10 11

public class ArticleTreeUrl {       private int id;     private int pId;     private String name;     private int ParentFlags;     boolean isParent;     private String url;     private String target;           // 省略构造函数 访问器和修改器