TreeView 控件与Vs2005(Asp.Net 2.0)

原创 2007年09月18日 18:05:00
reeView 控件为树状游览,类似于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();
}
}

}


 

asp.net treeview 控件的使用

    TreeView 是 ASP.NET 的 Navigation 中的一个控件,实际上就是我们平时所说的树型菜单。 在视图设计中添加 TreeView。 HTML代码清单:后台代码清单:prot...
  • liumqj
  • liumqj
  • 2011年06月16日 11:54
  • 4896

关于ASP.NET中TreeView控件的一些体会

这是一个自定义控件文件的两部分
  • carrousel0516
  • carrousel0516
  • 2010年10月19日 23:26
  • 1072

asp.net TreeView控件的用法

html   asp:Panel id="panel1" runat="server" Height="300" ScrollBars="Auto">                         ...
  • chinaly
  • chinaly
  • 2008年09月19日 14:15
  • 5756

网站导航——网站地图和TreeView的使用

ASP.NET站点导航能够在一个中央位置存储指向所有页面的连接,并在列表中呈现这些连接,也可以使用一个特定的Web服务器控件在每个页面上呈现导航菜单。设计站点导航时,使用站点地图描述站点的逻辑结构,使...
  • zc707212993
  • zc707212993
  • 2013年05月12日 19:44
  • 905

c#语言asp.net实现treeview控件

  从数据库里读数据就不写了吧?假设你得到了一个存放数据实体数组叫emps[],里面放的全是emp实体.                foreach (Emp item in emps)      ...
  • baiyun789
  • baiyun789
  • 2011年01月21日 13:42
  • 2821

ASP.NET中TreeView控件的安装及使用

因为要用到treeview控件,今天在网上捣腾了半天,终于把资料收得七七八八,下面是我找到得一些资料! (http://www.jtr.cn/ASPNET/kf/1456/091826109.shtm...
  • fancy198189
  • fancy198189
  • 2007年05月22日 15:47
  • 1416

ASP.NET - 将图像用于 TreeView 控件

      TreeView 控件具有许多不同的外观,从而可以提供灵活的图像自定义以及指定自定义用户界面 (UI) 选项的属性。您可以将图像与 TreeView 控件一起使用来表示节点、连接线以及展开...
  • dodream
  • dodream
  • 2009年12月18日 11:05
  • 3484

ASP.NET 2.0 TreeView中用JavaScript实现单选功能.

我的免费电影网站一:http://www.foxwow.com我的免费电影网站二:http://www.91free.org 由于项目要求需要实现,TreeView中CheckBox的单选功能,本人在...
  • yicel
  • yicel
  • 2007年10月11日 09:44
  • 2243

ASP.NET TreeView 用JS实现节点的单选功能

//用Treeview chekbox节点单选的处理事件 function TreeSingleSelect(treeID, checkNode) { if (!treeID) ...
  • diandian82
  • diandian82
  • 2009年03月20日 21:00
  • 3047

asp.net中TreeView异步延迟加载

在使用TreeView控件的时候,如果数据量太大,这个TreeView控件加载会很慢,有时甚至加载失败, 为了更好的使用TreeView控件加载大量的数据,采用异步延迟加载TreeView。 ...
  • sxycgxj
  • sxycgxj
  • 2014年08月26日 14:03
  • 645
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:TreeView 控件与Vs2005(Asp.Net 2.0)
举报原因:
原因补充:

(最多只允许输入30个字)