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         }