TreeView以CheckBox方式動態呈現

2011-04-13

16609
0

以前比較少用到這個控制項，真的有用到的話，頂多是拉出來，設固定的值，當成連結頁面的樹狀功能，

沒想到這次剛好有個需求，要動態產生可以勾選的樹狀功能，本來打算用checkboxlist，但好像比較麻煩，

因為我的資料來源可能會很多層，因此想到用TreeView的方式來實作看看，沒想到果然可以使用，在這邊

就分享一下我的方法，若有更好的方式，也請各位前輩多多指教。

動態產生樹狀，一般來講，可以使用完全動態，也就是連控制項都動態產生，

要不然就先拉個控制項，裡面的樹狀項目用動態產生。

完全動態產生可參考

http://www.wretch.cc/blog/jumascould/14681496

這邊我講解一下自己的方式，我是拉一個TreeView控制項到.aspx頁面，

裡面項目用動態方式產生

.aspx

    <form id="form1" runat="server">
    <div>
     <asp:TreeView ID="TreeView1" runat="server" ShowLines="True">
        </asp:TreeView>
        
        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
        
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        
    </div>
    </form>
</body>

簡單設置一個TreeView和一個Button及一個顯示勾選項目的TextBox。

.cs

        {
            if (!IsPostBack)
            {
                TreeNode newNode = null;

                newNode = new TreeNode("1");
                newNode.ShowCheckBox = true;
             
                TreeView1.Nodes.Add(newNode);

                newNode = new TreeNode("11");
                newNode.ShowCheckBox = true;
        
                TreeView1.Nodes[0].ChildNodes.Add(newNode);

                newNode = new TreeNode("12");
                newNode.ShowCheckBox = true;
             
                TreeView1.Nodes[0].ChildNodes.Add(newNode);

                newNode = new TreeNode("2");
                newNode.ShowCheckBox = true;
           
                TreeView1.Nodes.Add(newNode);

                newNode = new TreeNode("21");
                newNode.ShowCheckBox = true;
              
                TreeView1.Nodes[1].ChildNodes.Add(newNode);

                newNode = new TreeNode("22");
                newNode.ShowCheckBox = true;
         
                TreeView1.Nodes[1].ChildNodes.Add(newNode);
            }
        }

此處是半動態，若資料源是從DB來的，則可以使用遞迴方式去設定，如下

.cs

        {

            TreeNode node;//父
            ////取得資料
            //DataTable dt = null;//請自己加入來源
            ////LINQ查詢  
            //var menuData = from menu in dt.AsEnumerable()
            //               select menu.Field<string>("Name"); 

            //此處用陣列測試
            string[] array1 = {"A","B","C"};

            foreach (string name in array1) //迴圈查詢  
            {


                node = new TreeNode();
                node.Text = name.ToString(); //父的顯示名稱
                //node.Value  這邊VALUE自己看要設啥 
                node.SelectAction = TreeNodeSelectAction.None;
                //是否有第二層 自己下條件
                if (true)
                {
                    SetTreeViewLv2(node);
                }
                TreeView1.Nodes.Add(node);//將節點加入TreeView                       
            }

            TreeView1.ShowCheckBoxes = TreeNodeTypes.All;  
        
        }

 private void SetTreeViewLv2(TreeNode fatherNode)
        {
            TreeNode childnd;//子 
            //這邊我用寫死的方式  所以子層都一樣
            string[] array2 = {"1","2","3" };
            foreach (var name in array2) //迴圈查詢  
            {
                childnd = new TreeNode();
                childnd.Text = name.ToString();
                childnd.SelectAction = TreeNodeSelectAction.None;
                fatherNode.ChildNodes.Add(childnd);       
            }
        }

4~9行可以自行設定DB資料來源，此處偷懶，先用陣列方式測試，

到這邊應該可以順利呈現樹狀的CheckBox

再來就是說明如何取值，

.cs

        {
            int count = 0;
            string strText = string.Empty;
                foreach (TreeNode oNode in this.TreeView1.CheckedNodes)
                {
                    if (oNode.Checked)
                    {
                        count += 1;
                        strText = oNode.Text;
                    }
                  
                }
            

            if (count == 0)
            {
                TextBox1.Text = "請勾選一筆";
            }
            else if (count == 1)
            {
                TextBox1.Text = "勾選的是 : " + strText;
            }
            else if (count >1)
            {
                TextBox1.Text = "勾太多筆了喔";
            }

        }

用count是記錄勾選筆數，真正取值在第10行

當然還有很多種使用方式，其他就靠自己多研究去變化了。

若有不足的地方請多多指教，感謝。

回首頁