TB.TreeGrid 樹形列表 Asp.net自訂控制項

很久之前寫的控制項,發布在codeplex上。包括原始碼和Demo。這裡是Demo下載，希望大家繼續完善。

支援Asp.net2.0，MS Ajax，Postback，CallBack(可用來載入子節點)，Event(Select,Expend,Collaspe,RowCreate,RowDataBound,RowCommand)，DataBind

使用方法與TreeView和GridView相似。

展現

文法：

 

原理：

這個控制項主要類與MS TreeView相似，包括TreeGrid、TreeGridNode、TreeGridRow三個核心類。TreeGridNode表示一個節點，可以有DataItem屬性，TreeGridRow表示節點所在的行。TreeGrid當然就是包括Nodes的那個樹。另外，還有TreeGridNode和TreeGridRow的集合類。

與TreeView區別在於不同的展現方式和檢視狀態管理。

TreeGrid使用GridView的展現方式和文法，並且在用戶端可以控制節點的展開和摺疊。與GridView的展現方式和文法需要定義Template，用戶端節點的展開和摺疊使用Javascript控制就可以了。

Javascript
 1 function TreeGrid_ToggleNode(data, index, toggleBy, indicator, lineType, relation)
 2 {
 3     if (!toggleBy) {return;}
 4     
 5     var nodeTd = WebForm_GetParentByTagName(toggleBy, "TD");                // 獲得節點所在TD
 6     if (!nodeTd) {return;}
 7     var nodeTr = WebForm_GetParentByTagName(nodeTd, "TR");                  // 獲得節點所在TR
 8     if (!nodeTr) {return;}
 9     var nodeR = TreeGrid_FindNodeRelationByNodeId(relation, nodeTd.id);     // 根據td.id尋找在relation對應的關係
10     if (!nodeR) {return;}
11     
12     TreeGrid_ToggleNodeExpandState(nodeTd, nodeTr, nodeR);
13     
14     var img = indicator.childNodes[0];
15     var newExpandState;
16     try {
17         if (nodeR.e == "e") {
18             newExpandState = "e";
19             if ((typeof(img) != "undefined") && (img != null)) {
20                 if (lineType == "l") {
21                     img.src = data.images[15];
22                 }
23                 else if (lineType == "t") {
24                     img.src = data.images[12];
25                 }
26                 else if (lineType == "-") {
27                     img.src = data.images[18];
28                 }
29                 else {
30                     img.src = data.images[5];
31                 }
32                 img.alt = data.collapseToolTip.replace(/\{0\}/, "");
33             }
34         }
35         else {
36             newExpandState = "c";
37             if ((typeof(img) != "undefined") && (img != null)) {
38                 if (lineType == "l") {
39                     img.src = data.images[14];
40                 }
41                 else if (lineType == "t") {
42                     img.src = data.images[11];
43                 }
44                 else if (lineType == "-") {
45                     img.src = data.images[17];
46                 }
47                 else {
48                     img.src = data.images[4];
49                 }
50                 img.alt = data.expandToolTip.replace(/\{0\}/, "");
51             }
52         }
53     }
54     catch(e) {}
55     data.expandState.value =  data.expandState.value.substring(0, index) + newExpandState + data.expandState.value.slice(index + 1);
56 

 

檢視狀態管理需要控制項需要根據ID的進行檢視狀態載入，而不是讓ASP.NET 根據控制項在頁的控制項樹中的索引來載入控制項的檢視狀態資訊。這是因為控制項需要使用層次遍曆載入檢視狀態造成的。