上面的圖檔是一個簡單的樹，使用Ext.Net來建立這樣的樹結構非常簡單，代碼如下：
這是一個使用标記來建立的樹，我們還可以使用伺服器端代碼來建立，代碼如下：
在上面的代碼中，我們都是一次性加載了所有節點，雖然在開發過程中比較友善，但與異步加載來說更加的耗資源，尤其是當樹節點比較多的時候。
接下來讓我們來建構一個異步加載的樹。
在樹的定義中南，我們為根節點添加了NodeID，然後為Tree添加了TreeStore，TreeStore通過ajax代理擷取資料，擷取資料的url為tree-handler.ashx處理程式，我們的處理程式代碼為：
在處理方法中，最主要的是第一句，從請求中得到node id，拿到node id之後，我們可以根據node id進行子節點的擷取操作，我們的代碼中是為了進行示範，是以并沒有擷取相應子節點的操作。
如果是在MVC中，我們可以使用StoreResult來作為Action的資料傳回類型。
通常情況下，樹節點所包含的的資訊并不是我們完整的資料，我們需要添加一些自定義的屬性，Ext.Net為我們提供這種功能：
第一步，我們需要在TreeStore中添加一個Model，這個Model中的字段就是我們自定義的屬性。
第二步，在生成節點的時候為我們自定義屬性指派。
第三步，在前台代碼中使用自定義屬性
我們在樹的底部添加一個panel，用來顯示自定義的星系，然後添加一個事件，在節點選中的時候來更新panel的顯示
事件的處理方法如下：
在跟蹤事件處理過程中，我們可以看到自定義屬性的值：
它是和樹節點的其他屬性一起儲存的，是以我們在使用record的時候，還可以友善的使用樹節點的其他屬性。
這個示例的效果圖如下：
TreeGrid的效果如下圖：
類似于GridPanel，有标題、多列的樣式等。
又不同于GridPanel，因為它可以像樹一樣顯示一個展開、折疊圖示。
我們來看一下這個例子的代碼：
TreePanel的Store與之前例子相同，Root的配置也與之前的例子相同，唯一不同的是TreePanel中多了一個ColumnModel節點，這裡面的配置和GridPanel的ColumnModel相同，TreeColumn列用來顯示樹的列，用起來很友善。
2021年9月 北京、西安兩地，高薪誠聘 .NET工程師，請私信聯系！
如果認為此文對您有幫助，别忘了支援一下哦！
聲明：本部落格原創文字隻代表本人工作中在某一時間内總結的觀點或結論，與本人所在機關沒有直接利益關系。轉載時請在文章頁面明顯位置給出原文連結。