選擇優(yōu)于輸入，這是一般人的共識，面對繁多的數(shù)據(jù)，提供良好的選擇界面，一方面增強(qiáng)用戶的界面體驗(yàn)，一方面也提高了數(shù)據(jù)的準(zhǔn)確性，更節(jié)省了用戶的寶貴時間。一般的單項(xiàng)數(shù)據(jù)選擇可以使用DropdownList控件來實(shí)現(xiàn)，但對于有多個選擇性輸入，而且輸入有層次關(guān)系的內(nèi)容，最好選擇TreeView控件來實(shí)現(xiàn)。

本文介紹如何使用使用TreeView控件來有效獲取用戶的輸入，其中涉及到TreeView控件的級聯(lián)選擇、去掉節(jié)點(diǎn)HTML鏈接變?yōu)檎归_目錄、獲取選擇內(nèi)容、如何構(gòu)造數(shù)據(jù)庫的信息變?yōu)闃湫蝺?nèi)容以及彈出窗口使用等知識點(diǎn)，本文輸入應(yīng)用級別的例子，希望能做個記號，對己對人，皆為利好!^_^

本文的經(jīng)營范圍是一個可以輸入分類及詳細(xì)子內(nèi)容的，由于內(nèi)容繁多，而且具有一定的層次關(guān)系，因此，不適合采用DropdownList和CheckboxList控件，因此采用了帶CheckBox屬性的TreeView控件來輔助用戶的輸入。

輸入界面大致如下所示，用戶通過選擇按鈕，觸發(fā)彈出對話框，在對話框中放置了TreeView控件。

在彈出的對話框中，放置的TreeView控件，一個帶有CheckBox，可以方便用戶選擇，并且具有級聯(lián)（通過Javascript實(shí)現(xiàn)，減少Post回發(fā)），另外由于內(nèi)容比較多，我設(shè)置了展開的級別層次。

用戶通過選擇或者反選大類，可以選擇或反選其列表下面的所有項(xiàng)目，也可以單獨(dú)選擇子項(xiàng)目。

由于通過Javascript不太好獲取并組裝返回的內(nèi)容，本文通過了在后臺遍歷樹的方式對返回值進(jìn)行處理，然后在父窗體的Javascript中對返回值進(jìn)行了綁定，使其在界面控件中得以顯示指定格式的內(nèi)容。

以下為HTML的代碼，其中OnTreeNodeChecked為級聯(lián)Javascript函數(shù)，SubmitValue為對返回值進(jìn)行綁定的操作。

  代碼

    <div class="search">
         <span>
             <asp:ImageButton ID="btnSelect" runat="server" 
             ImageUrl="~/Themes/Default/btn_select.gif" onclick="btnSelect_Click"
                 />
             <asp:ImageButton ID="btnClose" runat="server" OnClientClick="javascript:window.close();return false;"
                 ImageUrl="~/Themes/Default/btn_close.gif" />
         </span>
         <table cellspacing="0" cellpadding="0" border="0" width="100%">
             <tr>
                 <td class="ico">
                     &nbsp;
                 </td>
                 <td class="form">
                     <asp:TreeView ID="TreeView1" runat="server" onclick="OnTreeNodeChecked();" ShowCheckBoxes="All"
                         ShowLines="True" ExpandDepth="1" Font-Bold="False" ForeColor="#0000CC">
                     </asp:TreeView>
                 </td>
             </tr>
         </table>
    </div>

    <script language='javascript' type='text/javascript'>
         function OnTreeNodeChecked() {
             var ele = event.srcElement;
             if (ele.type == 'checkbox') {
                 var childrenDivID = ele.id.replace('CheckBox', 'Nodes');
                 var div = document.getElementById(childrenDivID);
                 if (div == null) return;
                 var checkBoxs = div.getElementsByTagName('INPUT');
                 for (var i = 0; i < checkBoxs.length; i++) {
                     if (checkBoxs[i].type == 'checkbox')
                        checkBoxs[i].checked = ele.checked;
                }
            }
        }

         function SubmitValue() {
             var val = "";
             var returnVal = new Array();
             var inputs = document.all.tags("INPUT");
             var n = 0;
             for (var i = 0; i < inputs.length; i++) // 遍歷頁面上所有的 input 
            {
                 if (inputs[i].type == "checkbox") {
                     if (inputs[i].checked) {
                         var strValue = inputs[i].value;
                        val += strValue + ',';
                         //returnVal[n] = val;
                        n = n + 1;
                    }
                 } //if(inputs[i].type="checkbox")
            } //for
            
            window.returnValue = val;
            window.close();
        }
        
    </script>

 下面代碼是頁面的后臺代碼，其中展示了如何對樹進(jìn)行數(shù)據(jù)綁定，使其能夠顯示有層次格式的內(nèi)容，其中AddTreeNode是一個遞歸函數(shù)。btnSelect_Click事件處理函數(shù)，專門對返回的數(shù)據(jù)進(jìn)行組裝，以一定的格式顯示到客戶端的控件輸入上。

  代碼

        protected void Page_Load(object sender, EventArgs e)
        {
             if (!this.IsPostBack)
            {
                BindData();
            }
        }

         private void BindData()
        {
            ArrayList scopeTree = BLLFactory<BusinessScope>.Instance.GetTree();
             foreach (BusinessScopeNodeInfo nodeInfo in scopeTree)
            {
                 TreeNode node = new TreeNode(nodeInfo.Name);
                node.SelectAction = TreeNodeSelectAction.Expand;
                 this.TreeView1.Nodes.Add(node);

                AddTreeNode(node, nodeInfo);
            }
        }

         private void AddTreeNode(TreeNode parentNode, BusinessScopeNodeInfo nodeInfo)
        {
             TreeNode treeNode = null;
             foreach (BusinessScopeNodeInfo subNodeInfo in nodeInfo.Children)
            {
                 treeNode = new TreeNode(subNodeInfo.Name);
                treeNode.SelectAction = TreeNodeSelectAction.Expand;
                parentNode.ChildNodes.Add(treeNode);

                AddTreeNode(treeNode, subNodeInfo);
            }
        }

         protected void btnSelect_Click(object sender, ImageClickEventArgs e)
        {
             string result = "";
             foreach (TreeNode parent in this.TreeView1.Nodes)
            {
                 foreach (TreeNode node in parent.ChildNodes)
                {
                     StringBuilder sb = new StringBuilder();
                     foreach (TreeNode subNode in node.ChildNodes)
                    {
                         if (subNode.Checked)
                        {
                             sb.AppendFormat("{0},", subNode.Text);
                        }
                    }
                     if (sb.Length > 0)
                    {
                         sb.Insert(0, string.Format("{0}(", node.Text));
                         sb.Append(")");
                         result += sb.ToString().Replace(",)", ")") + ";";
                    }
                     else if (node.Checked)
                    {
                        result += node.Text;
                    }                    
                }
            }
             Helper.CloseWin(this, result.Trim(';'));
         }

 其中數(shù)的數(shù)據(jù)組裝也是需要注意的一個地方，為了提高效率，避免頻繁查找數(shù)據(jù)庫，我們先把符合條件的數(shù)據(jù)放到DataTable，然后通過對象的Select在內(nèi)存中查找，這樣可以很好的提高遞歸函數(shù)的查找效率。

  代碼

        /// <summary>
         /// 獲取數(shù)據(jù)樹
         /// </summary>
         /// <returns></returns>
        public ArrayList GetTree()
        {
             ArrayList arrReturn = new ArrayList();
             string sql = string.Format("Select * From {0} Order By PID, Seq ", tableName);
            Database db = DatabaseFactory.CreateDatabase();
            DbCommand cmdWrapper = db.GetSqlStringCommand(sql);

            DataSet ds = db.ExecuteDataSet(cmdWrapper);
             if (ds.Tables.Count > 0)
            {
                 DataTable dt = ds.Tables[0];
                 DataRow[] dataRows = dt.Select(string.Format(" PID = {0}", -1));
                 for (int i = 0; i < dataRows.Length; i++)
                {
                     int id = Convert.ToInt32(dataRows[i]["ID"]);
                    BusinessScopeNodeInfo menuNodeInfo = GetNode(id, dt);
                    arrReturn.Add(menuNodeInfo);
                }
            }

             return arrReturn;
        }


         private BusinessScopeNodeInfo GetNode(int id, DataTable dt)
        {
             BusinessScopeInfo menuInfo = this.FindByID(id);
             BusinessScopeNodeInfo menuNodeInfo = new BusinessScopeNodeInfo(menuInfo);

             DataRow[] dChildRows = dt.Select(string.Format(" PID={0}", id));

             for (int i = 0; i < dChildRows.Length; i++)
            {
                 int childId = Convert.ToInt32(dChildRows[i]["ID"]);
                BusinessScopeNodeInfo childNodeInfo = GetNode(childId, dt);
                menuNodeInfo.Children.Add(childNodeInfo);
            }
             return menuNodeInfo;
         }

 其中所用到的數(shù)據(jù)實(shí)體如下面兩個類所示，其中BusinessScopeNodeInfo 是對象 BusinessScopeInfo的進(jìn)一步封裝，方便提供樹的基本信息，也就是BusinessScopeNodeInfo 是一個包含了子類數(shù)據(jù)的對象，BusinessScopeInfo僅僅是數(shù)據(jù)庫對象的映射實(shí)體。

代碼

    /// <summary>
    /// BusinessScopeNodeInfo 的摘要說明。
    /// </summary>
    public class BusinessScopeNodeInfo : BusinessScopeInfo
    {
         private ArrayList m_Children = new ArrayList();

         /// <summary>
         /// 子菜單實(shí)體類對象集合
         /// </summary>
        public ArrayList Children
        {
             get { return m_Children; }
             set { m_Children = value; }
        }

         public BusinessScopeNodeInfo()
        {
             this.m_Children = new ArrayList();
        }

         public BusinessScopeNodeInfo(BusinessScopeInfo scopeInfo)
        {
             base.Id = scopeInfo.Id;
             base.Name = scopeInfo.Name;
             base.Seq = scopeInfo.Seq;
        }
    }

  代碼

    [Serializable]
    public class BusinessScopeInfo : BaseEntity
    {    
         #region Field Members

         private decimal m_Id = 0;         
         private decimal m_Pid = -1;         
         private string m_Name = "";         
         private string m_Seq = "";         

         #endregion

         #region Property Members
        
         public virtual decimal Id
        {
             get
            {
                 return this.m_Id;
            }
             set
            {
                 this.m_Id = value;
            }
        }

         public virtual decimal Pid
        {
             get
            {
                 return this.m_Pid;
            }
             set
            {
                 this.m_Pid = value;
            }
        }

         public virtual string Name
        {
             get
            {
                 return this.m_Name;
            }
             set
            {
                 this.m_Name = value;
            }
        }

         public virtual string Seq
        {
             get
            {
                 return this.m_Seq;
            }
             set
            {
                 this.m_Seq = value;
            }
        }


         #endregion

    }

其中的數(shù)據(jù)格式大致如下(本文的例子是在Oracle環(huán)境中工作的），其實(shí)SqlServer或者其他數(shù)據(jù)庫也是一樣。