使用Asp.net的TreeView来构建用户选择输入

选择优于输入，这是一般人的共识，面对繁多的数据，提供良好的选择界面，一方面增强用户的界面体验，一方面也提高了数据的准确性，更节省了用户的宝贵时间。一般的单项数据选择可以使用DropdownList控件来实现，但对于有多个选择性输入，而且输入有层次关系的内容，最好选择TreeView控件来实现。

本文介绍如何使用使用TreeView控件来有效获取用户的输入，其中涉及到TreeView控件的级联选择、去掉节点HTML链接变为展开目录、获取选择内容、如何构造数据库的信息变为树形内容以及弹出窗口使用等知识点，本文输入应用级别的例子，希望能做个记号，对己对人，皆为利好!^_^
本文的经营范围是一个可以输入分类及详细子内容的，由于内容繁多，而且具有一定的层次关系，因此，不适合采用DropdownList和CheckboxList控件，因此采用了带CheckBox属性的TreeView控件来辅助用户的输入。
输入界面大致如下所示，用户通过选择按钮，触发弹出对话框，在对话框中放置了TreeView控件。

在弹出的对话框中，放置的TreeView控件，一个带有CheckBox，可以方便用户选择，并且具有级联（通过Javascript实现，减少Post回发），另外由于内容比较多，我设置了展开的级别层次。

用户通过选择或者反选大类，可以选择或反选其列表下面的所有项目，也可以单独选择子项目。

由于通过Javascript不太好获取并组装返回的内容，本文通过了在后台遍历树的方式对返回值进行处理，然后在父窗体的Javascript中对返回值进行了绑定，使其在界面控件中得以显示指定格式的内容。

以下为HTML的代码，其中OnTreeNodeChecked为级联Javascript函数，SubmitValue为对返回值进行绑定的操作。
代码

1. <div class="search"> 
2.         <span> 
3.             <asp:ImageButton ID="btnSelect" runat="server"  
4.             ImageUrl="~/Themes/Default/btn_select.gif" onclick="btnSelect_Click" 
5.                 /> 
6.             <asp:ImageButton ID="btnClose" runat="server" OnClientClick="javascript:window.close();return false;" 
7.                 ImageUrl="~/Themes/Default/btn_close.gif" /> 
8.         </span> 
9.         <table cellspacing="0" cellpadding="0" border="0" width="100%"> 
10.             <tr> 
11.                 <td class="ico"> 
12.                     &nbsp; 
13.                 </td> 
14.                 <td class="form"> 
15.                     <asp:TreeView ID="TreeView1" runat="server" onclick="OnTreeNodeChecked();" ShowCheckBoxes="All" 
16.                         ShowLines="True" ExpandDepth="1" Font-Bold="False" ForeColor="#0000CC"> 
17.                     </asp:TreeView> 
18.                 </td> 
19.             </tr> 
20.         </table> 
21.     </div> 
22.  
23.     <script language='javascript' type='text/javascript'> 
24.         function OnTreeNodeChecked() { 
25.             var ele = event.srcElement; 
26.             if (ele.type == 'checkbox') { 
27.                 var childrenDivID = ele.id.replace('CheckBox', 'Nodes'); 
28.                 var div = document.getElementById(childrenDivID); 
29.                 if (div == null) return; 
30.                 var checkBoxs = div.getElementsByTagName('INPUT'); 
31.                 for (var i = 0; i < checkBoxs.length; i++) { 
32.                     if (checkBoxs[i].type == 'checkbox') 
33.                         checkBoxs[i].checked = ele.checked; 
34.                 } 
35.             } 
36.         } 
37.  
38.         function SubmitValue() { 
39.             var val = ""; 
40.             var returnVal = new Array(); 
41.             var inputs = document.all.tags("INPUT"); 
42.             var n = 0; 
43.             for (var i = 0; i < inputs.length; i++) // 遍历页面上所有的 input  
44.             { 
45.                 if (inputs[i].type == "checkbox") { 
46.                     if (inputs[i].checked) { 
47.                         var strValue = inputs[i].value; 
48.                         val += strValue + ','; 
49.                         //returnVal[n] = val; 
50.                         nn = n + 1; 
51.                     } 
52.                 } //if(inputs[i].type="checkbox") 
53.             } //for 
54.              
55.             window.returnValue = val; 
56.             window.close(); 
57.         } 
58.          
59.     </script> 

下面代码是页面的后台代码，其中展示了如何对树进行数据绑定，使其能够显示有层次格式的内容，其中AddTreeNode是一个递归函数。btnSelect_Click事件处理函数，专门对返回的数据进行组装，以一定的格式显示到客户端的控件输入上。
代码

1. protected void Page_Load(object sender, EventArgs e) 
2.         { 
3.             if (!this.IsPostBack) 
4.             { 
5.                 BindData(); 
6.             } 
7.         } 
8.  
9.         private void BindData() 
10.         { 
11.             ArrayList scopeTree = BLLFactory<BusinessScope>.Instance.GetTree(); 
12.             foreach (BusinessScopeNodeInfo nodeInfo in scopeTree) 
13.             { 
14.                 TreeNode node = new TreeNode(nodeInfo.Name); 
15.                 node.SelectAction = TreeNodeSelectAction.Expand; 
16.                 this.TreeView1.Nodes.Add(node); 
17.  
18.                 AddTreeNode(node, nodeInfo); 
19.             } 
20.         } 
21.  
22.         private void AddTreeNode(TreeNode parentNode, BusinessScopeNodeInfo nodeInfo) 
23.         { 
24.             TreeNode treeNode = null; 
25.             foreach (BusinessScopeNodeInfo subNodeInfo in nodeInfo.Children) 
26.             { 
27.                 treeNode = new TreeNode(subNodeInfo.Name); 
28.                 treeNode.SelectAction = TreeNodeSelectAction.Expand; 
29.                 parentNode.ChildNodes.Add(treeNode); 
30.  
31.                 AddTreeNode(treeNode, subNodeInfo); 
32.             } 
33.         } 
34.  
35.         protected void btnSelect_Click(object sender, ImageClickEventArgs e) 
36.         { 
37.             string result = ""; 
38.             foreach (TreeNode parent in this.TreeView1.Nodes) 
39.             { 
40.                 foreach (TreeNode node in parent.ChildNodes) 
41.                 { 
42.                     StringBuilder sb = new StringBuilder(); 
43.                     foreach (TreeNode subNode in node.ChildNodes) 
44.                     { 
45.                         if (subNode.Checked) 
46.                         { 
47.                             sb.AppendFormat("{0},", subNode.Text); 
48.                         } 
49.                     } 
50.                     if (sb.Length > 0) 
51.                     { 
52.                         sb.Insert(0, string.Format("{0}(", node.Text)); 
53.                         sb.Append(")"); 
54.                         result += sb.ToString().Replace(",)", ")") + ";"; 
55.                     } 
56.                     else if (node.Checked) 
57.                     { 
58.                         result += node.Text; 
59.                     }                     
60.                 } 
61.             } 
62.             Helper.CloseWin(this, result.Trim(';')); 
63.         } 

其中数的数据组装也是需要注意的一个地方，为了提高效率，避免频繁查找数据库，我们先把符合条件的数据放到DataTable，然后通过对象的Select在内存中查找，这样可以很好的提高递归函数的查找效率。
代码

1. /// <summary> 
2.         /// 获取数据树 
3.         /// </summary> 
4.         /// <returns></returns> 
5.         public ArrayList GetTree() 
6.         { 
7.             ArrayList arrReturn = new ArrayList(); 
8.             string sql = string.Format("Select * From {0} Order By PID, Seq ", tableName); 
9.             Database db = DatabaseFactory.CreateDatabase(); 
10.             DbCommand cmdWrapper = db.GetSqlStringCommand(sql); 
11.  
12.             DataSet ds = db.ExecuteDataSet(cmdWrapper); 
13.             if (ds.Tables.Count > 0) 
14.             { 
15.                 DataTable dt = ds.Tables[0]; 
16.                 DataRow[] dataRows = dt.Select(string.Format(" PID = {0}", -1)); 
17.                 for (int i = 0; i < dataRows.Length; i++) 
18.                 { 
19.                     int id = Convert.ToInt32(dataRows[i]["ID"]); 
20.                     BusinessScopeNodeInfo menuNodeInfo = GetNode(id, dt); 
21.                     arrReturn.Add(menuNodeInfo); 
22.                 } 
23.             } 
24.  
25.             return arrReturn; 
26.         } 
27.  
28.  
29.         private BusinessScopeNodeInfo GetNode(int id, DataTable dt) 
30.         { 
31.             BusinessScopeInfo menuInfo = this.FindByID(id); 
32.             BusinessScopeNodeInfo menuNodeInfo = new BusinessScopeNodeInfo(menuInfo); 
33.  
34.             DataRow[] dChildRows = dt.Select(string.Format(" PID={0}", id)); 
35.  
36.             for (int i = 0; i < dChildRows.Length; i++) 
37.             { 
38.                 int childId = Convert.ToInt32(dChildRows[i]["ID"]); 
39.                 BusinessScopeNodeInfo childNodeInfo = GetNode(childId, dt); 
40.                 menuNodeInfo.Children.Add(childNodeInfo); 
41.             } 
42.             return menuNodeInfo; 
43.         } 

其中所用到的数据实体如下面两个类所示，其中BusinessScopeNodeInfo 是对象 BusinessScopeInfo的进一步封装，方便提供树的基本信息，也就是BusinessScopeNodeInfo 是一个包含了子类数据的对象，BusinessScopeInfo仅仅是数据库对象的映射实体。
代码

1. /// <summary> 
2.    /// BusinessScopeNodeInfo 的摘要说明。 
3.    /// </summary> 
4.    public class BusinessScopeNodeInfo : BusinessScopeInfo 
5.    { 
6.        private ArrayList m_Children = new ArrayList(); 
7.  
8.        /// <summary> 
9.        /// 子菜单实体类对象集合 
10.        /// </summary> 
11.        public ArrayList Children 
12.        { 
13.            get { return m_Children; } 
14.            set { m_Children = value; } 
15.        } 
16.  
17.        public BusinessScopeNodeInfo() 
18.        { 
19.            this.m_Children = new ArrayList(); 
20.        } 
21.  
22.        public BusinessScopeNodeInfo(BusinessScopeInfo scopeInfo) 
23.        { 
24.            base.Id = scopeInfo.Id; 
25.            base.Name = scopeInfo.Name; 
26.            base.Seq = scopeInfo.Seq; 
27.        } 
28.    } 

代码

1. [Serializable] 
2.    public class BusinessScopeInfo : BaseEntity 
3.    {     
4.        #region Field Members 
5.  
6.        private decimal m_Id = 0;          
7.        private decimal m_Pid = -1;          
8.        private string m_Name = "";          
9.        private string m_Seq = "";          
10.  
11.        #endregion 
12.  
13.        #region Property Members 
14.         
15.        public virtual decimal Id 
16.        { 
17.            get 
18.            { 
19.                return this.m_Id; 
20.            } 
21.            set 
22.            { 
23.                this.m_Id = value; 
24.            } 
25.        } 
26.  
27.        public virtual decimal Pid 
28.        { 
29.            get 
30.            { 
31.                return this.m_Pid; 
32.            } 
33.            set 
34.            { 
35.                this.m_Pid = value; 
36.            } 
37.        } 
38.  
39.        public virtual string Name 
40.        { 
41.            get 
42.            { 
43.                return this.m_Name; 
44.            } 
45.            set 
46.            { 
47.                this.m_Name = value; 
48.            } 
49.        } 
50.  
51.        public virtual string Seq 
52.        { 
53.            get 
54.            { 
55.                return this.m_Seq; 
56.            } 
57.            set 
58.            { 
59.                this.m_Seq = value; 
60.            } 
61.        } 
62.  
63.  
64.        #endregion 
65.  
66.    } 

其中的数据格式大致如下(本文的例子是在Oracle环境中工作的），其实SqlServer或者其他数据库也是一样。