• 使用TreeView 使用多选功能


    1.要用TreeView多选就要显示复选框,TreeView默认不显示复选框,显示复选框: TreeView2.ShowCheckBoxes = TreeNodeTypes.All;

    初始化TreeView

     for (int i = 0; i < 3; i++)
                    {
                        TreeNode node = new TreeNode("父节点" + i, i.ToString());
                        
                        //node.SelectAction += TreeView1_TreeNodeCheckChanged;
                        TreeView1.Nodes.Add(node);
                        for (int j = 0; j < 4; j++)
                        {
                            TreeNode childNode = new TreeNode("子节点" + j, j.ToString());
                            node.ChildNodes.Add(childNode);
    
                            if (j == 0)
                            {
                                childNode.ChildNodes.Add(new TreeNode("子节点" + 1, "1"));
                            }
                        }
                    }
    
    
                    TreeView1.ShowCheckBoxes = TreeNodeTypes.All;
    

      

    效果:

    2.显示了复选框之后,多选代码

            //选中节点之后,选中节点的所有子节点
            private void setChildNodeCheckedState(TreeNode currNode, bool state)
            {
                TreeNodeCollection nodes = currNode.ChildNodes;
                if (nodes.Count > 0)
                    foreach (TreeNode tn in nodes)
                    {
    
                        tn.Checked = state;
                        setChildNodeCheckedState(tn, state);
                    }
            }
    
            //取消节点选中状态之后,取消所有父节点的选中状态
            private void setParentNodeCheckedState(TreeNode currNode, bool state)
            {
                TreeNode parentNode = currNode.Parent;
    
                parentNode.Checked = state;
                if (currNode.Parent.Parent != null)
                {
                    setParentNodeCheckedState(currNode.Parent, state);
                }
            }
    
            protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
            {
                if (e.Node.Checked)
                {
                    //节点勾选之后,勾选所有的子节点
                    setChildNodeCheckedState(e.Node, true);
                    if (e.Node.Parent != null)//检查同级的节点是否都勾选,都勾选了则勾选父节点
                    {
                        bool allChildNodeChecked =true ;
                        foreach (TreeNode node in e.Node.ChildNodes)
                        {
                            if (!node.Checked)
                            {
                                allChildNodeChecked = false;
                                break;
                            }
                        }
    
                        if (allChildNodeChecked)
                            setParentNodeCheckedState(e.Node, true);
                    }
    
    
                }
                else
                {
                    //取消节点选中状态之后,取消所有父节点的选中状态
                    setChildNodeCheckedState(e.Node, false);
                    //如果节点存在父节点,取消父节点的选中状态
                    if (e.Node.Parent != null)
                    {
                        setParentNodeCheckedState(e.Node, false);
                    }
                }
            }
    

    本来以为写了上面的代码点击复选框就可以勾选对应的子节点了,但是我错了。TreeView 只有点击节点上的文字才会触发TreeView1_TreeNodeCheckChanged事件,点击复选框没用,需要用到以下代码:

        function postBackByObject() {
    
                __doPostBack("UpdatePanel1", ""); //此处前面是两个下划线(UpdatePanel1处是因为用了UpdatePanel所以才写这个控件ID的)
        }
    
        $(document).ready(function () {
    
    //        $("input[type='checkbox']").bind("click", CheckSub);
    //                $("input[type='checkbox']").bind("click", postBackByObject);
            $("[id^='MainContent_TreeView1'][id$='CheckBox']").bind("click", postBackByObject); //所有id以MainContent_TreeView1开头,以CheckBox结尾的元素
    
        });
    View Code

    上面虽然基本的功能要求都实现了,但是每次点击checkbox页面回发的时,页面都会跑到最顶端,致使勾选页面底部的checkbox的时候又要重新把滚动条拉倒底部,为了刷新页面是维持滚动条的位置可以在.aspx页面

    <page>标签里加一句 MaintainScrollPositionOnPostback="true" 即可

    <%@ Page Language="C#" MaintainScrollPositionOnPostback="true" %>

      至此大功告成!

    网上也有用如下方法的,但是我发现此方法在点击节点前面的加减号的时候也会触发上面的代码,导致点击+/-号时有问题

    protected void Page_Load(object sender, EventArgs e)
        {
            TreeView1.Attributes.Add("onclick", "postBackByObject()");
    
        }
    
    protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
        {
            //string str=e.Node.ValuePath;
    
            //其他处理代码
        }
    
    aspx中:
    
    <head runat="server">
    
    <script type="text/JavaScript">
        function postBackByObject()
    {
            __doPostBack("","");
    }
    </script>
    
    </head>

    以上代码来自http://blog.csdn.net/sl159/article/details/7921920 

    有一中改进的写入如下,但是Firefox不支持类似的var o = window.event.srcElement;的写法,(IE没问题),所以也没有用到

      // 点击复选框时触发事件(此事件会引起回发)
      function postBackByObject()
      {
         var o = window.event.srcElement;
         if (o.tagName == "INPUT" && o.type == "checkbox")
         {
             __doPostBack("UpdatePanel1","");  //此处前面是两个下划线(UpdatePanel1处是因为用了UpdatePanel所以才写这个控件ID的)
         } 
      }
    View Code

    摘抄于http://www.cnblogs.com/ranlin/archive/2011/08/07/2129874.html

  • 相关阅读:
    python中使用scikit-learn和pandas决策树进行iris鸢尾花数据分类建模和交叉验证
    CNN+ Auto-Encoder 实现无监督Sentence Embedding ( 基于Tensorflow)
    R语言数据可视化分析案例:探索BRFSS数据
    1.微信小程序里如何设置当地时间?
    63.1拓展之纯 CSS 创作一个摇摇晃晃的 loader
    63.(原65)纯 CSS 创作一个摇摇晃晃的 loader
    6.HTML+CSS制作一双眼睛
    62.纯 CSS 创作一只蒸锅(感觉不好看呀)
    61.纯 CSS 创作一只咖啡壶(这个不好看)
    60.纯 CSS 创作一块乐高积木
  • 原文地址:https://www.cnblogs.com/lidaying5/p/5924707.html
Copyright © 2020-2023  润新知