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控件的"onclick=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)函数,效果是一样的。




posted @ 2007-11-14 13:37 天天无用 阅读(...) 评论(...) 编辑 收藏