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

　　最近有一个项目要做到用树形结构来控制权限， 要做到以下三条

1. 当选择根节点时所有的子节点都要被选择
2. 当选择子节点时相应的根节点也要被选择
3. 当所有子节点取消选择时根节点也要取消选择。

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