最近有一个项目要做到用树形结构来控制权限, 要做到以下三条
- 当选择根节点时所有的子节点都要被选择
- 当选择子节点时相应的根节点也要被选择
- 当所有子节点取消选择时根节点也要取消选择。
树形控件用的是asp.net 2.0自带的treeview控件,如何控制它的checkbox一点头绪也没有,google上找了找,发现这个问题还是比较普遍的,终于找了一篇文章http://itrust.cnblogs.com/archive/2006/04/03/365439.html,照上面做了一下,但是出错。仔细看了一下,发现回复中有一段代码可以使用,但是只能实现第一条,另外两条做不到。
看了免费的午餐还是不好吃的,还是要自己动手,分析了一下这段代码,又结合上面的文章看了一下,把代码修改了一下,终于可以全部做到了。
代码如下:
function
OnTreeNodeChecked()
... {
var ele = event.srcElement;
if(ele.type=='checkbox')
...{
var childrenDivID = ele.id.replace('CheckBox','Nodes');
var div = document.getElementById(childrenDivID);
if(div != null)
...{
var checkBoxs = div.getElementsByTagName('INPUT');
for(var i=0;i<checkBoxs.length;i++)
...{
if(checkBoxs[i].type=='checkbox')
checkBoxs[i].checked=ele.checked;
}
}
else
...{
var div = GetParentByTagName(ele,'DIV');
var checkBoxs = div.getElementsByTagName('INPUT');
var parentCheckBoxID = div.id.replace('Nodes','CheckBox');
var parentCheckBox = document.getElementById(parentCheckBoxID);
for(var i=0;i<checkBoxs.length;i++)
...{
if(checkBoxs[i].type=='checkbox' && checkBoxs[i].checked)
...{
parentCheckBox.checked = true;
return;
}
}
parentCheckBox.checked = false;
}
}
}
function GetParentByTagName(element, tagName) ... {
var parent = element.parentNode;
var upperTagName = tagName.toUpperCase();
while (parent && (parent.tagName.toUpperCase() != upperTagName)) ...{
parent = parent.parentNode ? parent.parentNode : parent.parentElement;
}
return parent;
}
... {
var ele = event.srcElement;
if(ele.type=='checkbox')
...{
var childrenDivID = ele.id.replace('CheckBox','Nodes');
var div = document.getElementById(childrenDivID);
if(div != null)
...{
var checkBoxs = div.getElementsByTagName('INPUT');
for(var i=0;i<checkBoxs.length;i++)
...{
if(checkBoxs[i].type=='checkbox')
checkBoxs[i].checked=ele.checked;
}
}
else
...{
var div = GetParentByTagName(ele,'DIV');
var checkBoxs = div.getElementsByTagName('INPUT');
var parentCheckBoxID = div.id.replace('Nodes','CheckBox');
var parentCheckBox = document.getElementById(parentCheckBoxID);
for(var i=0;i<checkBoxs.length;i++)
...{
if(checkBoxs[i].type=='checkbox' && checkBoxs[i].checked)
...{
parentCheckBox.checked = true;
return;
}
}
parentCheckBox.checked = false;
}
}
}
function GetParentByTagName(element, tagName) ... {
var parent = element.parentNode;
var upperTagName = tagName.toUpperCase();
while (parent && (parent.tagName.toUpperCase() != upperTagName)) ...{
parent = parent.parentNode ? parent.parentNode : parent.parentElement;
}
return parent;
}
把上面一段存成treeview.js文件,在页面里引用,然后设置treeview控件的"οnclick=OnTreeNodeChecked()",或者直接在Page_Load里加上“TreeView1.Attributes.Add("OnClick", "OnTreeNodeChecked()");”就可以了,留一个简单例子
<%
...
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3"
%>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > 无标题页 </ title >
< script language =javascript type ="text/javascript" src =TreeView.js ></ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< asp:TreeView ID ="TreeView1" runat ="server" ShowCheckBoxes ="All" onclick ="OnTreeNodeChecked()" >
< Nodes >
< asp:TreeNode SelectAction ="Expand" Text ="aaa" Value ="aaa" >
< asp:TreeNode SelectAction ="None" Text ="a1" Value ="a1" ></ asp:TreeNode >
< asp:TreeNode SelectAction ="None" Text ="a2" Value ="a2" ></ asp:TreeNode >
</ asp:TreeNode >
< asp:TreeNode SelectAction ="Expand" Text ="bbb" Value ="bbb" >
< asp:TreeNode SelectAction ="None" Text ="b1" Value ="b1" ></ asp:TreeNode >
< asp:TreeNode SelectAction ="None" Text ="b2" Value ="b2" ></ asp:TreeNode >
</ asp:TreeNode >
</ Nodes >
</ asp:TreeView >
</ div >
</ form >
</ body >
</ html >
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server" >
< title > 无标题页 </ title >
< script language =javascript type ="text/javascript" src =TreeView.js ></ script >
</ head >
< body >
< form id ="form1" runat ="server" >
< div >
< asp:TreeView ID ="TreeView1" runat ="server" ShowCheckBoxes ="All" onclick ="OnTreeNodeChecked()" >
< Nodes >
< asp:TreeNode SelectAction ="Expand" Text ="aaa" Value ="aaa" >
< asp:TreeNode SelectAction ="None" Text ="a1" Value ="a1" ></ asp:TreeNode >
< asp:TreeNode SelectAction ="None" Text ="a2" Value ="a2" ></ asp:TreeNode >
</ asp:TreeNode >
< asp:TreeNode SelectAction ="Expand" Text ="bbb" Value ="bbb" >
< asp:TreeNode SelectAction ="None" Text ="b1" Value ="b1" ></ asp:TreeNode >
< asp:TreeNode SelectAction ="None" Text ="b2" Value ="b2" ></ asp:TreeNode >
</ asp:TreeNode >
</ Nodes >
</ asp:TreeView >
</ div >
</ form >
</ body >
</ html >
另外js里的GetParentByTagName(element, tagName)函数是treeview中自带的,原先的函数 WebForm_GetParentByTagName(element, tagName) ,写在这里是为了让自己用的时候不糊涂,大家在使用的时候可以把js里“var div = GetParentByTagName(ele,'DIV');”这一行换成“var div = WebForm_GetParentByTagName(ele,'DIV');”然后去掉GetParentByTagName(element, tagName)函数,效果是一样的。