Ext.net treegrid

In the system, data items with multi-attribute columns and hierarchical relationships are often processed. In Ext. net, in this case, a better choice is to use treegrid for processing. Treegrid is actually an inheritance and extension of treepanel. One time his data source does not support store binding, instead, it uses a set of treenode, each treenode extends the column attributes displayed by adding the configitem of customattributes. Load the data in the business by configuring the treeloader of treegrid. The following is a simple sample code:

Foreground html

1 <Ext: treegrid id = "TG" runat = "server" Title = "treegrid" enabledd = "true"> 2 <topbar> 3 <Ext: toolbar runat = "server"> 4 <items> 5 <Ext: button text = "Update" runat = "server" onclientclick = "updatenodeinfo ()"> 6 </ext: button> 7 </items> 8 </ext: toolbar> 9 </topbar> 10 <columns> 11 <Ext: treegridcolumn width = "150" header = "name" dataindex = "name"/> 12 <Ext: treegridcolumn width = "150" header = "Age" dataindex = "Age"/> 13 <Ext: treegridcolumn width = "150" header = "gender" dataindex = "sex"/> 14 <Ext: treegridcolumn width = "150" header = "Remarks" dataindex = "remark"/> 15 </columns> 16 <root> 17 <Ext: asynctreenode nodeid = "root" text = "root" expandable = "true"> 18 </ext: asynctreenode> 19 </root> 20 <loader> 21 <Ext: treeloader dataurl = "/home/loadnodes/"> 22 <baseparams> 23 <Ext: parameter name = "ID" value = "node. ID "mode =" Raw "/> 24 <Ext: parameter name =" PID "value =" node. attributes. name "mode =" Raw "/> 25 </baseparams> 26 </ext: treeloader> 27 </loader> 28 <selectionmodel> 29 <Ext: defaultselectionmodel runat = "server"> 30 </ext: defaultselectionmodel> 31 </selectionmodel> 32 </ext: treegrid>

Business data code in the background controler

1 Public String loadnodes (string ID, string PID) 2 {3 treenodecollection nodelist = new treenodecollection (); 4 for (INT I = 0; I <10; I ++) 5 {6 random ran = new random (); 7 var Index = ran. next (); 8 asynctreenode asynode = new asynctreenode () 9 {10 text = string. format ("Zhang San {0}", I), 11 nodeid = I. tostring (), 12 leaf = index % 2 = 0? True: false, 13}; 14 asynode. customattributes. add (New configitem ("name", asynode. text, parametermode. value); 15 asynode. customattributes. add (New configitem ("Age", (I + 10 ). tostring (), parametermode. value); 16 asynode. customattributes. add (New configitem ("sex", (index % 2 = 0? True: false). tostring (), parametermode. Value); 17 asynode. customattributes. Add (New configitem ("remark", "remarks .... "+ I, parametermode. Value); 18 nodelist. Add (asynode); 19 thread. Sleep (10); 20} 21 return nodelist. tojson (); 22}

So how can we update the data in treegrid? One method is to reload the data items of the editing node after the data is updated, and the other is to modify the value of the foreground interface without reloading after the update is successful. In contrast, the latter has a higher performance and reduces the pressure on servers and databases. How can we update data on the front-end interface? Here we will briefly introduce a method to illustrate how to update the interface. For example, we will update the selected row (actually a treenode/asynctreenode) data:

JS Code for Data Update Processing

1 function updatenodeinfo () {2 var node = Tg. getselectionmodel (). selnode; 3 if (node) {4 var nodeel = node. UI. elnode; 5 var columntest1 = nodeel. childnodes [0]. childnodes [0]; 6 var columntest2 = nodeel. childnodes [1]. childnodes [0]; 7 var columntest3 = nodeel. childnodes [2]. childnodes [0]; 8 var columntest4 = nodeel. childnodes [3]. childnodes [0]; 9 node. UI. node. attributes. name = columntest1.innerhtml = 'wang wu'; 10 node. UI. node. attributes. age = columntest2.innerhtml = '000000'; 11 node. UI. node. attributes. sex = columntest3.innerhtml = 'boys'; 12 node. UI. node. attributes. remark = columntest4.innerhtml = 'wang Wu ..... '; 13} 14}