TreeView 控件与Vs2005(Asp.Net 2.0)作者:NetFetch
2007-09-03 15:24
381 查看
TreeView 控件为树状游览，类似于WINDOWS的资源管理器，TreeView 控件特点是信息 项呈树状层次结构，能更清晰地表现主、细目关系，TreeView操作非常方便。
ASP.net 2.0以前，TreeView 控件并非VS附带的控件，而是TreeView IE Web 控件，而需要到微软官方去下载；在ASP.net 2.0 中，一些新的更加方便的控件被加了进来，为了方便自己学习这些控件，我把我自己学习这些控件的知识整理成这个系列文章。文章可能很简单，如果已经知道这些知识点的就不用再看了。
ASP.net 2.0中TreeView 控件。
以前我们要在网页中实现一个树，是非常麻烦的，其最麻烦的地方在于，兼容不同版本的浏览器。而绝大多数人，对各个浏览器分别支持那些JavaScript、CSS、Html 标签不是很熟悉，就造成开发一个树复杂，甚至只支持少量的浏览器。
ASP.net 2.0 中，微软为我们预先作了很多方面的控件，TreeView 就是其中一个。
在介绍TreeView 之前， 我们先在网页中，用TreeView实现一个树。我们边看代码，边来学习这个树控件。
新建一个ASPX页面，输入如下代码：
程序代码
<html>
<body>
<h3>一个简单树的展示</h3>[nfScript]google_ad_client = "pub-4475724770859924";google_alternate_color = "FFBBE8";google_ad_width = 468;google_ad_height = 60;google_ad_format = "468x60_as";google_ad_type = "text_image";google_ad_channel ="9379930647";google_color_border = "F8F8F8";google_color_bg = "FFFFFF";google_color_link = "FF6FCF";google_color_url = "38B63C";google_color_text = "B3B3B3";[/nfScript][nfScript=http://pagead2.googlesyndication.com/pagead/show_ads.js][/nfScript]
<form id="form1" runat="server">
<asp:TreeView ID="SampleTreeView" runat="server">
<Nodes>
<asp:TreeNode Value="个人电脑" NavigateUrl="PC.aspx" Text="个人电脑" Target="Content" Expanded="True">
<asp:TreeNode Value="硬件" NavigateUrl="hardware.aspx" Text="硬件" Target="Content">
<asp:TreeNode Value="CPU" NavigateUrl="cpu.aspx" Text="CPU" Target="Content" />
<asp:TreeNode Value="内存" NavigateUrl="memory.aspx" Text="内存" Target="Content" />
</asp:TreeNode>
<asp:TreeNode Value="软件" NavigateUrl="software.aspx" Text="软件" Target="Content" />
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</form>
</body>
</html>
执行，我们就可以看到一个我们定义好的树被展示出来了。
TreeView 控件必须在服务器段运行的From中使用（因为需要处理用户点击某个树结点，然后导航到指定的地址，以及一些事件的处理） 。
TreeView 控件中的 Nodes 节点内的XML信息，就是定义我们要展示的树的信息。
Asp:TreeNode 则是定义树中每一个树节点。
利用TreeView控件动态生成无限级树
首先注意到了TreeView控件有一个属性TreeNodeSrc
这个属性可以指定一个固定格式的xml文件
程序代码
<?xml version="1.0" encoding="utf-8" ?>
<TREENODES>
<TREENODE text="aaaaaaaa" CheckBox="true"></TREENODE>
<TREENODE text="bbbbbbbb" CheckBox="true"></TREENODE>
<TREENODE text="cccccccccc" EXPANDED="true" CheckBox="true">
<TREENODE text="ddddddddd" CheckBox="true"></TREENODE>
<TREENODE text="eeeeeeeee" CheckBox="true"></TREENODE>
</TREENODE>
<TREENODE text="fffffffffffff" CheckBox="true"></TREENODE>
</TREENODES>
于是就想把数据库里的文件读出来写入一个xml文件中，然后再进行绑定
既然是无限级菜单，肯定要用到递归来实现，于是就写了一个如下的递归算法
程序代码
private void CreateXml(XmlDocument objXMLDoc, XmlElement objRootElem, int belong)
{
//Get DataSet 这里的DataSet具体获取方法我省略掉了
DataSet ds = new DataSet();
foreach(DataRow dr in ds.Tables[0].Rows)
{
//Create ChildNode TreeNode
XmlElement objXmlElem = objXMLDoc.CreateElement("TREENODE");
objRootElem.AppendChild(objXmlElem);
//Create Attributes Text
XmlAttribute objXmlAttText = objXMLDoc.CreateAttribute("Text");
objXmlAttText.Value = dr["text"].ToString().Trim();
objXmlElem.SetAttributeNode(objXmlAttText);
//Create Attributes CheckBox
XmlAttribute objXmlAttCB = objXMLDoc.CreateAttribute("CheckBox");
objXmlAttCB.Value = "True";
objXmlElem.SetAttributeNode(objXmlAttCB);
int id = int.Parse(dr["id"].ToString().Trim());
CreateXml(objXMLDoc, objXmlElem, id);
}
}
然后用下面的方法来实现绑定
程序代码
private void BindXmlTree()
{
//Create Xml File
XmlDocument objXmlDoc = new XmlDocument();
//Insert Xml Declaration
XmlDeclaration objXmlDeclare = objXmlDoc.CreateXmlDeclaration("1.0", "UTF-8", "yes");
objXmlDoc.InsertBefore(objXmlDeclare, objXmlDoc.DocumentElement);
XmlElement objRootElem = objXmlDoc.CreateElement("TREENODES");
objXmlDoc.AppendChild(objRootElem);
CreateXml(objXmlDoc, objRootElem, 0);
objXmlDoc.Save("E://TreeMenu.xml");
TreeView2.TreeNodeSrc = "TreeMenu.xml";
}
到最后两行我就停住了，因为问题出现了
生成的objXmlDoc文件不知道用什么方式才能绑定上TreeNodeSrc
我试了试直接 TreeView2.TreeNodeSrc = objXmlDoc;
可是TreeNodeSrc是String型的数据，没办法
有没有什么方法可以不保存这个objXmlDoc文件而直接绑定呢？
于是就换了个办法来实现
TreeView有一个节点控件叫TreeNode，直接把数据给TreeNode上
程序代码
private void CreateTree(int belong, Microsoft.Web.UI.WebControls.TreeNode rootnode)
{
DataSet ds = new DataSet();
foreach(DataRow dr in ds.Tables[0].Rows)
{
Microsoft.Web.UI.WebControls.TreeNode treenode = new Microsoft.Web.UI.WebControls.TreeNode();
treenode.Text = dr["text"].ToString().Trim();
treenode.CheckBox = true;
treenode.Expanded = true;
rootnode.Nodes.Add(treenode);
int id = int.Parse(dr["id"].ToString().Trim());
CreateTree(id, treenode);
}
}
用的是一样的递归思想，而且我发现这样做还比较简单一些，很多TreeNode自带的属性很方便修改
如果用Xml还要手动去添加每一个属性，麻烦
在PageLoad里触发这个方法
程序代码
private void Page_Load(object sender, System.EventArgs e)
{
Microsoft.Web.UI.WebControls.TreeNode rootnode = new Microsoft.Web.UI.WebControls.TreeNode();
rootnode.Expanded = true;
TreeView2.Nodes.Add(rootnode);
CreateTree(0, rootnode);
}
注意，这里为了实现递归，不得不添加一个空的根节点rootnode
这样就算大致实现了
另，数据库里的数据格式是这样的
-----------------------------------------
id text belong
1 aaaa 0
2 bbbb 0
3 cccc 0
4 dddd 1
5 eeee 2
6 ffff 4
VS 005中TreeView控件绑定xml
Asp.net 2.0，TreeView控件xml绑定的用法有些不太一样，后置代码动态绑定是完全可以的。以下是个人的做法：
脚本：
程序代码
<div>
<asp:XmlDataSource ID="AreaDataSource" runat="server"/>
<asp:TreeView ID="AreaTreeView" runat="server" DataSourceID="AreaDataSource">
<DataBindings>
<asp:TreeNodeBinding DataMember="AreaId" TextField="#InnerText" />
<asp:TreeNodeBinding DataMember="Area" TextField="#InnerText" />
<asp:TreeNodeBinding DataMember="FatherId" TextField="#InnerText" />
</DataBindings>
</asp:TreeView>
</div>
代码：
程序代码
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
CreateXML();
TreeViewBind();
}
}
[nfScript]google_ad_client = "pub-4475724770859924";google_alternate_color = "FFBBE8";google_ad_width = 468;google_ad_height = 60;google_ad_format = "468x60_as";google_ad_type = "text_image";google_ad_channel ="9379930647";google_color_border = "F8F8F8";google_color_bg = "FFFFFF";google_color_link = "FF6FCF";google_color_url = "38B63C";google_color_text = "B3B3B3";[/nfScript][nfScript=http://pagead2.googlesyndication.com/pagead/show_ads.js][/nfScript]
private void TreeViewBind()
{
AreaDataSource.DataFile = "~/App_Data/XML/AreaXml.xml";
AreaDataSource.XPath = "/NewDataSet/Table";
AreaTreeView.DataBind();
}
private void CreateXML()
{
string sql = "select AreaId,Area,FatherId from Example_Areas";
DataSet ds = new DataSet();
DBDealer db = new DBDealer();
ds = db.ExeSelectDS(sql);
string path = Server.MapPath("~/App_Data/XML/AreaXml.xml");
if (!File.Exists(path))
{
try
{
ds.WriteXml(path);
}
catch
{
throw new Exception("生成xml文件失败!");
}
finally
{
ds.Dispose();
}
}
}
只是简单的使用DataSet生成一个Xml文件，然后直接绑定。可以根据楼主的生成一定样式的xml在进行绑定，然后做到分层。
原帖链接:http://www.ad0.cn/netfetch/article.asp?id=334
ASP.net 2.0以前，TreeView 控件并非VS附带的控件，而是TreeView IE Web 控件，而需要到微软官方去下载；在ASP.net 2.0 中，一些新的更加方便的控件被加了进来，为了方便自己学习这些控件，我把我自己学习这些控件的知识整理成这个系列文章。文章可能很简单，如果已经知道这些知识点的就不用再看了。
ASP.net 2.0中TreeView 控件。
以前我们要在网页中实现一个树，是非常麻烦的，其最麻烦的地方在于，兼容不同版本的浏览器。而绝大多数人，对各个浏览器分别支持那些JavaScript、CSS、Html 标签不是很熟悉，就造成开发一个树复杂，甚至只支持少量的浏览器。
ASP.net 2.0 中，微软为我们预先作了很多方面的控件，TreeView 就是其中一个。
在介绍TreeView 之前， 我们先在网页中，用TreeView实现一个树。我们边看代码，边来学习这个树控件。
新建一个ASPX页面，输入如下代码：
程序代码
<html>
<body>
<h3>一个简单树的展示</h3>[nfScript]google_ad_client = "pub-4475724770859924";google_alternate_color = "FFBBE8";google_ad_width = 468;google_ad_height = 60;google_ad_format = "468x60_as";google_ad_type = "text_image";google_ad_channel ="9379930647";google_color_border = "F8F8F8";google_color_bg = "FFFFFF";google_color_link = "FF6FCF";google_color_url = "38B63C";google_color_text = "B3B3B3";[/nfScript][nfScript=http://pagead2.googlesyndication.com/pagead/show_ads.js][/nfScript]
<form id="form1" runat="server">
<asp:TreeView ID="SampleTreeView" runat="server">
<Nodes>
<asp:TreeNode Value="个人电脑" NavigateUrl="PC.aspx" Text="个人电脑" Target="Content" Expanded="True">
<asp:TreeNode Value="硬件" NavigateUrl="hardware.aspx" Text="硬件" Target="Content">
<asp:TreeNode Value="CPU" NavigateUrl="cpu.aspx" Text="CPU" Target="Content" />
<asp:TreeNode Value="内存" NavigateUrl="memory.aspx" Text="内存" Target="Content" />
</asp:TreeNode>
<asp:TreeNode Value="软件" NavigateUrl="software.aspx" Text="软件" Target="Content" />
</asp:TreeNode>
</Nodes>
</asp:TreeView>
</form>
</body>
</html>
执行，我们就可以看到一个我们定义好的树被展示出来了。
TreeView 控件必须在服务器段运行的From中使用（因为需要处理用户点击某个树结点，然后导航到指定的地址，以及一些事件的处理） 。
TreeView 控件中的 Nodes 节点内的XML信息，就是定义我们要展示的树的信息。
Asp:TreeNode 则是定义树中每一个树节点。
利用TreeView控件动态生成无限级树
首先注意到了TreeView控件有一个属性TreeNodeSrc
这个属性可以指定一个固定格式的xml文件
程序代码
<?xml version="1.0" encoding="utf-8" ?>
<TREENODES>
<TREENODE text="aaaaaaaa" CheckBox="true"></TREENODE>
<TREENODE text="bbbbbbbb" CheckBox="true"></TREENODE>
<TREENODE text="cccccccccc" EXPANDED="true" CheckBox="true">
<TREENODE text="ddddddddd" CheckBox="true"></TREENODE>
<TREENODE text="eeeeeeeee" CheckBox="true"></TREENODE>
</TREENODE>
<TREENODE text="fffffffffffff" CheckBox="true"></TREENODE>
</TREENODES>
于是就想把数据库里的文件读出来写入一个xml文件中，然后再进行绑定
既然是无限级菜单，肯定要用到递归来实现，于是就写了一个如下的递归算法
程序代码
private void CreateXml(XmlDocument objXMLDoc, XmlElement objRootElem, int belong)
{
//Get DataSet 这里的DataSet具体获取方法我省略掉了
DataSet ds = new DataSet();
foreach(DataRow dr in ds.Tables[0].Rows)
{
//Create ChildNode TreeNode
XmlElement objXmlElem = objXMLDoc.CreateElement("TREENODE");
objRootElem.AppendChild(objXmlElem);
//Create Attributes Text
XmlAttribute objXmlAttText = objXMLDoc.CreateAttribute("Text");
objXmlAttText.Value = dr["text"].ToString().Trim();
objXmlElem.SetAttributeNode(objXmlAttText);
//Create Attributes CheckBox
XmlAttribute objXmlAttCB = objXMLDoc.CreateAttribute("CheckBox");
objXmlAttCB.Value = "True";
objXmlElem.SetAttributeNode(objXmlAttCB);
int id = int.Parse(dr["id"].ToString().Trim());
CreateXml(objXMLDoc, objXmlElem, id);
}
}
然后用下面的方法来实现绑定
程序代码
private void BindXmlTree()
{
//Create Xml File
XmlDocument objXmlDoc = new XmlDocument();
//Insert Xml Declaration
XmlDeclaration objXmlDeclare = objXmlDoc.CreateXmlDeclaration("1.0", "UTF-8", "yes");
objXmlDoc.InsertBefore(objXmlDeclare, objXmlDoc.DocumentElement);
XmlElement objRootElem = objXmlDoc.CreateElement("TREENODES");
objXmlDoc.AppendChild(objRootElem);
CreateXml(objXmlDoc, objRootElem, 0);
objXmlDoc.Save("E://TreeMenu.xml");
TreeView2.TreeNodeSrc = "TreeMenu.xml";
}
到最后两行我就停住了，因为问题出现了
生成的objXmlDoc文件不知道用什么方式才能绑定上TreeNodeSrc
我试了试直接 TreeView2.TreeNodeSrc = objXmlDoc;
可是TreeNodeSrc是String型的数据，没办法
有没有什么方法可以不保存这个objXmlDoc文件而直接绑定呢？
于是就换了个办法来实现
TreeView有一个节点控件叫TreeNode，直接把数据给TreeNode上
程序代码
private void CreateTree(int belong, Microsoft.Web.UI.WebControls.TreeNode rootnode)
{
DataSet ds = new DataSet();
foreach(DataRow dr in ds.Tables[0].Rows)
{
Microsoft.Web.UI.WebControls.TreeNode treenode = new Microsoft.Web.UI.WebControls.TreeNode();
treenode.Text = dr["text"].ToString().Trim();
treenode.CheckBox = true;
treenode.Expanded = true;
rootnode.Nodes.Add(treenode);
int id = int.Parse(dr["id"].ToString().Trim());
CreateTree(id, treenode);
}
}
用的是一样的递归思想，而且我发现这样做还比较简单一些，很多TreeNode自带的属性很方便修改
如果用Xml还要手动去添加每一个属性，麻烦
在PageLoad里触发这个方法
程序代码
private void Page_Load(object sender, System.EventArgs e)
{
Microsoft.Web.UI.WebControls.TreeNode rootnode = new Microsoft.Web.UI.WebControls.TreeNode();
rootnode.Expanded = true;
TreeView2.Nodes.Add(rootnode);
CreateTree(0, rootnode);
}
注意，这里为了实现递归，不得不添加一个空的根节点rootnode
这样就算大致实现了
另，数据库里的数据格式是这样的
-----------------------------------------
id text belong
1 aaaa 0
2 bbbb 0
3 cccc 0
4 dddd 1
5 eeee 2
6 ffff 4
VS 005中TreeView控件绑定xml
Asp.net 2.0，TreeView控件xml绑定的用法有些不太一样，后置代码动态绑定是完全可以的。以下是个人的做法：
脚本：
程序代码
<div>
<asp:XmlDataSource ID="AreaDataSource" runat="server"/>
<asp:TreeView ID="AreaTreeView" runat="server" DataSourceID="AreaDataSource">
<DataBindings>
<asp:TreeNodeBinding DataMember="AreaId" TextField="#InnerText" />
<asp:TreeNodeBinding DataMember="Area" TextField="#InnerText" />
<asp:TreeNodeBinding DataMember="FatherId" TextField="#InnerText" />
</DataBindings>
</asp:TreeView>
</div>
代码：
程序代码
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
CreateXML();
TreeViewBind();
}
}
[nfScript]google_ad_client = "pub-4475724770859924";google_alternate_color = "FFBBE8";google_ad_width = 468;google_ad_height = 60;google_ad_format = "468x60_as";google_ad_type = "text_image";google_ad_channel ="9379930647";google_color_border = "F8F8F8";google_color_bg = "FFFFFF";google_color_link = "FF6FCF";google_color_url = "38B63C";google_color_text = "B3B3B3";[/nfScript][nfScript=http://pagead2.googlesyndication.com/pagead/show_ads.js][/nfScript]
private void TreeViewBind()
{
AreaDataSource.DataFile = "~/App_Data/XML/AreaXml.xml";
AreaDataSource.XPath = "/NewDataSet/Table";
AreaTreeView.DataBind();
}
private void CreateXML()
{
string sql = "select AreaId,Area,FatherId from Example_Areas";
DataSet ds = new DataSet();
DBDealer db = new DBDealer();
ds = db.ExeSelectDS(sql);
string path = Server.MapPath("~/App_Data/XML/AreaXml.xml");
if (!File.Exists(path))
{
try
{
ds.WriteXml(path);
}
catch
{
throw new Exception("生成xml文件失败!");
}
finally
{
ds.Dispose();
}
}
}
只是简单的使用DataSet生成一个Xml文件，然后直接绑定。可以根据楼主的生成一定样式的xml在进行绑定，然后做到分层。
原帖链接:http://www.ad0.cn/netfetch/article.asp?id=334
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- TreeView 控件与Vs2005(Asp.Net 2.0)
- 动手做ASP.NET 2.0服务器端控件——AutoCheckTreeView（二）接口设计
- 树型节点与数据库的动态连接（asp.net 2.0 TreeView控件的使用）
- ASP.NET 2.0里Treeview控件中对Checkbox的联级选择
- 使用Asp.net 2.0设计的三种控件（TreeView，DropDownList，GridView）的无限分类
- 不仅仅是开发控件--《道不远人--深入解析ASP.NET 2.0控件开发》作者序
- Asp.net 2.0 TreeView控件使用jQuery无刷新添加节点详细说明
- Asp.net 2.0 TreeView控件使用jQuery无刷新添加节点详细说明
- ASP.NET 2.0 TreeView 树状控件-父子节点选择javascript脚本
- ASP.NET 2.0的导航控件treeview和menu的实例
- asp.net 2.0中 TreeView 控件
- 虚拟主机下asp.net 2.0的导航控件treeview,menu等出错。
- Asp.net 2.0 TreeView控件使用jQuery无刷新添加节点详细说明
- 动手做ASP.NET 2.0服务器端控件——AutoCheckTreeView（一）功能讨论
- ASP.Net 2.0 TreeView控件 介绍 详解
- 来源：天极网 作者：高义 Public: 2006-08-19 ASP.NET 2.0 GridView控件应用模版
- 用jQuery实现asp.net 2.0 treeview控件完全无刷新操作实例(AJAX的增、删、改、选择以及展开收缩节点)
- 虚拟主机下asp.net 2.0的导航控件treeview,menu等出错
- ASP.NET 2.0 中的新增服务、控件与功能概述--作者：Jeff Prosise
- 使用 asp.net 2.0 自带的TreeView控件显示内联表数据（树状数据）