快捷導(dǎo)航

Asp.net TreeView來(lái)構(gòu)建用戶選擇輸入的方法推薦

更新時(shí)間：2009年12月28日 00:17:53 作者：

選擇優(yōu)于輸入，這是一般人的共識(shí)，面對(duì)繁多的數(shù)據(jù)，提供良好的選擇界面，一方面增強(qiáng)用戶的界面體驗(yàn)，一方面也提高了數(shù)據(jù)的準(zhǔn)確性，更節(jié)省了用戶的寶貴時(shí)間。

一般的單項(xiàng)數(shù)據(jù)選擇可以使用DropdownList控件來(lái)實(shí)現(xiàn)，但對(duì)于有多個(gè)選擇性輸入，而且輸入有層次關(guān)系的內(nèi)容，最好選擇TreeView控件來(lái)實(shí)現(xiàn)。

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

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

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

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

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

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

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

復(fù)制代碼代碼如下:

 
<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++) // 遍歷頁(yè)面上所有的 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> 

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

復(fù)制代碼代碼如下:

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

復(fù)制代碼代碼如下:

 
/// <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 是對(duì)象 BusinessScopeInfo的進(jìn)一步封裝，方便提供樹的基本信息，也就是BusinessScopeNodeInfo 是一個(gè)包含了子類數(shù)據(jù)的對(duì)象，BusinessScopeInfo僅僅是數(shù)據(jù)庫(kù)對(duì)象的映射實(shí)體。
代碼

復(fù)制代碼代碼如下:

 
/// <summary> 
/// BusinessScopeNodeInfo 的摘要說(shuō)明。 
/// </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; 
} 
} 

代碼

復(fù)制代碼代碼如下:

 
[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 
} 