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

本文介绍了一个用于工资项目设置的应用程序界面，通过Ext.NET框架实现。应用包含一个可编辑的树形面板，用于构建和组织工资条目，并提供网格面板显示可供拖拽到树中的字段。此外，还实现了节点编辑、删除及上下文菜单等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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