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控制就可以了。

 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对应的关系
     if (!nodeR) {return;}
     
     TreeGrid_ToggleNodeExpandState(nodeTd, nodeTr, nodeR);
     
     var img = indicator.childNodes[0];
     var newExpandState;
     try {
         if (nodeR.e == "e") {
             newExpandState = "e";
             if ((typeof(img) != "undefined") && (img != null)) {
                 if (lineType == "l") {
                     img.src = data.images[15];
                 }
                 else if (lineType == "t") {
                     img.src = data.images[12];
                 }
                 else if (lineType == "-") {
                     img.src = data.images[18];
                 }
                 else {
                     img.src = data.images[5];
                 }
                 img.alt = data.collapseToolTip.replace(/\{0\}/, "");
             }
         }
         else {
             newExpandState = "c";
             if ((typeof(img) != "undefined") && (img != null)) {
                 if (lineType == "l") {
                     img.src = data.images[14];
                 }
                 else if (lineType == "t") {
                     img.src = data.images[11];
                 }
                 else if (lineType == "-") {
                     img.src = data.images[17];
                 }
                 else {
                     img.src = data.images[4];
                 }
                 img.alt = data.expandToolTip.replace(/\{0\}/, "");
             }
         }
     }
     catch(e) {}
     data.expandState.value =  data.expandState.value.substring(0, index) + newExpandState + data.expandState.value.slice(index + 1);
 

 

视图状态管理需要控件需要根据ID的进行视图状态加载，而不是让ASP.NET 根据控件在页的控件树中的索引来加载控件的视图状态信息。这是因为控件需要使用层次遍历加载视图状态造成的。