Asp.net源码交流论坛 Asp.net交流讨论区Asp.net技术文章解决treeview的checkbox级联选择

1  /  1  页    1  跳转
发表新主题 回复该主题

标题: 解决treeview的checkbox级联选择

身份:工程师

 
  • UID:1247
  • 来自:上海-新西兰
  • 精华:1
  • 积分:196
  • 帖子:190
  • 注册: 2007-11-29
  • 状态: 离线
  • 威望:2.00
  • 金钱:24.00 元

解决treeview的checkbox级联选择

以下代码实现了当TreeView节点包含CheckBox时保持其父子节点状态一致,即:当选中父节点,子节点会全部自动选上,反之则全部取消。选择某个子节点,同样应该选中这个字节点的父节点(包括祖先节点)。
在网上也找了一些方法,但是我觉得这是TreeView的一个缺陷,因此应该在该控件内部实现,而不应该附加一些外部的js来控制TreeView,有什么问题可以给我留言,我及时更正:
先在后置cs文件里里添加:

protected void Page_Load(object sender, EventArgs e)
{
      // Load sample data only once, when the page is first loaded.
      if (!IsPostBack)
      {
            SampleTreeView.Attributes.Add("onClick","OnCheckEvent()");
      }
}


相关js:

<script language="javascript">
    //checkbox点击事件
    function OnCheckEvent()
    {
        var objNode = event.srcElement;
        if(objNode.tagName != "INPUT" || objNode.type != "checkbox")
            return;
        //获得当前树结点
        var ck_ID = objNode.getAttribute("ID");
        var node_ID = ck_ID.substring(0,ck_ID.indexOf("CheckBox")) + "Nodes";
        var curTreeNode = document.getElementById(node_ID);
        //级联选择
        SetChildCheckBox(curTreeNode,objNode.checked);
        SetParentCheckBox(objNode);
    }
   
    //子结点字符串
    var childIds = "";
    //获取子结点ID数组
    function GetChildIdArray(parentNode)
    {
        if (parentNode == null)
            return;
        var childNodes = parentNode.children;
        var count = childNodes.length;
        for(var i = 0;i < count;i ++)
        {
            var tmpNode = childNodes[i];
            if(tmpNode.tagName == "INPUT" && tmpNode.type == "checkbox")
            {
                childIds = tmpNode.id + ":" + childIds;
            }
            GetChildIdArray(tmpNode);
        }
    }
   
    //设置子结点的checkbox
    function SetChildCheckBox(parentNode,checked)
    {
        if(parentNode == null)
            return;
        var childNodes = parentNode.children;
        var count = childNodes.length;
        for(var i = 0;i < count;i ++)
        {
            var tmpNode = childNodes[i];
            if(tmpNode.tagName == "INPUT" && tmpNode.type == "checkbox")
            {
                tmpNode.checked = checked;
            }
            SetChildCheckBox(tmpNode,checked);
        }
    }
   
    //设置父结点的checkbox
    function SetParentCheckBox(childNode)
    {
        if(childNode == null)
            return;
        var parent = childNode.parentNode;
        if(parent == null || parent == "undefined")
            return;
        do
        {
        parent = parent.parentNode;
        }
        while (parent && parent.tagName != "DIV");
        if(parent == "undefined" || parent == null)
            return;
        var parentId = parent.getAttribute("ID");
        var objParent = document.getElementById(parentId);
        childIds = "";
        GetChildIdArray(objParent);
        //判断子结点状态
        childIds = childIds.substring(0,childIds.length - 1);
        var aryChild = childIds.split(":");
        var result = false;
        //当子结点的checkbox状态有一个为true,其父结点checkbox状态即为true,否则为false
        for(var i in aryChild)
        {
            var childCk = document.getElementById(aryChild[i]);
            if(childCk.checked)
                result = true;
        }
        parentId = parentId.replace("Nodes","CheckBox");
        var parentCk = document.getElementById(parentId);
        if(parentCk == null)
            return;
        if(result)
            parentCk.checked = true;
        else
            parentCk.checked = false;
        SetParentCheckBox(parentCk);
    }
    </script>


以下是treeview的测试脚本:

<asp:TreeView id="SampleTreeView" runat="server" ShowCheckBoxes=All> 
        <Nodes>
          <asp:TreeNode Value="Home"
          NavigateUrl =""
            Text="Home"
            Target="Content"
            Expanded="True"
            SelectAction=SelectExpand>
           
            <asp:TreeNode Value="1"
              NavigateUrl=""
              Text="Page1"
              Target="Content">
                <asp:TreeNode Value="2"
                              NavigateUrl=""
                              Text="Section 1"
                              Target="Content">
                    <asp:TreeNode Value="3"
                              NavigateUrl=""
                              Text="Section 1"
                              Target="Content"/>
                    <asp:TreeNode Value="4"
                              NavigateUrl=""
                              Text="Section 1"
                              Target="Content"/>
                </asp:TreeNode>
                <asp:TreeNode Value="5"
                              NavigateUrl=""
                              Text="Section 2"
                              Target="Content">
                </asp:TreeNode>
            </asp:TreeNode>
           
              <asp:TreeNode Value="6"
                NavigateUrl=""
                Text="Page 2"
                Target="Content">
                <asp:TreeNode Value="7"
                              NavigateUrl=""
                              Text="Section 1"
                              Target="Content">
                </asp:TreeNode>
                <asp:TreeNode Value="8"
                              NavigateUrl=""
                              Text="Section 2"
                              Target="Content">
                </asp:TreeNode>
              </asp:TreeNode>
          </asp:TreeNode>
        </Nodes>
      </asp:TreeView>


运行在vs2005下正常,脚本不报错
 
赚够积分当斑竹
版主如果觉得我发的文章不错请给我加分
各位觉得我回帖不错请给我好评,谢谢咯
引用 回复
 

身份:学员

 
  • UID:33656
  • 来自:
  • 精华:0
  • 积分:0
  • 帖子:1
  • 注册: 2008-10-10
  • 状态: 离线
  • 威望:0.00
  • 金钱:0.10 元

回复:解决treeview的checkbox级联选择

我不太明白,我想请教一下如果想把这个树用在级别管理上,想把复选框设置成三种状态如何设置,就是除子节点意外的父节点的复选选框有三种状态,当有部分子结点被选中时父节点的复选框成灰色(不完全选中状态)网上的也找不到好的,你看看这个http://www.vckbase.com/document/viewdoc/?id=665
我想在ASPX里用图片上的树,当然如果有个属性能直接获取已经选中的叶子节点的值更好,呵呵如果何以加我QQ吧  494032900
引用 回复
 
1  /  1  页    1  跳转
发表新主题 回复该主题

现在时间是:2008-11-24 04:15:50 京ICP备06046876号