ztree+java后台取数据(包括异步)生成树状图
2017-03-20 17:35
204 查看
Java小白初用ztree:
ztree的官网上demo已经很详细,最近项目有用到树桩结构,自己就选择了ztree,下面从后台取数据生成树状结构的源码,官网上用到的PHP.
1.项目jar包:
2.实体类ZtreeNode.java,生成demo中的zNodes:
示例代码:
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
其中,id、pid、isparent必须,其他的根据需求添加
3.在action中给ZtreeNode属性取值,根据业务,在数据库中取相应值,这里我就直接生成一些值:
这里根据取值过程,分为2中方式:
(1).一次性取值,传到页面:
示例代码:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
(2).异步取值返回页面:
示例代码:
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
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
4.页面
(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
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
(2).异步取值返回页面:
示例代码:
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
5.struts.xml配置:
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
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
6.效果图:
7.可以根据自己的业务要求自己选用和改进,这里包含了:
(1)checked框的提交;
(2)异步加载,显示1级节点后,后台自动加载下级节点。
ztree的官网上demo已经很详细,最近项目有用到树桩结构,自己就选择了ztree,下面从后台取数据生成树状结构的源码,官网上用到的PHP.
1.项目jar包:
2.实体类ZtreeNode.java,生成demo中的zNodes:
示例代码:
package com.demo.ztree.entity; public class ZtreeNode { private String id; private Integer state; private String pid; private String icon; private String iconClose; private String iconOpen; private String name; private boolean open; private boolean isParent; @Override public String toString() { StringBuilder sb = new StringBuilder(); sb.append("{id:\""); sb.append(id); sb.append("\",pId:\""); sb.append(pid); sb.append("\",name:\""); sb.append(name); sb.append("\",state:"); sb.append(state); sb.append(",icon:\""); sb.append(icon); sb.append("\",iconClose:\""); sb.append(iconClose); sb.append("\",iconOpen:\""); sb.append(iconOpen); sb.append("\",open:\""); sb.append(open); sb.append("\",is 4000 Parent:\""); sb.append(isParent); sb.append("\"}"); return sb.toString(); } public String getIcon() { return icon; } public void setIcon(String icon) { this.icon = icon; } public String getIconClose() { return iconClose; } public void setIconClose(String iconClose) { this.iconClose = iconClose; } public String getIconOpen() { return iconOpen; } public void setIconOpen(String iconOpen) { this.iconOpen = iconOpen; } public boolean isOpen() { return open; } public void setOpen(boolean open) { this.open = open; } public String getId() { return id; } public void setId(String id) { this.id = id; } public String getPid() { return pid; } public void setPid(String pid) { this.pid = pid; } public String getName() { return name; } public void setName(String name) { this.name = name; } public boolean isIsParent() { return isParent; } public void setIsParent(boolean isParent) { this.isParent = isParent; } public Integer getState() { return state; } public void setState(Integer state) { this.state = state; } public static void main(String[] args) { ZtreeNode ztree1 = new ZtreeNode(); ztree1.setId("1"); ztree1.setPid("0"); ztree1.setName("顶层节点"); System.out.println(ztree1); } }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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
其中,id、pid、isparent必须,其他的根据需求添加
3.在action中给ZtreeNode属性取值,根据业务,在数据库中取相应值,这里我就直接生成一些值:
这里根据取值过程,分为2中方式:
(1).一次性取值,传到页面:
示例代码:
public String showTree() { for(int i=-1;i<100000;i++){ if(i<0){ ZtreeNode ztree = new ZtreeNode(); ztree.setId("0"); ztree.setName("顶层节点 "); ztree.setIsParent(true); ztree.setIcon(icon); ztree.setIconClose(iconClose); ztree.setIconOpen(iconOpen); listTree.add(ztree); }else{ ZtreeNode ztree = new ZtreeNode(); ztree.setId(""+(i+1)); ztree.setName("级节点"); ztree.setPid( 14290 ""+i/10); ztree.setIcon(icon); ztree.setIconClose(iconClose); ztree.setIconOpen(iconOpen); listTree.add(ztree); } } return SUCCESS; }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
(2).异步取值返回页面:
示例代码:
public String getTree() { return SUCCESS; } public String asyncTree() { String pid = getRequest().getParameter("id"); if(pid==null ||pid.equals("")){ pid="0"; ZtreeNode ztree = new ZtreeNode(); ztree.setId("1"); ztree.setName("顶级节点"); ztree.setIsParent(true); ztree.setState(1); ztree.setIcon(icon); ztree.setIconClose(iconClose); ztree.setIconOpen(iconOpen); listTree.add(ztree); }else{ for(int i=0;i<40;i++){ ZtreeNode ztree = new ZtreeNode(); ztree.setId(pid+i); ztree.setName(""+pid.length()+"级节点"); ztree.setState(1); ztree.setIcon(icon); ztree.setIconClose(iconClose); ztree.setIconOpen(iconOpen); if(pid.length()<4){ ztree.setIsParent(true); } listTree.add(ztree); } } json = JSONArray.fromObject(listTree); return SUCCESS; }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
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
4.页面
(1).一次性取值,传到页面:
示例代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ztree</title> <link href="${request.contextPath}/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="${request.contextPath}/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="${request.contextPath}/js/jquery.ztree.all-3.5.min.js"></script> <script type=text/javascript> var zNodes = ${listTree}; var setting = { check: { enable: true, chkboxType: {"Y":"s", "N":"ps"} }, data: { simpleData: { enable: true } } }; $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </script> </head> <body> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> <body > </html>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
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
(2).异步取值返回页面:
示例代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ztree</title> <link href="${request.contextPath}/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="${request.contextPath}/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="${request.contextPath}/js/jquery.ztree.all-3.5.min.js"></script> <script type=text/javascript> var setting = { view: { showLine: false, addDiyDom: addDiyDom }, async: { enable: true, autoParam: ["id"], url: "${request.contextPath}/asyncTree.action", dataFilter: filter }, check: { enable: true, chkboxType: {"Y":"s", "N":"ps"} }, callback: { onAsyncSuccess: zTreeOnAsyncSuccess }, data: { simpleData: { enable: true } } }; $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting); }); var zTree = $.fn.zTree.getZTreeObj("treeDemo"); function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) { if(treeNode==null){ var zTree = $.fn.zTree.getZTreeObj("treeDemo"); nodes = zTree.getNodes(); for (var i=0, l=nodes.length; i<l; i++) { zTree.expandNode(nodes[i], true, false, false); } asyncNodes(zTree.getNodes()); if (!goAsync) { curStatus = ""; } } }; function asyncNodes(nodes) { if (!nodes) return; curStatus = "async"; var zTree = $.fn.zTree.getZTreeObj("treeDemo"); for (var i=0, l=nodes.length; i<l; i++) { if (nodes[i].isParent && nodes[i].zAsync) { asyncNodes(nodes[i].children); } else { goAsync = true; zTree.reAsyncChildNodes(nodes[i], "refresh", true); } } } 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; } function addDiyDom(treeId, treeNode) { var aObj = $("#" + treeNode.tId + "_a"); if ($("#diyBtn_"+treeNode.id).length>0) return; switch (treeNode.state) { case 0: var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' style='color:red;padding-left:5px;'>未审核</span>"; break; case 1: var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' style='color:#6495ED;padding-left:5px;'>正常</span>"; break; case 2: var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' style='color:#CD2626;padding-left:5px;'>锁定</span>"; break; default: var editStr = "<span id='diyBtn_space_" +treeNode.id+ "' style='padding-left:5px;'>未知状态</span>"; break; } aObj.append(editStr); } </script> </head> <body> <div class="zTreeDemoBackground left"> <ul id="treeDemo" class="ztree"></ul> </div> <body > </html>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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
5.struts.xml配置:
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <constant name="struts.devMode" value="true" /> <package name="default-package" extends="json-default"> <result-types> <result-type name="json" class="org.apache.struts2.json.JSONResult"/> </result-types> <interceptors> <interceptor name="json" class="org.apache.struts2.json.JSONInterceptor"/> </interceptors> </package> <package name="default" namespace="/" extends="default-package"> <action name="showTree" class="com.demo.ztree.action.HelloAction" method="showTree"> <result name="success" type="freemarker">/hello.ftl</result> </action> <action name="getTree" class="com.demo.ztree.action.HelloAction" method="getTree"> <result name="success" type="freemarker">asyncZtree.ftl</result> </action> <action name="asyncTree" class="com.demo.ztree.action.HelloAction" method="asyncTree"> <result name="success" type="json"> <param name="root">json</param> </result> </action> </package> </struts>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
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
6.效果图:
7.可以根据自己的业务要求自己选用和改进,这里包含了:
(1)checked框的提交;
(2)异步加载,显示1级节点后,后台自动加载下级节点。
相关文章推荐
- ztree+java后台取数据(包括异步)生成树状图
- ztree+java后台取数据(包括异步)生成树状图
- Java获取后台数据,动态生成多行多列复选框
- JAVA项目后台查询的数据生成Excel表格并提供给用户下载
- Struts2+JQuery+JSON实现异步交互,包括从后台获得单个值、对象、List和Map数据并从前台的表达中获取值
- EXT Java 后台获取数据生成饼状图
- WEB后台--邮件和短信业务实现(包括Java一键实现、封装和异步)以及原理详解
- WEB后台--邮件和短信业务实现(包括Java一键实现、封装和异步)以及原理详解
- 学习学习 Dev控件综合实例(后台数据操作,控件数据级联更新,前后台异步交互)
- 用Ext做的后台操作(包括,增,删,改,查)和一个异步加载的Ext树(1)(转)
- java生成xml格式数据
- theboboy原创 随机生成器 生成伪数据 用来做测试 Java版本
- jqury+ajax每秒向后台发送请求数据然后返回页面(包括jqruy页面加载完毕才执行方法)
- 前2天后台系统需要生成报表,正好抽时间复习了一下之前做过的JAVA生成EXCEL,下面介绍POI 和JXL 生成报表的2种方式。
- Java中使用OpenSSL生成的RSA公私钥进行数据加解密
- Ajax实现异步请求后台XML数据(初学Ajax整理笔记)
- 添加时动态的在页面生成表格,使用ajax异步在后台添加到数据库
- 根据后台传的数据动态生成grid的列和store的注意事项
- EXTJS AJAX发送数据到JAVA后台 js->jsp->java->html
- winform 数据绑定 对象的属性,后台异步更新此对象的属性产生异常