插件使用一树形插件---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;
     
    // 省略构造函数 访问器和修改器
上一篇:react异步加载组件


下一篇:J2EE (九) 静态代理和动态代理--间接“美”