最近有一個項目要做到用樹形結構來控制權限， 要做到以下三條
![]()
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;
![]()
}
![]()
<%@ 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>
![]()
另外js裏的GetParentByTagName(element, tagName)函數是treeview中自帶的，原先的函數 WebForm_GetParentByTagName(element, tagName) ，寫在這裏是爲了讓自己用的時候不糊塗，大家在使用的時候可以把js裏“var div = GetParentByTagName(ele,'DIV');”這一行換成“var div = WebForm_GetParentByTagName(ele,'DIV');”然後去掉GetParentByTagName(element, tagName)函數，效果是一樣的。
- 當選擇根節點時所有的子節點都要被選擇
- 當選擇子節點時相應的根節點也要被選擇
- 當所有子節點取消選擇時根節點也要取消選擇。
樹形控件用的是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;} 把上面一段存成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>另外js裏的GetParentByTagName(element, tagName)函數是treeview中自帶的，原先的函數 WebForm_GetParentByTagName(element, tagName) ，寫在這裏是爲了讓自己用的時候不糊塗，大家在使用的時候可以把js裏“var div = GetParentByTagName(ele,'DIV');”這一行換成“var div = WebForm_GetParentByTagName(ele,'DIV');”然後去掉GetParentByTagName(element, tagName)函數，效果是一樣的。
