Tree客户端编辑，用store保存遍历后的TreeNode，传入到后台，后台用反序列解析出ArrayList，保存入数据库...

1 <% @ Page Language = " C# " AutoEventWireup = " true " CodeFile = " fieldMatch.aspx.cs " Inherits = " gz_fieldMatch " %>
2
3   <% @ Register Assembly = " Ext.Net " Namespace = " Ext.Net " TagPrefix = " ext " %>
4
5 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
6
7 < html xmlns = " http://www.w3.org/1999/xhtml " >
8 < head id = " Head1 " runat = " server " >
9 < title > 工资项目设置 </ title >
10 < style type = " text/css " >
11
12
13 list {
14 font - size : 48pt;
15 font - weight: bold;
16 color: Blue;
17
18 </ style >
19
20 < script type = " text/javascript " >
21 var beforenodedrop = function (e) {
22 // debugger;
23
24 if (Ext.isArray(e.data.selections)) {
25 e.cancel = false ;
26 e.dropNode = [];
27 var rec;
28
29 for (var i = 0 ; i < e.data.selections.length; i ++ ) {
30 rec = e.data.selections[i];
31
32 e.dropNode.push( this .loader.createNode({
33 text : rec. get ( " field_caption " ),
34 leaf : true ,
35 fieldname : rec. get ( " field_name " ) // 这个是自定义属性
36 }));
37 // debugger;
38 e.data.grid.store.remove(rec);
39 }
40 // alert("ok");
41 return true ;
42 }
43 }
44
45 function myAppend(tree,node,flag)
46 {
47 if (node.leaf != true )
48 {
49 tree.appendChild(node, " 请输入节点名 " ,flag);
50 return true ;
51 }
52 else
53 {
54 alert( " 该节点为数据库字段不能添加下级目录 " );
55 }
56
57 }
58 // #{TreePanel1}.menuNode
59
60
61 function showMenu(node, e){
62 var menu = TreeContextMenu;
63 if (node.browserEvent) {
64 this .menuNode = this .getRootNode();
65 menu.nodeName = "" ;
66 this .getSelectionModel().clearSelections();
67 e = node;
68 }
69 else {
70 this .menuNode = node;
71 menu.nodeName = " 当前节点名称： " + node.text;
72 node.select();
73 }
74
75 menu.showAt([e.getXY()[ 0 ], e.getXY()[ 1 ] + 18 ]);
76 e.stopEvent();
77 }
78
79 var nodevalue = "" ; // 定义一个全局变量，保存节点的id或值
80 var temp = [];
81 function saveTree(mytree,mystore)
82 {
83 // alert("saveTree");
84 var temp1 = [];
85 temp = temp1;
86 debugger;
87 mystore.removeAll();
88
89 getAllRoot(mytree,mystore);
90 var i = 1 ;
91
92 var lstAddRecord = new Array();
93
94 mystore.each(function(record) {
95
96 lstAddRecord.push(record.data);
97
98 });
99
100 document.getElementById( " HiddenField1 " ).value = Ext.encode(lstAddRecord);
101 // #{HiddenField1}.value =
102 // Ext.Ajax.request({
103
104 //
105 // url: 'gz/fieldMatch.aspx?yxq=1',
106 //
107 // method: 'POST',
108 // params: {strJson1:"yxq"
109 // // params: {A:1,B:2,strJson:Ext.encode(lstAddRecord)
110 //
111 // }
112
113 // });
114
115
116
117
118
119 }
120
121 function getAllRoot(value,mystore){
122 var rootNode = value.getRootNode(); // 获取根节点
123 var level = 0 ;
124 findchildnode(rootNode,mystore,level); // 开始递归
125 nodevalue = temp.join( " , " );
126 // alert(nodevalue);
127 return nodevalue;
128 }
129
130
131
132
133
134
135
136 // 获取所有的子节点
137 function findchildnode(node,mystore,level){
138 var idx = 1 ;
139 level = level + 1 ;
140
141 var childnodes = node.childNodes;
142 Ext.each(childnodes, function (){ // 从节点中取出子节点依次遍历
143 var nd = this ;
144
145 temp.push(nd.text);
146 debugger;
147 var PersonRecord = Ext.data.Record.create([
148 {name: ' id ' , type: ' string ' },
149 {name: ' fieldname ' , type: ' string ' },
150 {name: ' caption ' , type: ' string ' },
151 {name: ' level ' , type: ' int ' },
152 {name: ' seq_no ' , type: ' int ' },
153 {name: ' isfolder ' , type: ' int ' },
154 {name: ' parentid ' , type: ' string ' },
155 {name: ' childcount ' , type: ' int ' },
156 {name: ' isfield ' , type: ' int ' },
157
158
159
160 ]);
161 var _isfolder;
162 if (nd.hasChildNodes())
163 _isfolder = 1
164 else
165 _isfolder = 0 ;
166
167 mystore.add(
168
169 new PersonRecord({
170 id: nd.id,
171 fieldname:nd.attributes[ " fieldname " ],
172 　　 caption: nd.text,
173 level:level,
174 seq_no:idx,
175 　　 isfolder: _isfolder,
176 　　 parentid: node.id,
177 　　 childcount: nd.childNodes.length,
178 　　 isfield: nd.leaf
179 　　 })
180 　　 );
181
182
183 idx = idx + 1 ;
184
185
186
187 if (nd.hasChildNodes()){ // 判断子节点下是否存在子节点
188 findchildnode(nd,mystore,level); // 如果存在子节点 递归
189 }
190 });
191 }
192
193
194 </ script >
195
196
197
198 </ head >
199 < body >
200 < form id = " form1 " runat = " server " >
201
202 < ext:ResourceManager ID = " ResourceManager1 " runat = " server " >
203 </ ext:ResourceManager >
204 < ext:Store ID = " Store1 " runat = " server " >
205 </ ext:Store >
206 < ext:Store ID = " Store2 " runat = " server "
207 >
208
209
210 <%--< Reader >
211 < ext:ArrayReader >
212 < Fields >
213 < ext:RecordField Name = " id " />
214 < ext:RecordField Name = " name " Type = " String " />
215 < ext:RecordField Name = " level " Type = " Int " />
216 < ext:RecordField Name = " seq_no " Type = " Int " />
217 < ext:RecordField Name = " isfolder " Type = " Int " />
218 </ Fields >
219 </ ext:ArrayReader >
220 </ Reader >--%>
221
222
223 </ ext:Store >
224
225
226
227
228 < ext:Menu ID = " TreeContextMenu " runat = " server " EnableScrolling = " false " >
229 < Items >
230 < ext:MenuTextItem ID = " NodeName " runat = " server " Cls = " bold-text " />
231 < ext:MenuSeparator />
232 < ext:MenuItem ID = " MenuItem1 " runat = " server " Text = " 修改节点名称 " Icon = " Pencil " >
233 < Listeners >
234 < Click Handler = " #{TreePanel1}.startEdit(#{TreePanel1}.menuNode, 10); " />
235 </ Listeners >
236 </ ext:MenuItem >
237
238 < ext:MenuItem ID = " MenuItem2 " runat = " server " Text = " 删除节点 " Icon = " Delete " >
239 < Listeners >
240 < Click Handler = " #{TreePanel1}.removeNode(#{TreePanel1}.menuNode); " />
241 </ Listeners >
242 </ ext:MenuItem >
243
244 < ext:MenuItem ID = " MenuItem3 " runat = " server " Text = " 追加添加子节点 " Icon = " Add " OnClientClick = " myAppend(#{TreePanel1},#{TreePanel1}.menuNode,false) " >
245
246 </ ext:MenuItem >
247
248 < ext:MenuItem ID = " MenuItem4 " runat = " server " Text = " 插入子节点 " Icon = " ArrowRight " OnClientClick = " myAppend(#{TreePanel1},#{TreePanel1}.menuNode,true) " >
249
250 </ ext:MenuItem >
251 </ Items >
252 < Listeners >
253 < Show Handler = " #{NodeName}.el.update(this.nodeName); " />
254 </ Listeners >
255 </ ext:Menu >
256
257
258
259 < ext:Viewport ID = " Viewport1 " runat = " server " Layout = " Border " >
260
261 < Items >
262
263
264
265
266 < ext:Panel ID = " pnlTree "
267 runat = " server "
268 Title = " West "
269 Region = " West "
270 Layout = " Fit "
271 Width = " 340 "
272 Header = " false "
273
274 MinWidth = " 340 "
275 MaxWidth = " 500 "
276 Split = " true "
277 Collapsible = " true "
278 >
279 < Items >
280
281
282
283 < ext:RowLayout ID = " RowLayout2 " runat = " server " >
284 < Rows >
285 < ext:LayoutRow >
286 < ext:Panel ID = " Panel2 " runat = " server " Title = " Initial Height = 100px " Height = " 40 " Header = " false " />
287 </ ext:LayoutRow >
288
289 < ext:LayoutRow RowHeight = " 0.8 " >
290
291
292 < ext:TreePanel runat = " server "
293 Title = " 工资条目表 "
294 ID = " TreePanel1 "
295 DDGroup = " grid2tree1 "
296 EnableDD = " true "
297 EnableDrag = " true "
298 Header = " false "
299 AutoScroll = " true "
300
301
302 >
303 <%-- 这里的Mode = " Remote " 属性打开后，树形无法拖动上去 --%>
304
305 < Editors >
306 < ext:TreeEditor ID = " TreeEditor1 " runat = " server " CancelOnBlur = " true " >
307 < Field >
308 < ext:TextField ID = " TextField1 " runat = " server " />
309 </ Field >
310 </ ext:TreeEditor >
311 </ Editors >
312
313
314
315 < TopBar >
316 < ext:Toolbar ID = " Toolbar1 " runat = " server " >
317 < Items >
318 < ext:Button ID = " Button1 " runat = " server " Text = " 全部展开 " >
319 < Listeners >
320 < Click Handler = " #{TreePanel1}.expandAll(); " />
321 </ Listeners >
322 </ ext:Button >
323 < ext:Button ID = " Button2 " runat = " server " Text = " 收缩全部 " >
324 < Listeners >
325 < Click Handler = " #{TreePanel1}.collapseAll(); " />
326 </ Listeners >
327 </ ext:Button >
328 </ Items >
329 </ ext:Toolbar >
330 </ TopBar >
331 <%-- < Root >
332 < ext:TreeNode Text = " 工资项目表 " Expanded = " true " NodeID = " 0 " >
333 < Nodes >
334 < ext:TreeNode Text = " 基本工资 " >
335 < Nodes >
336 < ext:TreeNode Text = " jb1 " ></ ext:TreeNode >
337 < ext:TreeNode Text = " jb2 " ></ ext:TreeNode >
338
339
340 </ Nodes >
341 </ ext:TreeNode >
342 < ext:TreeNode Text = " 岗位工资 " >
343 < Nodes >
344 < ext:TreeNode Text = " gw1 " ></ ext:TreeNode >
345 < ext:TreeNode Text = " gw2 " ></ ext:TreeNode >
346
347
348 </ Nodes >
349 </ ext:TreeNode >
350 </ Nodes >
351 </ ext:TreeNode >
352 </ Root >--%>
353
354 < Listeners >
355
356 < BeforeNodeDrop Fn = " beforenodedrop " StopEvent = " true " />
357 < ContextMenu Fn = " showMenu " StopEvent = " true " />
358
359
360 </ Listeners >
361
362
363
364
365
366 </ ext:TreePanel >
367
368 </ ext:LayoutRow >
369
370 < ext:LayoutRow >
371 < ext:Panel ID = " Panel4 " runat = " server "
372 Height = " 70 "
373 LabelWidth = " 60 "
374 ButtonAlign = " Right "
375 Border = " false "
376 Header = " false "
377 Layout = " Fit "
378 PaddingSummary = " 4px 4px 4px "
379 >
380 < Items >
381 < ext:TextField ID = " txtNodeName " runat = " server " FieldLabel = " 节点名称 " BlankText = " Name is required " />
382
383 </ Items >
384 < Buttons >
385 < ext:Button ID = " btn_save " runat = " server " Text = " 保存 " OnClientClick = " saveTree(#{TreePanel1},#{Store2}); " OnDirectClick = " SaveNodes " Icon = " Disk " >
386
387 </ ext:Button >
388
389
390
391 </ Buttons >
392
393 </ ext:Panel >
394
395
396
397 </ ext:LayoutRow >
398
399
400
401 </ Rows >
402 </ ext:RowLayout >
403
404
405 </ Items >
406 </ ext:Panel >
407
408 < ext:Panel ID = " Panel1 "
409 runat = " server "
410 Title = " Center "
411 Header = " false "
412 Region = " Center " >
413 < Items >
414
415 < ext:RowLayout ID = " RowLayout1 " runat = " server " >
416 < Rows >
417
418
419
420
421 < ext:LayoutRow RowHeight = " 1 " >
422 < ext:GridPanel
423 ID = " grdFolder "
424 runat = " server "
425 Header = " true "
426 Title = " folder "
427 EnableDragDrop = " true "
428 DDGroup = " grid2tree1 "
429 AutoExpandColumn = " field_name "
430
431 AutoWidth = " true "
432 TrackMouseOver = " true "
433 ColumnLines = " true "
434
435 StoreID = " Store1 "
436
437 >
438 < ColumnModel ID = " ColumnModel1 " runat = " server " >
439 < Columns >
440 < Ext:Column Header = " 字段名 " DataIndex = " field_name " Width = " 150 " Sortable = " false " Align = " Center " >
441 </ Ext:Column >
442 < Ext:Column Header = " 字段含义 " DataIndex = " field_caption " Width = " 150 " Sortable = " false " Align = " Center " >
443 </ Ext:Column >
444 < Ext:Column Header = " 字段类型 " DataIndex = " datatype " Width = " 200 " Sortable = " false " Align = " Center " >
445 </ Ext:Column >
446 < Ext:Column Header = " 字段长度 " DataIndex = " datalen " Width = " 200 " Sortable = " false " Align = " Center " >
447 </ Ext:Column >
448 < Ext:Column Header = " 小数位数 " DataIndex = " xscale " Width = " 200 " Sortable = " false " Align = " Center " >
449 </ Ext:Column >
450
451 </ Columns >
452
453
454 </ ColumnModel >
455 < SelectionModel >
456 < ext:RowSelectionModel ID = " SelectedRowModel1 " runat = " server " />
457 </ SelectionModel >
458
459 </ ext:GridPanel >
460 </ ext:LayoutRow >
461 </ Rows >
462 </ ext:RowLayout >
463 </ Items >
464 </ ext:Panel >
465 </ Items >
466 </ ext:Viewport >
467 < asp:HiddenField ID = " HiddenField1 " runat = " server " />
468 </ form >
469 </ body >
470 </ html >
471

转载于:https://www.cnblogs.com/yangxq5858/archive/2011/02/05/1949238.html