关闭

TreeView 控件与Vs2005(Asp.Net 2.0)

672人阅读 评论(0) 收藏 举报
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();
}
}

}


 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:259365次
    • 积分:3626
    • 等级:
    • 排名:第9308名
    • 原创:125篇
    • 转载:15篇
    • 译文:0篇
    • 评论:51条
    文章分类
    最新评论
    JS广告