由于项目要求需要实现,TreeView中CheckBox的单选功能,本人在网络上找了半天.没有找到满意的.于是自己研究了下,实现了这个功能,现放于Blog中,一方面一备忘,另一方面提供给需要的朋友. 有什么问题请提出.
//
用Treeview chekbox节点单选的处理事件
function TreeSingleSelect(treeID,checkNode)
{
if ( ! treeID)
return ;
var objs = document.getElementsByTagName( " input " );
for ( var i = 0 ;i < objs.length;i ++ )
{
if (objs[i].type == ' checkbox ' )
{
var obj = objs[i];
if (obj.id.indexOf(treeID) !=- 1 )
{
if (obj != checkNode)
{
obj.checked = false ;
}
}
}
}
}
// 用于给TreeView的 chebox添加 单击事件(如果要将某一TreeView变为单选择 只需调用下面方法)
function SetTreeNodeClickHander(treeID)
{
var objs = document.getElementsByTagName( " input " );
for ( var i = 0 ;i < objs.length;i ++ )
{
if (objs[i].type == ' checkbox ' )
{
var obj = objs[i];
if (obj.id.indexOf(treeID) !=- 1 )
{
objs[i].onclick = function (){TreeSingleSelect(treeID, this );};
}
}
}
}
function TreeSingleSelect(treeID,checkNode)
{
if ( ! treeID)
return ;
var objs = document.getElementsByTagName( " input " );
for ( var i = 0 ;i < objs.length;i ++ )
{
if (objs[i].type == ' checkbox ' )
{
var obj = objs[i];
if (obj.id.indexOf(treeID) !=- 1 )
{
if (obj != checkNode)
{
obj.checked = false ;
}
}
}
}
}
// 用于给TreeView的 chebox添加 单击事件(如果要将某一TreeView变为单选择 只需调用下面方法)
function SetTreeNodeClickHander(treeID)
{
var objs = document.getElementsByTagName( " input " );
for ( var i = 0 ;i < objs.length;i ++ )
{
if (objs[i].type == ' checkbox ' )
{
var obj = objs[i];
if (obj.id.indexOf(treeID) !=- 1 )
{
objs[i].onclick = function (){TreeSingleSelect(treeID, this );};
}
}
}
}
上面是主要的两个方法实现
TreeSingleSelect方法是,选择TreeView的CheckBox的事件.
SetTreeNodeClickHander这个方法是把TreeSingleSelect方法注册到TreeView的所有CheckBox上。
注册代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
SetTreeNodeClickHander方法的参数是TreeView的客户端ID,一般情况下和服务端ID想同,在有控件嵌套(如用户控件或者MasterPage中)TreeView.ClientID来,当然任何情况下都可以用后一种方法来实现.代码如下:
<
div style
=
"
width:500px; height:450px; overflow:auto
"
>
< asp:TreeView runat = " server " ID = " tvAssetKindTree " ExpandDepth = " 0 " ShowCheckBoxes = " All " ShowLines = " True " ExpandImageToolTip = "" ></ asp:TreeView >
</ div >
< script type = " text/javascript " language = " javascript " >
SetTreeNodeClickHander( "<%=tvAssetKindTree.ClientID%>" );
</ script >
< asp:TreeView runat = " server " ID = " tvAssetKindTree " ExpandDepth = " 0 " ShowCheckBoxes = " All " ShowLines = " True " ExpandImageToolTip = "" ></ asp:TreeView >
</ div >
< script type = " text/javascript " language = " javascript " >
SetTreeNodeClickHander( "<%=tvAssetKindTree.ClientID%>" );
</ script >