Asp.net TreeView來構(gòu)建用戶選擇輸入的方法 推薦
本文介紹如何使用使用TreeView控件來有效獲取用戶的輸入,其中涉及到TreeView控件的級聯(lián)選擇、去掉節(jié)點HTML鏈接變?yōu)檎归_目錄、獲取選擇內(nèi)容、如何構(gòu)造數(shù)據(jù)庫的信息變?yōu)闃湫蝺?nèi)容以及彈出窗口使用等知識點,本文輸入應(yīng)用級別的例子,希望能做個記號,對己對人,皆為利好!^_^
本文的經(jīng)營范圍是一個可以輸入分類及詳細子內(nèi)容的,由于內(nèi)容繁多,而且具有一定的層次關(guān)系,因此,不適合采用DropdownList和CheckboxList控件,因此采用了帶CheckBox屬性的TreeView控件來輔助用戶的輸入。
輸入界面大致如下所示,用戶通過選擇按鈕,觸發(fā)彈出對話框,在對話框中放置了TreeView控件。
在彈出的對話框中,放置的TreeView控件,一個帶有CheckBox,可以方便用戶選擇,并且具有級聯(lián)(通過Javascript實現(xiàn),減少Post回發(fā)),另外由于內(nèi)容比較多,我設(shè)置了展開的級別層次。
用戶通過選擇或者反選大類,可以選擇或反選其列表下面的所有項目,也可以單獨選擇子項目。
由于通過Javascript不太好獲取并組裝返回的內(nèi)容,本文通過了在后臺遍歷樹的方式對返回值進行處理,然后在父窗體的Javascript中對返回值進行了綁定,使其在界面控件中得以顯示指定格式的內(nèi)容。
以下為HTML的代碼,其中OnTreeNodeChecked為級聯(lián)Javascript函數(shù),SubmitValue為對返回值進行綁定的操作。
代碼
<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">
</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>
下面代碼是頁面的后臺代碼,其中展示了如何對樹進行數(shù)據(jù)綁定,使其能夠顯示有層次格式的內(nèi)容,其中AddTreeNode是一個遞歸函數(shù)。btnSelect_Click事件處理函數(shù),專門對返回的數(shù)據(jù)進行組裝,以一定的格式顯示到客戶端的控件輸入上。
代碼
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ù)實體如下面兩個類所示,其中BusinessScopeNodeInfo 是對象 BusinessScopeInfo的進一步封裝,方便提供樹的基本信息,也就是BusinessScopeNodeInfo 是一個包含了子類數(shù)據(jù)的對象,BusinessScopeInfo僅僅是數(shù)據(jù)庫對象的映射實體。
代碼
/// <summary>
/// BusinessScopeNodeInfo 的摘要說明。
/// </summary>
public class BusinessScopeNodeInfo : BusinessScopeInfo
{
private ArrayList m_Children = new ArrayList();
/// <summary>
/// 子菜單實體類對象集合
/// </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)境中工作的),其實SqlServer或者其他數(shù)據(jù)庫也是一樣。

主要研究技術(shù):代碼生成工具、Visio二次開發(fā)
轉(zhuǎn)載請注明出處:
撰寫人:伍華聰
- 使用基于Node.js的構(gòu)建工具Grunt來發(fā)布ASP.NET MVC項目
- ASP.NET MVC3手把手教你構(gòu)建Web
- ASP.NET性能優(yōu)化之構(gòu)建自定義文件緩存
- ASP.NET2.0+SQL Server2005構(gòu)建多層應(yīng)用
- ASP.NET MVC+EF框架+EasyUI實現(xiàn)權(quán)限管系列
- ASP.NET中的Inherits、CodeFile、CodeBehind的區(qū)別詳解
- asp.net(c#)ref,out ,params的區(qū)別
- asp.net TemplateField模板中的Bind方法和Eval方法
- ASP.NET Ref和Out關(guān)鍵字區(qū)別分析
- ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后臺管理系統(tǒng)之前端頁面框架構(gòu)建源碼分享
相關(guān)文章
asp.net中EXCEL數(shù)據(jù)導(dǎo)入到數(shù)據(jù)庫的方法
這篇文章主要介紹了asp.net中EXCEL數(shù)據(jù)導(dǎo)入到數(shù)據(jù)庫的方法,實現(xiàn)讀取excel數(shù)據(jù)并導(dǎo)入到SQL Server數(shù)據(jù)庫的功能,是非常實用的技巧,需要的朋友可以參考下2015-01-01.Net微信網(wǎng)頁開發(fā)解決用戶在不同公眾號或在公眾號、移動應(yīng)用之間帳號統(tǒng)一問題
這篇文章主要介紹了.Net微信網(wǎng)頁開發(fā)解決用戶在不同公眾號或在公眾號、移動應(yīng)用之間帳號統(tǒng)一問題,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09ASP.NET Core使用GraphQL第一章之Hello World
這篇文章主要給大家介紹了關(guān)于ASP.NET Core使用GraphQL第一章之Hello World的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11ASP.NET 固定標(biāo)題列與欄位的具體實現(xiàn)
客戶提這個要求很久了,最近才時間弄,但是看到百度中要沒有很多詳細的代碼。廢話不多說直接貼代碼。2013-06-06如何利用擴展方法來鏈?zhǔn)降膶VC 3中的頁面進行驗證
雖然擴展方法只是改變了我們寫代碼的方式,但是如果我們使用得當(dāng),可以給我們帶來巨大的編碼效率的提升接下來介紹通過擴展方法(鏈?zhǔn)椒椒ǎ镸VC 3視圖添加驗證2013-01-01總結(jié)Visual Studio下ASP.NET模板化控件中的數(shù)據(jù)綁定
.NET框架中提供了很多數(shù)據(jù)綁定的組件,這里我們就來總結(jié)Visual Studio下ASP.NET模板化控件中的數(shù)據(jù)綁定,需要的朋友可以參考下2016-06-06ASP.NET?MVC5網(wǎng)站開發(fā)之用戶資料的修改和刪除3(七)
這篇文章主要為大家詳細介紹了ASP.NET?MVC5網(wǎng)站開發(fā)之用戶資料的修改和刪除,感興趣的小伙伴們可以參考一下2016-08-08狀態(tài)保存機制之ViewState概述及應(yīng)用
無狀態(tài)的根本原因是:瀏覽器和服務(wù)器使用Socket通信,服務(wù)器將請求結(jié)果返回給瀏覽器后,會關(guān)閉當(dāng)前Socket連接,接下來介紹狀態(tài)保存機制,感興趣的朋友可以了解下2013-02-02.net core部署到windows服務(wù)上的完整步驟
這篇文章主要給大家介紹了關(guān)于.net core部署到windows服務(wù)上的完整步驟,文中通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用.net core具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09