C# TreeView以CheckBox方式動態呈現

日期：
以前比較少用到這個控制項，真的有用到的話，頂多是拉出來，設固定的值，當成連結頁面的樹狀功能，沒想到這次剛好有個需求，要動態產生可以勾選的樹狀功能，本來打算用checkboxlist，但好像比較麻煩，因為我的資料來源可能會很多層，因此想到用TreeView的方式來實作看看，沒想到果然可以使用，在這邊就分享一下我的方法，若有更好的方式，也請各位前輩多多指教。

動態產生樹狀，一般來講，可以使用完全動態，也就是連控制項都動態產生，
要不然就先拉個控制項，裡面的樹狀項目用動態產生。
完全動態產生可參考

這邊我講解一下自己的方式，我是拉一個TreeView控制項到.aspx頁面，
裡面項目用動態方式產生
.aspx
01<body>
02    <form id="form1" runat="server">
03    <div>
04     <asp:TreeView ID="TreeView1" runat="server" ShowLines="True">
05        </asp:TreeView>
06         
07        <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
08         
09        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
10         
11    </div>
12    </form>
13</body>
簡單設置一個TreeView和一個Button及一個顯示勾選項目的TextBox。

.cs
01protected void Page_Load(object sender, EventArgs e)
02       {
03           if (!IsPostBack)
04           {
05               TreeNode newNode = null;
06 
07               newNode = new TreeNode("1");
08               newNode.ShowCheckBox = true;
09             
10               TreeView1.Nodes.Add(newNode);
11 
12               newNode = new TreeNode("11");
13               newNode.ShowCheckBox = true;
14        
15               TreeView1.Nodes[0].ChildNodes.Add(newNode);
16 
17               newNode = new TreeNode("12");
18               newNode.ShowCheckBox = true;
19             
20               TreeView1.Nodes[0].ChildNodes.Add(newNode);
21 
22               newNode = new TreeNode("2");
23               newNode.ShowCheckBox = true;
24           
25               TreeView1.Nodes.Add(newNode);
26 
27               newNode = new TreeNode("21");
28               newNode.ShowCheckBox = true;
29              
30               TreeView1.Nodes[1].ChildNodes.Add(newNode);
31 
32               newNode = new TreeNode("22");
33               newNode.ShowCheckBox = true;
34         
35               TreeView1.Nodes[1].ChildNodes.Add(newNode);
36           }
37       }
此處是半動態，若資料源是從DB來的，則可以使用遞迴方式去設定，如下
.cs
01private void SetTreeViewNode()
02        {
03 
04            TreeNode node;//父
05            ////取得資料
06            //DataTable dt = null;//請自己加入來源
07            ////LINQ查詢 
08            //var menuData = from menu in dt.AsEnumerable()
09            //               select menu.Field<string>("Name");
10 
11            //此處用陣列測試
12            string[] array1 = {"A","B","C"};
13 
14            foreach (string name in array1) //迴圈查詢 
15            {
16 
17 
18                node = new TreeNode();
19                node.Text = name.ToString(); //父的顯示名稱
20                //node.Value  這邊VALUE自己看要設啥
21                node.SelectAction = TreeNodeSelectAction.None;
22                //是否有第二層 自己下條件
23                if (true)
24                {
25                    SetTreeViewLv2(node);
26                }
27                TreeView1.Nodes.Add(node);//將節點加入TreeView                      
28            }
29 
30            TreeView1.ShowCheckBoxes = TreeNodeTypes.All; 
31         
32        }
33 
34 private void SetTreeViewLv2(TreeNode fatherNode)
35        {
36            TreeNode childnd;//子
37            //這邊我用寫死的方式  所以子層都一樣
38            string[] array2 = {"1","2","3" };
39            foreach (var name in array2) //迴圈查詢 
40            {
41                childnd = new TreeNode();
42                childnd.Text = name.ToString();
43                childnd.SelectAction = TreeNodeSelectAction.None;
44                fatherNode.ChildNodes.Add(childnd);      
45            }
46        }
4~9行可以自行設定DB資料來源，此處偷懶，先用陣列方式測試，
到這邊應該可以順利呈現樹狀的CheckBox
image
再來就是說明如何取值，
.cs
view source
print?
01protected void Button1_Click(object sender, EventArgs e)
02    {
03        int count = 0;
04        string strText = string.Empty;
05            foreach (TreeNode oNode in this.TreeView1.CheckedNodes)
06            {
07                if (oNode.Checked)
08                {
09                    count += 1;
10                    strText = oNode.Text;
11                }
12               
13            }
14         
15 
16        if (count == 0)
17        {
18            TextBox1.Text = "請勾選一筆";
19        }
20        else if (count == 1)
21        {
22            TextBox1.Text = "勾選的是 : " + strText;
23        }
24        else if (count >1)
25        {
26            TextBox1.Text = "勾太多筆了喔";
27        }
28 
29    }
用count是記錄勾選筆數，真正取值在第10行

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

留言

張貼留言