插件使用一树形插件---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; // 省略构造函数 访问器和修改器 |