使用Asp.net的TreeView来构建用户选择输入
选择优于输入,这是一般人的共识,面对繁多的数据,提供良好的选择界面,一方面增强用户的界面体验,一方面也提高了数据的准确性,更节省了用户的宝贵时间。一般的单项数据选择可以使用DropdownList控件来实现,但对于有多个选择性输入,而且输入有层次关系的内容,最好选择TreeView控件来实现。
本文介绍如何使用使用TreeView控件来有效获取用户的输入,其中涉及到TreeView控件的级联选择、去掉节点HTML链接变为展开目录、获取选择内容、如何构造数据库的信息变为树形内容以及弹出窗口使用等知识点,本文输入应用级别的例子,希望能做个记号,对己对人,皆为利好!^_^
本文的经营范围是一个可以输入分类及详细子内容的,由于内容繁多,而且具有一定的层次关系,因此,不适合采用DropdownList和CheckboxList控件,因此采用了带CheckBox属性的TreeView控件来辅助用户的输入。
输入界面大致如下所示,用户通过选择按钮,触发弹出对话框,在对话框中放置了TreeView控件。
在弹出的对话框中,放置的TreeView控件,一个带有CheckBox,可以方便用户选择,并且具有级联(通过Javascript实现,减少Post回发),另外由于内容比较多,我设置了展开的级别层次。
用户通过选择或者反选大类,可以选择或反选其列表下面的所有项目,也可以单独选择子项目。
由于通过Javascript不太好获取并组装返回的内容,本文通过了在后台遍历树的方式对返回值进行处理,然后在父窗体的Javascript中对返回值进行了绑定,使其在界面控件中得以显示指定格式的内容。
以下为HTML的代码,其中OnTreeNodeChecked为级联Javascript函数,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>
下面代码是页面的后台代码,其中展示了如何对树进行数据绑定,使其能够显示有层次格式的内容,其中AddTreeNode是一个递归函数。btnSelect_Click事件处理函数,专门对返回的数据进行组装,以一定的格式显示到客户端的控件输入上。
代码
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(';'));
}
其中数的数据组装也是需要注意的一个地方,为了提高效率,避免频繁查找数据库,我们先把符合条件的数据放到DataTable,然后通过对象的Select在内存中查找,这样可以很好的提高递归函数的查找效率。
代码
/// <summary>
/// 获取数据树
/// </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;
}
其中所用到的数据实体如下面两个类所示,其中BusinessScopeNodeInfo 是对象 BusinessScopeInfo的进一步封装,方便提供树的基本信息,也就是BusinessScopeNodeInfo 是一个包含了子类数据的对象,BusinessScopeInfo仅仅是数据库对象的映射实体。
代码
/// <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
}
其中的数据格式大致如下(本文的例子是在Oracle环境中工作的),其实SqlServer或者其他数据库也是一样。
本文转自博客园伍华聪的博客,原文链接:使用Asp.net的TreeView来构建用户选择输入,如需转载请自行联系原博主。
使用Asp.net的TreeView来构建用户选择输入相关推荐
- 使用DataGridView数据窗口控件,构建用户快速输入体验
使用DataGridView数据窗口控件,构建用户快速输入体验 在"随风飘散" 博客里面,介绍了一个不错的DataGridView数据窗口控件<DataGridView数据窗 ...
- (转) ASP.NET 2.0:使用用户控件和定制的Web部件个人化你的门户网站(二)
Web部件目录 我们已经见过了如何在 WebPartZones 控件中事先放入Web部件.你还可以用另外一种方法完成这个功能,那就是允许用户在运行时添加新的Web部件.通过使用 CatalogZone ...
- ASP.NET2.0+SQL Server2005构建多层应用 [转]
随着.net 2.0的发布,将会使得使用ASP.NET 2.0来构建的Web应用越来越容易.使用ASP.NET 2.0和SQL Server 2005,将会比ASP.NET 1.1更方便地构建多层体系 ...
- 使用ASP.NET Core 3.x 构建 RESTful API - 2. 什么是RESTful API
1. 使用ASP.NET Core 3.x 构建 RESTful API - 1.准备工作 什么是REST REST一词最早是在2000年,由Roy Fielding在他的博士论文<Archit ...
- asp.NET中 treeview 控件的使用
asp.NET中 treeview 控件的使用 treeview控件实现点击Node,弹出相应WebUserControl画面 所需控件 treeview控件 WebUserControl,web用户 ...
- 《需求设计:构建用户想要和需要的产品》——3.7 品质
本节书摘来自华章计算机<需求设计:构建用户想要和需要的产品>一书中的第3章,第3.7节,作者: [英] 克里斯·布里顿(Chris Britton) 更多章节内容可以访问云栖社区" ...
- ASP.NET Core 入门教程 2、使用ASP.NET Core MVC框架构建Web应用
原文:ASP.NET Core 入门教程 2.使用ASP.NET Core MVC框架构建Web应用 一.前言 1.本文主要内容 使用dotnet cli创建基于解决方案(sln+csproj)的项目 ...
- 建模揭秘----构建用户模型
原文地址:http://www.ibm.com/developerworks/cn/architecture/ar-usermod2/?S_TACT=105AGX52&S_CMP=tec-cs ...
- 思路+步骤+方法,三步教你如何快速构建用户画像?
思路+步骤+方法,三步教你如何快速构建用户画像? 2016-10-07 超哥 互联网er的早读课 互联网er的早读课 数十万互联网从业者的共同关注! 作者:超哥.作者授权早读课发表,转载请联系作者. ...
- 大咖分享会 | 百度首次揭秘如何构建用户画像与移动统计
从11年开始,互联网进入大数据时代,相比传统的调查分析,大数据是企业通过互联网便利的获取用户更广泛的反馈信息,为进一步精准.快速地分析用户行为习惯.消费习惯等重要商业信息,提供了足够的数据基础.本次P ...
最新文章
- Python 集合、序列基础知识
- android byte[] 转string 好多问号_Android 仿抖音实现动态壁纸
- 标贝科技语音论文入选全球顶级语音学术大会INTERSPEECH2019
- sql语句返回近似值
- UVW 在C#中的代码实现
- 开始看看repast建模方面的东西
- PPC手机上用Skype打电话的方法
- vs c++ 判断注册表键值是否存在
- mysql execute stmt_mysql_stmt_execute()--MySql数据库
- sumifs多条件求和步骤,sumifs函数运用
- 旋转矩阵(Rotate Matrix)的性质分析
- SpringBoot下DataSource连接配置
- 许嵩的60句感人歌词,道出了学生时代实在爱情的伤与痛~
- 如何免费建立一个网站?
- 相机系统综述 —— ISP
- Python KPM算法
- iOS实现iCloud数据存储-Swift3.0
- Android实现TTS语音播报
- 软件逆向工程学习(一)
- PMP项目管理中的重要角色
热门文章
- es 时间字段聚合_es lucene搜索及聚合流程源码分析
- mysql exporter怎么配置_prometheus mysqld_exporter监控mysql-5.7
- 2021-09-1031. 下一个排列 数组
- 2021-08-31Flink 中的核心概念和基础考察
- Evolved Transformer
- python正则表达式模块re
- 【Gym — 101473 G】Lines of Containers【思维题】
- 引入log4j日志包为何会自动导入额外两个包(门面模式)
- 简单的避免idea自动导入 *
- 超级计算机想象作文700字,智能世界想象作文700字