Ext.net TreeGrid

　　系统中常会面临处理一些具有多属性列的而且具有层级关系的数据项，Ext.Net中 这种情况下一个比较好的选择就是使用TreeGrid来处理。TreeGrid其实是对TreePanel的继承和扩展，一次他的数据源是不支持Store来绑定的，而是通过TreeNode的集合，每个TreeNode通过添加CustomAttributes的ConfigItem来扩展显示的列属性。通过配置TreeGrid的TreeLoader来加载业务中的数据。下面给出一个简单的样例代码： 

前台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="更新" runat="server" OnClientClick="UpdateNodeInfo()">

 6                             </ext:Button>

 7                         </Items>

 8                     </ext:Toolbar>

 9                 </TopBar>

10                 <Columns>

11                     <ext:TreeGridColumn Width="150" Header="姓名" DataIndex="Name" />

12                     <ext:TreeGridColumn Width="150" Header="年龄" DataIndex="Age" />

13                     <ext:TreeGridColumn Width="150" Header="性别" DataIndex="Sex" />

14                     <ext:TreeGridColumn Width="150" Header="备注" 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>

后台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("张三{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", "备注信息。。。。" + i, ParameterMode.Value));

18                 nodeList.Add(asyNode);

19                 Thread.Sleep(10);

20             }

21             return nodeList.ToJson();

22         }

 那么我们如何更新TreeGrid中的数据呢？一个方法是更新了数据之后，重新加载编辑节点的数据项；另一个是更新成功后，不重新加载，只是修改前台界面的值。对比之下后者的性能跟定更高，对服务器和数据库来说减小了压力，那么我们如何来更新前台界面上的数据呢？这里简单介绍一个方法，举例说明更新界面方法，比如我们更新选中行（其实是个TreeNode/AsyncTreeNode)数据：

数据更新处理Js code

 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 = '王五';

10                 node.ui.node.attributes.Age = columnTest2.innerHTML = '100';

11                 node.ui.node.attributes.Sex = columnTest3.innerHTML = 'boy';

12                 node.ui.node.attributes.Remark = columnTest4.innerHTML = '王五.....';

13             }

14         }