TreeView 控件与Vs2005(Asp.Net 2.0)-控件新闻-慧都网

TreeView 控件与Vs2005(Asp.Net 2.0)

翻译|其它|编辑：郝浩|2007-09-04 09:28:52.000|阅读 1647 次

概述：

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]

<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" ?>

</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">

<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 在进行绑定，然后做到分层。

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自：csdn

上一篇：Crystal report viewer 控件TCrystalActiveXReportViewer的使用下一篇：Ajax与XMLHttpRequest对象

在线采购

中文文档库

试用/Demo下载

开发社群