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

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

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

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

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

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

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

　　以下為HTML的代碼，其中OnTreeNodeChecked為級(jí)聯(lián)Javascript函數(shù)，SubmitValue為對(duì)返回值進(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"

howLines="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>

　　 下面代碼是頁面的后臺(tái)代碼，其中展示了如何對(duì)樹進(jìn)行數(shù)據(jù)綁定，使其能夠顯示有層次格式的內(nèi)容，其中AddTreeNode是一個(gè)遞歸函數(shù)。btnSelect_Click事件處理函數(shù)，專門對(duì)返回的數(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);

}

}

f (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ù)組裝也是需要注意的一個(gè)地方，為了提高效率，避免頻繁查找數(shù)據(jù)庫，我們先把符合條件的數(shù)據(jù)放到DataTable，然后通過對(duì)象的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í)體如下面兩個(gè)類所示，其中BusinessScopeNodeInfo&nbsp;是對(duì)象 BusinessScopeInfo的進(jìn)一步封裝，方便提供樹的基本信息，也就是BusinessScopeNodeInfo 是一個(gè)包含了子類數(shù)據(jù)的對(duì)象，BusinessScopeInfo僅僅是數(shù)據(jù)庫對(duì)象的映射實(shí)體。

　　代碼

　　    /// <summary>

/// BusinessScopeNodeInfo 的摘要說明。

/// </summary>

    public class BusinessScopeNodeInfo : BusinessScopeInfo

{

private ArrayList m_Children = new ArrayList();

/// <summary>

/// 子菜單實(shí)體類對(duì)象集合

/// </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ù)庫也是一樣。