使用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结尾的元素

    });

  至此大功告成!

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

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的)
     }
  }

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

时间: 2024-08-05 15:16:40

使用TreeView 使用多选功能的相关文章

全选功能实现总结

全选功能实现: xml部分: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content&

Android ListView条目全选功能,不用checkbox实现!

大家好,翻了翻以前的笔记,发现了一个我特别标记的功能,那就是ListView全选功能,顿时想起了我那个时候苦逼的生涯,由于我大学机械出身,大学毕业了都不知道什么叫代码,在58干了一段销售.实在是干不下去了,不干了就得在网上找工作,就喜欢干电脑相关的工作,有一天,一家培训机构给我打来电话让我去面试,我以为让我去工作那,谁知道是忽悠我去培训,我当然不可能花钱了,就直接回去了,想了几天,除了销售我真不知道干啥,咬咬牙,就花钱培训了.我擦,咋说这到了,不跟你们说了,还是写下面的这个功能吧,虽然很简单,但

JQUERY的给Check全选功能

//给Checkbox提供全选功能 $("#checkall").click(function(){ if(this.checked){ $("input[name='checkname[]']").each(function(){ this.checked = true; }); }else{ $("input[name='checkname[]']").each(function(){ this.checked = false; }); }

js初学—实现checkbox全选功能

布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id="div1"> <input type="checkbox" /><br /> <input type="checkbox" /><br /> <input type="checkb

jQuery实现的全选、反选和不选功能

适用于网页多选后需要进行批量操作的场景(如批量删除等).如有问题希望大家可以指正.谢谢~~ HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮 <ul id="list"> <li><label><input type="checkbox" value="1"> 1.时间都去哪儿了</label></li> <l

JS全选功能代码优化

最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能来做个简单的demo,使用目前现在的编码方式来重新编码,当然以后会一直用这种方式来编写自己的代码.下面是如下代码: JS所有代码: /** * JS全选 * @class Checkall * @param {Object} cfg * @param {Element|selector} [cfg.container] 限定全选的容器 * @par

js实现全选功能

<!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> <meta http-equiv="Content-

红警框选功能

红警框选功能,我这里大概的思路就是用Unity里面的GL来实现,然后把士兵都放在一个链表集合里面,把士兵的坐标转化为屏幕坐标,然后判断是否在框选的范围内,如果在范围内,就进行移动. (1)建一个材质,这个材质的颜色决定框选的颜色,然后材质的类型设置成UI/Default. (2)写如下代码 using UnityEngine; using System.Collections; /// <summary> /// GL画框, 该脚本一定要挂载在摄像机上面才可以的 /// </summar

JQuery操作TreeView的全选,反选

1 <asp:TreeView ID="tv" runat="server" ExpandDepth="2" ShowCheckBoxes="All" 2 ShowLines="True" ImageSet="Msdn" > 3 </asp:TreeView> JavaScript部分代码 1 $( 2 function () { 3 //顶级选择 4 $(&qu