• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

解决asp.net2.0中treeview的checkbox级联选择

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

以下代码实现了当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 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下正常,脚本不报错


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ASP.NETMVC3调用分部视图-PartialView的几种方式(集)发布时间:2022-07-10
下一篇:
ASP.NET(c#)——如何重新生成designer.cs文件发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap