asp.net 2.0 中 TreeView控件中的checkbox客户端操作

最近有一个项目要做到用树形结构来控制权限， 要做到以下三条 当选择根节点时所有的子节点都要被选择 当选择子节点时相应的根节点也要被选择 当所有子节点取消选择时根节点也要取消选择。

　　树形控件用的是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)函数，效果是一样的。