使用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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM