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

2019-06-20 08:48:21来源：阅读 ()

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

;;TreeView_ToggleNode;的原函数：

function;TreeView_ToggleNode(data,;index,;node,;lineType,;children);{
var;img;=;node.childNodes[0];
var;newExpandState;
try;{
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);
}

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

<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">
//-----------------------------------------------------------------------------
function;$(s){return;document.getElementById(s);}
function;isNull(_sVal){return;(_sVal;==;"";||;_sVal;==;null;||;_sVal;==;"undefined");}
function;TreeviewExpandCollapseAll(treeViewId,;expandAll)
{
var;displayState;=;(expandAll;==;true;?;"none";:;"block");
var;treeView;=;$(treeViewId);
if(treeView)
{
var;treeLinks;=;treeView.getElementsByTagName("a");
var;nodeCount;=;treeLinks.length;
var;flag;=;true;
for(i=0;i<nodeCount;i++)
{
if(treeLinks[i].firstChild.tagName)
{
if(treeLinks[i].firstChild.tagName.toLowerCase();==;"img")
{
var;node;=;treeLinks[i];
var;level;=;parseInt(node.id.substr(node.id.length;-;1),10);
var;childContainer;=;GetParentByTagName("table",;node).nextSibling;
if(!isNull(childContainer))
{
if(flag)
{
if(childContainer.style.display;==;displayState)
{
TreeView_ToggleNode(eval(treeViewId;+"_Data"),level,node,'r',childContainer);
}
flag;=;false;
}
else
{
if(childContainer.style.display;==;displayState)
{
TreeView_ToggleNode(eval(treeViewId;+"_Data"),level,node,'l',childContainer);
}
}
}
}
}
}//for;loop;ends
;;;;}
}
function;GetParentByTagName(parentTagName,;childElementObj)
{
var;parent;=;childElementObj.parentNode;
while(parent.tagName.toLowerCase();!=;parentTagName.toLowerCase())
{
parent;=;parent.parentNode;
}
return;parent;
}
//-----------------------------------------------------------------------------
</script>
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>
;