extjs4.2 动态加载树 treePanel
来源：互联网 发布：ip 网络层 编辑：程序博客网 时间：2024/04/29 15:02
extjs4.2 动态加载树 treePanel（第一种方法）
由于项目的需求，需要写一个动态的树（treePanel），具体的数据从数据库中查询出来，搞了我差不多两天的时候，都没有能够在extjs的前台正确的显示出来，网上参考了无数例子，修改了N多遍，都是无法实现。采用了两种方法，一种就是在前台获取数据以后，使用treeNode，郁闷的是extjs4.0以后就没有treeNode了，只有Node，然后在使用getNodeById（）的时候一直无法实现，还有一种方法就是在后天拼树，然后前台接收显示，这个方法在网上倒是有很多的例子，但是都无法实现（extjs4.0以后修改了很多的东西啊）。
终于在查看了extjs4.2的源码后，发现了有个treegrid.json文件，打开一看，果然第二中方法还是返出来的json的格式不符合要求，所以一直无法实现啊。修改了一下，终于完成，现把代码贴出来，以供大家参考和自己以后方便再次使用，
后台拼接树形返回json的代码：
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
/** * Event公开： 返回拼接好的树形的json * @return * @throws IOException */ public String releaseSearch() throws IOException { // 查询结果 HashMap<String, Object> map = new HashMap<String, Object>(); CategoryDto categoryDto = new CategoryDto(); categoryDto.setFlg(DeleteStatus.NORMAL); List<CategoryDto> items = categoryService.searchItems(categoryDto); List<Category> li = new ArrayList<Category>(); List<Category> liP = new ArrayList<Category>(); for(int i = 0; i<items.size(); i++){ CategoryDto dto = items.get(i); Category c = dto.getCategory(); // 所有的Category li.add(c); // 根节点的Category if(c.getCategory()==null||c.getCategory().getId()==null||"".equals(c.getCategory().getId())){ liP.add(c); } } // 拼接json for(int i = 0; i<liP.size(); i++){ Category c =liP.get(i); recursionFn(li, c); } // 得到json String str = modifyStr(returnStr.toString()); // 进行转换 JSONArray jsonObject = JSONArray.fromObject(str); try{ menuString = jsonObject.toString(); }catch(Exception e){ menuString = "ss"; } // json 返回值 JsonUtils.write("{\"text\": \".\", \"children\" :"+str+"}"); return Action.SUCCESS; } /** * 迭代出某一个Category下所有的 * @param list * @param category */ public void recursionFn(List<Category> list , Category category){ // 有子项目 if(hasChild(list,category)){ // 拼接： 项目ID returnStr.append("{\"id\": \""); returnStr.append(category.getId()); returnStr.append("\" , "); // 拼接： 项目名 returnStr.append("\"text\": \"Category -- "); returnStr.append(category.getName()); returnStr.append("\""); // 拼接： 父节点ID returnStr.append(",\"parentId\":"); if(category.getCategory()!=null){ returnStr.append("\""); returnStr.append(category.getCategory().getId()); returnStr.append("\""); }else{ returnStr.append("\""); returnStr.append("\""); } // 拼接： 城市 returnStr.append(",\"city\":"); returnStr.append("\""); returnStr.append("常州"); returnStr.append("\""); // 拼接： 活动时间 returnStr.append(",\"activityTime\":"); returnStr.append("\""); returnStr.append(StringUtils.join(DateHelper.defaultFormat(category.getBeginDatetime()), " - ", DateHelper.defaultFormat(category.getEndDatetime()))); returnStr.append("\""); returnStr.append(",\"children\":["); // 有Event if(hasEvent(category)){ List<Event> eventList = getEventList(category); for(int j = 0;j<eventList.size();j++){ // 拼接： eventID Event e = eventList.get(j); if(j==0){ returnStr.append("{\"id\": \""); }else { returnStr.append(",{\"id\": \""); } returnStr.append(e.getId()); returnStr.append("\" , "); // 拼接：Even名 returnStr.append("\"text\": \"Event -- "); returnStr.append(e.getName()); returnStr.append("\""); // 拼接： 父节点ID returnStr.append(",\"parentId\":"); returnStr.append("\""); returnStr.append(category.getId()); returnStr.append("\""); // 拼接： Event城市 returnStr.append(",\"city\":"); returnStr.append("\""); returnStr.append("常州"); returnStr.append("\""); // 拼接： Event活动时间 returnStr.append(",\"activityTime\":"); returnStr.append("\""); returnStr.append(StringUtils.join(DateHelper.defaultFormat(e.getBeginDatetime()), " - ", DateHelper.defaultFormat(e.getEndDatetime()))); returnStr.append("\""); returnStr.append(",\"leaf\":true},"); } } // 得到子项目，进行递归 List<Category> childList = getChildList(list,category); Iterator it = childList.iterator(); while(it.hasNext()){ Category n = (Category)it.next(); recursionFn(list,n); } returnStr.append("]},"); } else { // 没有子项目 // 拼接： 项目ID returnStr.append("{\"id\": \""); returnStr.append(category.getId()); returnStr.append("\" , "); // 拼接： 项目名 returnStr.append("\"text\": \"Category -- "); returnStr.append(category.getName()); returnStr.append("\""); // 拼接： 父节点ID returnStr.append(",\"parentId\": "); if(category.getCategory()!=null){ returnStr.append("\""); returnStr.append(category.getCategory().getId()); returnStr.append("\""); }else{ returnStr.append("\""); returnStr.append("\""); } // 拼接： 项目城市 returnStr.append(",\"city\":"); returnStr.append("\""); returnStr.append("常州"); returnStr.append("\""); // 拼接： 项目 活动时间 returnStr.append(",\"activityTime\":"); returnStr.append("\""); returnStr.append(StringUtils.join(DateHelper.defaultFormat(category.getBeginDatetime()), " - ", DateHelper.defaultFormat(category.getEndDatetime()))); returnStr.append("\""); // 有Event if(hasEvent(category)){ List<Event> eventList = getEventList(category); returnStr.append(",children:["); for(int j = 0;j<eventList.size();j++){ // 拼接： EventID Event e = eventList.get(j); if(j==0){ returnStr.append("{\"id\": \""); }else { returnStr.append(",{\"id\": \""); } returnStr.append(e.getId()); returnStr.append("\" , "); // 拼接： Event名 returnStr.append("\"text\": \"Event -- "); returnStr.append(e.getName()); returnStr.append("\""); // 拼接： 父节点ID returnStr.append(",\"parentId\":"); returnStr.append("\""); returnStr.append(category.getId()); returnStr.append("\""); // 拼接： Event城市 returnStr.append(",\"city\":"); returnStr.append("\""); returnStr.append("常州"); returnStr.append("\""); // 拼接： Event活动时间 returnStr.append(",\"activityTime\":"); returnStr.append("\""); returnStr.append(StringUtils.join(DateHelper.defaultFormat(e.getBeginDatetime()), " - ", DateHelper.defaultFormat(e.getEndDatetime()))); returnStr.append("\""); returnStr.append(",\"leaf\":true},"); } returnStr.append("]},"); } else { returnStr.append(",\"leaf\":true},"); } } } /** * 判断是否有子节点 * @param list * @param category * @return */ public boolean hasChild(List<Category> list, Category category){ //判断是否有子节点 return getChildList(list,category).size()>0?true:false; } /** * 判断是否有Event * @param list * @param category * @return */ public boolean hasEvent(Category category){ //判断是否有子节点 List<Event > items =getEventList(category); if(items.size()>0){ return true; } else { return false; } } /** * 修饰一下才能满足Extjs的Json格式 * @param returnStr * @return */ public String modifyStr(String returnStr){ //修饰一下才能满足Extjs的Json格式 return ("["+returnStr+"]").replaceAll(",]", "]").replaceAll(",,",","); } /** * 得到子节点列表 * @param list * @param category * @return */ public List<Category> getChildList(List<Category> list , Category category){ //得到子节点列表 List<Category> li = new ArrayList<Category>(); for(int i=0;i<list.size();i++){ Category n = list.get(i); if(n.getCategory()!=null){ if(n.getCategory().getId()==category.getId()){ li.add(n); } } } return li; } /** * 得到Event列表 * @param category * @return */ public List<Event> getEventList(Category category){ //得到子节点列表 List<Event> li = new ArrayList<Event>(); //判断是否有子节点 EventDto eventDto = new EventDto(); Category cg = new Category(); cg.setId(category.getId()); eventDto.setCategory(cg); eventDto.setFlg(DeleteStatus.NORMAL); List<EventDto> items = eventService.searchItems(eventDto); for(int i =0;i<items.size();i++){ EventDto dto = items.get(i); Event e = dto.getEvent(); if(e.getReleaseStatus().equals(ReleaseStatus.PUBLIC)){ li.add(e); } } return li; }下面贴出treegrid.json里面的json格式：
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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
{ "text": ".", "children": [ { "task": "Project: Shopping", "duration": 13.25, "user": "Tommy Maintz", "iconCls": "task-folder", "expanded": true, "children": [ { "task": "Housewares", "duration": 1.25, "user": "Tommy Maintz", "iconCls": "task-folder", "children": [ { "task": "Kitchen supplies", "duration": 0.25, "user": "Tommy Maintz", "leaf": true, "iconCls": "task" }, { "task": "Groceries", "duration": .4, "user": "Tommy Maintz", "leaf": true, "iconCls": "task", "done": true }, { "task": "Cleaning supplies", "duration": .4, "user": "Tommy Maintz", "leaf": true, "iconCls": "task" }, { "task": "Office supplies", "duration": .2, "user": "Tommy Maintz", "leaf": true, "iconCls": "task" } ] }, { "task": "Remodeling", "duration": 12, "user": "Tommy Maintz", "iconCls": "task-folder", "expanded": true, "children": [ { "task": "Retile kitchen", "duration": 6.5, "user": "Tommy Maintz", "leaf": true, "iconCls": "task" }, { "task": "Paint bedroom", "duration": 2.75, "user": "Tommy Maintz", "iconCls": "task-folder", "children": [ { "task": "Ceiling", "duration": 1.25, "user": "Tommy Maintz", "iconCls": "task", "leaf": true }, { "task": "Walls", "duration": 1.5, "user": "Tommy Maintz", "iconCls": "task", "leaf": true } ] }, { "task": "Decorate living room", "duration": 2.75, "user": "Tommy Maintz", "leaf": true, "iconCls": "task", "done": true }, { "task": "Fix lights", "duration": .75, "user": "Tommy Maintz", "leaf": true, "iconCls": "task", "done": true }, { "task": "Reattach screen door", "duration": 2, "user": "Tommy Maintz", "leaf": true, "iconCls": "task" } ] } ] }, { "task": "Project: Testing", "duration": 2, "user": "Core Team", "iconCls": "task-folder", "children": [ { "task": "Mac OSX", "duration": 0.75, "user": "Tommy Maintz", "iconCls": "task-folder", "children": [ { "task": "FireFox", "duration": 0.25, "user": "Tommy Maintz", "iconCls": "task", "leaf": true }, { "task": "Safari", "duration": 0.25, "user": "Tommy Maintz", "iconCls": "task", "leaf": true }, { "task": "Chrome", "duration": 0.25, "user": "Tommy Maintz", "iconCls": "task", "leaf": true } ] }, { "task": "Windows", "duration": 3.75, "user": "Darrell Meyer", "iconCls": "task-folder", "children": [ { "task": "FireFox", "duration": 0.25, "user": "Darrell Meyer", "iconCls": "task", "leaf": true }, { "task": "Safari", "duration": 0.25, "user": "Darrell Meyer", "iconCls": "task", "leaf": true }, { "task": "Chrome", "duration": 0.25, "user": "Darrell Meyer", "iconCls": "task", "leaf": true }, { "task": "Internet Exploder", "duration": 3, "user": "Darrell Meyer", "iconCls": "task", "leaf": true } ] }, { "task": "Linux", "duration": 0.5, "user": "Aaron Conran", "iconCls": "task-folder", "children": [ { "task": "FireFox", "duration": 0.25, "user": "Aaron Conran", "iconCls": "task", "leaf": true }, { "task": "Chrome", "duration": 0.25, "user": "Aaron Conran", "iconCls": "task", "leaf": true } ] } ] } ]}对比一下，就会发现
后台拼接json的代码------其中最关键的代码：
JsonUtils.write("{\"text\": \".\", \"children\" :"+str+"}");
是的，json数据前面必须加上 "{\"text\": \".\", \"children\" :" ，之前一直不知道，所以一直无法显示啊。
extjs4.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
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
// Category/Event查询model Ext.define('Task', { extend: 'Ext.data.Model', fields: [ {name: 'text', type: 'string'},// 列数据定义：Category名/Event名 {name: 'activityTime', type: 'string'},// 列数据定义：活动时间 {name: 'id', type: 'string'},// 列数据定义：CategoryID/EventID {name: 'city', type: 'string'}// 列数据定义：城市 ] }); // Category/Event查询Store var store = Ext.create('Ext.data.TreeStore', { model: 'Task', proxy: { type: 'ajax', url: 'release!releaseSearch' }, sorters: [{ property: 'leaf', direction: 'ASC' }, { property: 'text', direction: 'ASC' }], folderSort: true }); // Category/Event查询结果 var tree = Ext.create('Ext.tree.Panel', { width: 500, height: 300, collapsible: true, useArrows: true, rootVisible: false, store: store, multiSelect: true, columns: [{// Category名/Event名 xtype: 'treecolumn', text: Res.ReleaseEvent.NAME, width: 400, sortable: true, dataIndex: 'text', locked: true }, {// 活动时间 text: Res.ReleaseEvent.ACTIVITY_TIME, width: 200, dataIndex: 'activityTime', align: 'center', sortable: true }, {// 城市 text: Res.ReleaseEvent.CITY, width: 200, dataIndex: 'city', align: 'center', sortable: true }] }); 0 1
- extjs4.2 动态加载树 treePanel
- Extjs4.2 TreePanel+Asp.net mvc 动态加载节点
- extjs4学习资料(动态加载treePanel异常一)
- ExtJS4.X TreeStore,TreePanel 动态加载菜单和Tab页
- ExtJS4 TreePanel 加载数据 J2EE
- Extjs4---treepanel+struts2异步加载
- Extjs4 treePanel异步加载菜单
- extjs4 动态加载树
- extjs4.2 treePanel 实现动态的增、删、改
- ExtJs TreePanel 动态加载
- extjs4 treepanel动态改变行高度例子
- EXTJs4 TreePanel
- extjs4.0 treepanel节点的选中、展开！ 数据的重新加载! checked树
- ExtJS4.0.7 树组建treePanel简单介绍
- extjs4 treepanel、 树、节点的操作
- extjs4.2 隐藏treePanel 的节点
- ExtJs4 动态加载js
- ExtJs4 动态加载
- MySQL内存使用-全局共享
- poj 3186 Treats for the Cows
- Javascript 初学者应知的 24 条最佳实践
- 利用tom的SHOW_SPACE脚本实验验证表插入删除带来的redo和工作原理
- 加不加
- extjs4.2 动态加载树 treePanel
- 为服务器程序增加清理僵尸进程机制
- ORA-09925: Unable to create audit trail file引发的错误
- 【有源码】ViewPager+Fragment+RadioButton替代TabActivity
- 《Linux设备驱动开发详解》-- 内核定时器
- 在Android模拟器上安装和卸载APK包
- POJ 2431 Expedition
- fflush函数
- Matlab2014a command window出现乱码
