单元8网站导航二利用treeview设计树形

单元八网站导航（二）利用TreeView设计网站树形导航主讲教师：徐占鹏学习目标【知识目标】掌握TreeView设计树形结构导航的方法；【技能目标】能够利用TreeView控件设计导航注：本课内容参考教材单元二 任务

8.2任务陈述任务构思与目标：利用TreeView控件根据需求新建

SelectOKShop网站的的站点导导航页Navigation.aspx，并应用MasterPageQian.master母板，结果如图8-4所示，为方便管理，管理员后台的所有页面都在站点根目录下的

Admin文件夹中，现在要在该文件夹中添加新页admin.aspx，在该页面设置TreeView导航。管理员后台有用户管理、新闻发布管理、新闻类别管理等页面。TreeView控件简介TreeView控件用来显示信息的分级视图，如同Windows里的资源管理器的目录。TreeView控件中的各项信息都有一个与之相关的Node对象。TreeView显示Node对象的分层目录结构，每个Node对象均由一个Label对象和其相关的位图组成。在建立TreeView控件后，我们可以展开和折叠、显示或隐藏其中的节点。TreeView控件一般用来显示文件和目录结构、文档中的类层次、索引中的层次和其他具有分层目录结构的信息。TreeView控件简介TreeView控件的关键属性属性说明CheckedNodes声明被选择的单个或多个节点ExpandDepth声明TreeView控件展开的深NodesTreeNodeCollection类型的节点集合SelectedNode当前被选择的节点ShowCheckBoxes声明是否显示复选框ShwoExpandCollapse声明展开/折叠状态ShowLines声明节点间是否以线连接LevelStyles指定每个层次的节点的样式NodeStyle指定节点的默认样式RootNodeStyle指定根节点的样式LeafNodeStyle指定子节点的样式SelectedNodeStyle指定选定节点的样式HoverNodeStyle指定当鼠标移动到节点上方时的样式ImageUrl

Properties指定表示展开/折叠的图片的URL路径TreeView控件简介属性说明Checked标明节点上的复选框的选择状态ImageUrl标明节点上所用图片的url路径NavigateUrl当单击节点时所要导航到的url路径SelectAciton无导航节点被单击时所要执行的动作

Selected

标明当前节点是否被选择的节点ShowCheckBox标明当前节点是否显示复选框

Text节点上的文字TreeView控件的关键属性TreeView控件简介事件说明CheckChanged当复选框被选择或清除时所触发的事件SelectedNodeChanged当选择的节点发生改变时触发的事件TreeNodeCollapsed

当分支被折叠时所触发的事件TreeNodeExpanded当分支被展开时所触发的事件TreeNodeDataBound当节点被绑定到数据源时所触发的事件

TreeNodePopulate

only

fired

onserver

ifEnableClientScript=”false”TreeView控件的常用事件TreeView控件的数据显示TreeView控件可以显示几种不同类型的数据：在控件中可以以声明方式指定的静态数据、可以使用站点地图作为数据源，也可以自行编写简单的XML文件作为数据源，或作为对用户操作的响应通过执行代码添加到TreeView控件中的数据。1．显示静态数据可以通过创建TreeNode元素集合，这些元素是TreeView控件的子级，在TreeView控件中显示静态数据。这些子元素也被称为子节点。TreeView控件的数据显示【实例】演示用于TreeView控件的标记，该控件包含三个节点，其中两个节点具有子节点。<asp:TreeView

ID="MyTreeView"

Runat="server"><Nodes><asp:TreeNode

Value="Child1"

Expanded="True"

Text="1"><asp:TreeNode

Value="Grandchild1"

Text="A"

/><asp:TreeNode

Value="Grandchild2"

Text="B"

/></asp:TreeNode><asp:TreeNode

Value="Child2"

Text="2"

/><asp:TreeNode

Value="Child3"

Expanded="True"

Text="3"><asp:TreeNode

Value="Grandchild1"

Text="A"

/></asp:TreeNode></Nodes></asp:TreeView>TreeView控件的数据显示【实例】通过手动添加TreeView控件的节点的方式制作电子书导航TreeView控件的数据显示2．显示动态数据TreeView控件由一个或多个节点构成。树中的每个项都被称为一个节点，由TreeNode对象表示。下表描述了三种不同的节点类型：根节点：没有父节点、但具有一个或多个子节点的节点。父节点：具有一个父节点，并且有一个或多个子节点的节点。叶节点：没有子节点的节点。TreeView控件的数据显示可以通过代码动态添加TreeView控件的节点，通过访问

Nodes属性（该属性将返回TreeNodeCollection类），可以通过编程向TreeView控件填充数据。

TreeNodeCollection是TreeNode对象的强类型集合。

TreeNode对象含有一个名为ChildNodes的属性。由于该属性可进一步包含TreeNode对象，所以TreeNodeCollection类是一个表示TreeView控件的所有节点的分层数据结构。TreeView控件的数据显示【实例】通过代码动态添加TreeView控件的节点

添加一个TreeView控件，命名为

“TreeView1”，添加如下代码：protected

void

Page_Load(object

sender,

EventArgse)

{ TreeNodenode=newTreeNode();//这个结点是根节点。node.Text

=

"hope";TreeView1.Nodes.Add(node);TreeNode

node1

=

new

TreeNode();node1.Text

=

"hopeone";TreeNode

node11

=

new

TreeNode();node11.Text

=

"hopeoneone";

TreeView控件的数据显示

续上节：TreeNode

node2

=

new

TreeNode();node2.Text

=

"hopetwo";

node1.ChildNodes.Add(node11);//在node1下面在添加一个结点。node.ChildNodes.Add(node1);//node下的两个子节点。node.ChildNodes.Add(node2);TreeNode

t

=

newTreeNode("basil");//作为根节点。TreeView1.Nodes.Add(t);TreeNode

t1

=

newTreeNode("basilone");t.ChildNodes.Add(t1);TreeNode

t2

=

newTreeNode("basiltwo");t.ChildNodes.Add(t2);}TreeView控件的数据显示

TreeNode

node2=new

TreeNode();node2.Text="hopetwo";node1.ChildNodes.Add(node11);//在node1下面在添加一个结点。node.ChildNodes.Add(node1);//node下的两个子节点。node.ChildNodes.Add(node2);TreeNode

t

=

newTreeNode("basil");//作为根节点。TreeView1.Nodes.Add(t);TreeNode

t1

=

newTreeNode("basilone");t.ChildNodes.Add(t1);TreeNode

t2

=

newTreeNode("basiltwo");t.ChildNodes.Add(t2);}

TreeView控件的数据显示3.将数据绑定到TreeView控件可以将TreeView控件绑定到XmlDataSource和SiteMapDataSource控件。此外，在绑定数据时，还可以完全控制要从数据源填充哪些字段，在绑定XmlDataSource时，XML文档的有特殊的要求：（1）描述节点名称是固定的“<treenodes></treenodes>”与“<treenode></treenode>”（2）虽然XML文文件对字母的大小写严格区分，但绑定时会忽略（3）“<treenode></treenode>”节点中的属性，必须与TreeView控 件中的TreeNode属性对应（4）“<treenode></treenode>”节点中的文本不能写在节点内，只能 以“Text”属性出现，如“<treenode>Node01</treenode>”行不通， 应为“<treenodeText="Node01"></treenode>”TreeView控件的数据显示【实例】TreeView控件绑定XML数据源新建XML文档，输入如下代码：<?xml

version="1.0"

encoding="utf-8"

?><TREENODES><TREENODE

Text="Node01"><TREENODE

NavigateUrl="04.htm"

Text="Node04"></TREENODE></TREENODE><treenode

NavigateUrl="05.htm"

text="Node05"

NodeData="05"CheckBox="true"></treenode><TREENODE

NavigateUrl="03.htm"

Text="Node03"></TREENODE></TREENODES>后台绑定的代码如下：this.TreeView1.TreeNodeSrc="TreeXML.xml";this.TreeView1.DataBind();

通过数据绑定的方式创建网站的站点导航1．新建Navigation.aspx页面2.新建TreeView控件在“Navigation.aspx”页面的ContentPlaceHolderRight中创建

TreeView控件，并修改名称为“tvNavigation”。3.设置TreeView控件的数据源通过如图8-12所示的智能标记想到记性界面布局，在【选择数据源】菜单中选择【新建数据源..】选项。4.创建数据源链接选择【新建数据源..】选项后，弹出如图8-13所示的【数据源配置向导】对话框，在该对话框中选择【站点地图】选项，单击【确定】按钮后，完成数据配置。5．任务运行通过XML文件方式创建网站新闻发布系统后台新闻管理目录导航页面1.创建XML文件在“解决方案资源管理器”中鼠标右键单击站点，在弹出的快捷菜单中选择“添加新项”命令，打开“添加新项”对话框；在“模板”列表框中选择“XML文件”，在“名称

”文本框中输入文件名，这里输入“Manager.xml”。单击

“添加”按钮。这时在站点根目录下创建一个名为

Manager.xml的文件，同时打开该文件；2．添加新页在“Admin文件夹”下创建名为“admin.aspx”窗体页，并将TreeView控件拖入页面。通过XML文件方式创建网站新闻发布系统后台新闻管理目录导航页面3.设置数据源单击TreeView控件右上角的小三角按钮，弹出“TreeView任务”窗格。在“选择数据源”下拉列表框中选择“新建数据源”选项，打开“数据源配置向导”对话框。选择

“XML文件”选项，并为数据源指定ID为：XmlDataSource1（默认值）。单击“确定”按钮。打开“配置数据源”对话框，单击“浏览”按钮；在弹出的“选择XML文件”对话框中选定XML文件，这里选择

“Manager.xml”，单击“确定”按钮。通过XML文件方式创建网站新闻发布系统后台新闻管理目录导航页面鼠标单击TreeView控件右上角的小三角按钮，在弹出的

“TreeView任务”窗格中选择“编辑TreeNode数据绑定”命令；打开“TreeView

DataBindings编辑器”对话框。为

siteMapNode节点设置NavigateUrlField属性值为url、TextField属性值为tilte，单击“确定”按钮。其中数据绑定属性说明如下：◆