Asp.net 2.0 权限树的控制

        最近需要在项目中做权限，打算采用权限树形式来做。每做一个新功能的时候，都是先到网上搜索下相关的资料。发现网上有很多例子。都是非常不错的。参考网上的例子，自己也写了一个。

        权限树无非是要实现如下功能：

         1.  该节点可以访问，则他的父节点也必能访问

         2.  该节点可以访问，则他的子节点也都能访问

         3.  该节点不可访问，则他的子节点也不能访问

        使用带CheckBox的数型结构能得到很好的用户体验，可是编程的难度也是有点增加，如果全部有服务端来完成，那点下刷下，肯定不行。只能使用javascript，javascript调试的时候郁闷的很，还有郁闷的递归。客户是上帝，只能委屈自己了。

        先建立一个JS文件。文件名为：TreeView.js。代码如下：

// JScript 文件
function public_GetParentByTagName(element, tagName) 
{
    var parent = element.parentNode;
    var upperTagName = tagName.toUpperCase();
    //如果这个元素还不是想要的tag就继续上溯
    while (parent && (parent.tagName.toUpperCase() != upperTagName)) 
    {
        parent = parent.parentNode ? parent.parentNode : parent.parentElement;
    }
    return parent;
}

//设置节点的父节点Cheched——该节点可访问，则他的父节点也必能访问
function setParentChecked(objNode)
{ 
    var objParentDiv = public_GetParentByTagName(objNode,"div");
    if(objParentDiv==null || objParentDiv == "undefined")
    {
        return;
    }
    var objID = objParentDiv.getAttribute("ID");
    objID = objID.substring(0,objID.indexOf("Nodes"));
    objID = objID+"CheckBox";
    var objParentCheckBox = document.getElementById(objID);
    if(objParentCheckBox==null || objParentCheckBox == "undefined")
    {
        return;
    } 
    if(objParentCheckBox.tagName!="INPUT" && objParentCheckBox.type == "checkbox")
    return; 
    objParentCheckBox.checked = true;
    setParentChecked(objParentCheckBox);
}

//设置节点的子节点uncheched——该节点不可访问，则他的子节点也不能访问
function setChildUnChecked(divID)
{ 
    var objchild = divID.children;
    var count = objchild.length; 
    for(var i=0;i<objchild.length;i++)
    {
        var tempObj = objchild[i];
        if(tempObj.tagName=="INPUT" && tempObj.type == "checkbox")
        {
            tempObj.checked = false;
        }
        setChildUnChecked(tempObj); 
    }
}

//设置节点的子节点cheched——该节点可以访问，则他的子节点也都能访问
function setChildChecked(divID)
{ 
    var objchild = divID.children;
    var count = objchild.length; 
    for(var i=0;i<objchild.length;i++)
    {
        var tempObj = objchild[i];
        if(tempObj.tagName=="INPUT" && tempObj.type == "checkbox")
        {
            tempObj.checked = true;
        }
        setChildChecked(tempObj); 
    }
}

//触发事件
function CheckEvent()
{

    var objNode = event.srcElement; 

    if(objNode.tagName!="INPUT" || objNode.type!="checkbox")
    return;

    if(objNode.checked==true)
    {
        setParentChecked(objNode);
        var objID = objNode.getAttribute("ID");
        var objID = objID.substring(0,objID.indexOf("CheckBox")); 
        var objParentDiv = document.getElementById(objID+"Nodes");
        if(objParentDiv==null || objParentDiv == "undefined")
        {
            return;
        } 
        setChildChecked(objParentDiv);
    }
    else
    {
        var objID = objNode.getAttribute("ID");
        var objID = objID.substring(0,objID.indexOf("CheckBox")); 
        var objParentDiv = document.getElementById(objID+"Nodes");
        if(objParentDiv==null || objParentDiv == "undefined")
        {
            return;
        } 
        setChildUnChecked(objParentDiv);
    }
}

 

那如何使用呢？

1.  建立一个页面，放置TreeView控件

2.  在页面中加入JS脚本的引用。

<script language="javascript" src="TreeView.js"></script>

3.  在Page_Load事件中，为TreeView注册onclick客户端事件。

this.TreeView1.Attributes.Add("onclick", "CheckEvent()");

按下F5，看看效果。

如果要获取选中的节点，则需要加入下面的方法：

/**//// <summary>
    /// 遍历子节点，获取选中的节点．
    /// </summary>
    /// <param name="Node"></param>
    public void GetChildNode(TreeNode Node, ref string StrChecked)
    {
        foreach (TreeNode node in Node.ChildNodes)
        {
            if (node.Checked)
            {
                StrChecked += node.Value + "@";
            }
            GetChildNode(node, ref StrChecked);
        }
    }

代码下载： 权限树.rar