本文介绍了一种在TreeView中实现Checkbox单选功能的方法。通过两个JavaScript函数，TreeSingleSelect和SetTreeNodeClickHander，可以轻松地为TreeView的Checkbox节点设置单选行为。文章提供了具体的实现代码及使用说明。
由于项目要求需要实现,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上。
注册代码如下:
<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"); </script>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>
扫一扫
388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
