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;
// 省略构造函数 访问器和修改器
|
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
