asp.net 2.0 TreeView客户端个性化控制

最新推荐文章于 2019-04-10 10:11:55 发布

jqrsdsy

最新推荐文章于 2019-04-10 10:11:55 发布

阅读量689

点赞数

分类专栏： ASP.NET 文章标签： asp.net javascript null 脚本 table .net

ASP.NET 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

asp.net 2.0 的 TreeView 控件功能虽说强大,但其客户端控制很逊色,本文将讲解 TreeView 的客户端实现原理,并实现两个个性化操作：
(1) 节点的全部打开和关闭；
Client Side Expand/Collapse All Nodes For ASP.NET 2.0 TreeView.
(2) 只打开一个节点(关闭其他兄弟节点)。
Just one expanded node in ASP.NET 2.0 TreeView (When a client expand one node all other will collaps)
用记事本打开页面源代码，可以找到一下两个脚本引用：

< script src ="/WebUI/WebResource.axd?d=RAQeBcDUNuP9iuS8q3tNEw2&t=633300220640000000" type ="text/javascript" ></ script >
< script src ="/WebUI/WebResource.axd?d=JuTdJhq3NM8Jq_RhssAkEg2&t=633300220640000000" type ="text/javascript" ></ script >

将"/WebUI /WebResource.axd?d=RAQeBcDUNuP9iuS8q3tNEw2&t=633300220640000000" 拷到地址栏尾，下载脚本，并以 .js 命名，另一个同样操作。分析第二个脚本文件，可以看到TreeView的很多客户端函数，其中关键的一个 TreeView_ToggleNode 就是客户端点击时触发的事件。
要想做个性化的操作，就得从 TreeView_ToggleNode 事件下手。我们无法更改.net封装好的脚本，只有“重写”。所谓的重写就是在原来的函数之后添加一个同名函数（因为js对于同名函数只调用最后一个）。

TreeView_ToggleNode 的原函数：

1. 节点的全部打开和关闭(Client Side Expand/Collapse All Nodes)

2. 只打开一个节点,关闭其他兄弟节点(Just one expanded node, all other will collaps)

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
     < title > LeftMenu_Tree </ title >
</ head >
< body bgcolor ="#DDEDFD" >
     < form id ="form1" runat ="server" >
         < a href ="javascript:TreeviewExpandCollapseAll('<%=TreeView1.ClientID%>', true)" > Expand
            All </ a > , < a href ="javascript:TreeviewExpandCollapseAll('<%=TreeView1.ClientID%>', false)" >
                Collapse All </ a >
         < asp:TreeView ID ="TreeView1" SkinID ="tvClass" runat ="server" ShowLines ="true" NodeWrap ="false" >
         </ asp:TreeView >
     </ form >
</ body >
</ html >

< script language ="javascript" >
// 2. 只打开一个节点,关闭其他兄弟节点(Just one expanded node, all other will collaps)
function TreeView_ToggleNode(data, index, node, lineType, children)
{
     var img = node.childNodes[ 0 ];
     var newExpandState;
     try {
         // ***折叠兄弟节点 (Collapse Brothers)-----
        CollapseBrothers(data,children);
         // ---------------------------------------

         if (children.style.display == " none " )
         {
            children.style.display = " block " ;
            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 /} / , TreeView_GetNodeText(node));
            }
        }
         else
         {
            children.style.display = " none " ;
            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 /} / , TreeView_GetNodeText(node));
            }
        }
    }
     catch (e) {}
    data.expandState.value =   data.expandState.value.substring( 0 , index) + newExpandState + data.expandState.value.slice(index + 1 );
}

// 折叠兄弟节点 (Collapse Brothers)
function CollapseBrothers(data,childContainer)
{
     var parent = childContainer.parentNode;
     for (i = 0 ; i < parent.childNodes.length; i ++ )
     {
         if (parent.childNodes[i].tagName.toLowerCase() == " div " )
         {
             if (parent.childNodes[i].id != childContainer.id)
             {
                parent.childNodes[i].style.display = " none "
            }
        }
         else if (parent.childNodes[i].tagName.toLowerCase() == " table " )
         {
             var treeLinks = parent.childNodes[i].getElementsByTagName( " a " );
             if (treeLinks.length > 2 )
             {
                 var j = 0 ;
                 if (treeLinks[j].firstChild.tagName)
                 {
                     if (treeLinks[j].firstChild.tagName.toLowerCase() == " img " )
                     {
                         var img = treeLinks[j].firstChild;
                         if (i == 0 )
                            img.src = data.images[ 8 ];
                         else if (i == parent.childNodes.length - 2 )
                            img.src = data.images[ 14 ];
                         else
                            img.src = data.images[ 11 ];
                    }
                }
            }
        }
    }
}
// -----------------------------------------------------------------------------
</ script >