【asp源码栏目提醒】:网学会员--在 asp源码编辑为广大网友搜集整理了:ASP.NET程序设计(普通高等教育“十一五”国家级规划教材)教学PPT 作者 李德奇第15讲 TreeView控件应用 - 大学课件绩等信息,祝愿广大网友取得需要的信息,参考学习。
第十五讲 TreeView控件应用 教学内容 一、使用TreeView控件 二、动态添加和删除节点 三、从XML文件读取节点数据 四、TreeView控件应用
ASP.NET程序设计 李德奇主编 教学目标 掌握在TreeView控件上动态添加节点的方法; 掌握在TreeView控件上动态删除节点的方法; 掌握从XML文件读取节点数据的方法; 学习TreeView控件应用。
ASP.NET程序设计 李德奇主编 2 一、TreeView控件的初步使用 1/4 一编辑TreeView控件的节点 新建一个Web应用程序项目,将工具箱的Web窗体控件组中的TreeView控件拖入到Web页面,在该控件的属性窗口,单击Nodes属性右侧的“…”打开按钮,启动TreeView控件的节点编辑器,如下图。
在节点编辑器中编辑一个树型结构。
树型结构最适合表达一种层次关系,一个根节点下可以有若干个子节点,一个子节点下又可以有若干个子节点,构成了一棵完整的树。
ASP.NET程序设计 李德奇主编 3 一、TreeView控件的初步使用 2/4 编辑器中3个按钮“Add Root”、“Add Child”和 “Delete”分别用来添加根 节点、添加子节点和删 除节点,4个箭头按钮 “↑”、“↓”、“←”和“→” 用来调整节点的层次关 系。
单击【OK】按钮结 束树型结构的编辑。
编译运行程序,得到的 效果如右图。
ASP.NET程序设计 李德奇主编 4 一、TreeView控件的初步使用 3/4二设置节点图片 Windows资源管理器左侧的树型资源结构图中,各节点都 有图片连接,例如磁盘的图片、光盘的图片和文件夹的图 片等,使资源的表现更加形象。
IEWebControls的 TreeView控件也可以为节点链接图片,这时需要利用以下 3个属性关联到节点的标准状态(未展开、未选中)、展 开状态和选中状态。
ImageUrl属性:TreeNode处于标准状态时显示的图片的 地址。
ExpandImageUrl属性:TreeNode处于展开状态时显示 的图片的地址。
SelecteImageUrl属性:TreeNode处于选中状态时显示 的图片的地址。
ASP.NET程序设计 李德奇主编 5 一、TreeView控件的初步使用 4/4 为上图中的TreeView控件的 节点加入图片关联。
打开 TreeView控件的属性窗口, 分别为ImageUrl属性、 ExpandImageUrl属性和 SelecteImageUrl属性指定一 个图片,这些图片可以从 C:Program FilesIE Web ControlsbuildRuntimeima ges目录中找到,是安装 IEWebControls控件集时生 成的。
加入节点图片后运行 效果如右图。
ASP.NET程序设计 李德奇主编 6 二、动态添加和删除TreeNode节点(1/5) TreeView控件中的节点若在整个程序的生命期间都是不变的,则可以在程序设计时使用节点编辑器编辑它,或者在页面的HTML标记中手工添加它。
也可根据程序运行中数据变化的需要对节点动态进行增减。
在后台代码中调用TreeView控件的Nodes集合的Add方法和AddAt方法增加节点,调用Remove方法删除节点。
一Nodes.Add方法 Nodes.Add方法向控件加入一个节点,增加的节点放在控件的最后面。
下段程序可以向控件TreeView1中增加一个新节点: TreeNode newNodenew TreeNode newNode.Text人文科学系 TreeView1.Nodes.AddnewNode
ASP.NET程序设计 李德奇主编 7 二、动态添加和删除TreeNode节点(2/5) 二Nodes.AddAt方法 Nodes.AddAt方法向控件加入节点时,需要指定节点的索引位置,因此可以将节点插入到原有的节点的中间。
下段程序插入一个节点到树的开头。
//创建一个新节点 TreeNode newNodenew TreeNode newNode.Text冶金职院 //添加新节点到Nodes集合中 TreeView1.Nodes.AddAt0newNode
ASP.NET程序设计 李德奇主编 8 二、动态添加和删除TreeNode节点(3/5) 三Nodes.Remove方法 Nodes.Remove方法从TreeView控件中移除一个节点。
下行程序将树中的第二个节点移除。
TreeView1.Nodes.RemoveTreeView1.Nodes1 直接调用TreeView控件的Nodes.Add方法或Nodes.AddAt方法添加的节点都是顶层节点,调用Nodes.Remove方法删除的也是顶层节点,若要将节点插入到任意层次,或者需要删除非顶层的节点则: 需要在调用上述3个方法之前,有一种方法能够分辨出节点的层次出来,这要用到TreeView控件的GetNodeFromIndex方法。
ASP.NET程序设计 李德奇主编 9 二、动态添加和删除TreeNode节点(4/5) 四GetNodeFromIndex方法 GetNodeFromIndex方法返回参数索引号所指定的节点的引用。
调用的格式为: TreeView1.GetNodeFromIndexx.y.z… 其中TreeView1是当前的树型控件,参数x.y.z指明节点的层次,例如”1.2”表示顶层索引号为1,其下一层索引号为2的那个节点。
五删除非顶层节点 当要删除顶层索引号为1,其下一层索引号为2的那个节点时,可以写如下的代码: //获取该节点 TreeNode delNodethis.TreeView1.GetNodeFromIndex1.2 //删除该节点 delNode.Remove
ASP.NET程序设计 李德奇主编 10 二、动态添加和删除TreeNode节点(5/5)六插入非顶层节点 要在顶层索引号为1,其下一层索引号为2的那个位置插入一个节点时,可以写如下的代码: //创建一个新节点 TreeNode newNode1new TreeNode newNode1.Text多媒体教研室 //获取插入位置的节点节点 TreeNode addNodethis.TreeView1.GetNodeFromIndex1.2; //将新节点插入 addNode.Nodes.AddAt1newNode1
ASP.NET程序设计 李德奇主编 11 三、从XML文件读取节点数据(1/5) 利用节点编辑器来编辑TreeView控件的节点,只适应于在编程阶段就可预知节点结构的情况。
虽然此后可以动态修改节点,也必须由程序代码实现,若节点结构变化的规律与程序代码不符,就必须修改程序代码。
ASP.NET允许将树型控件节点数据编写在一个XML文档中,程序从这个文档读取数据以构造树型控件的节点。
若控件节点所代表的资源发生变化时,只需要修改这个XML文档即可,不需要修改程序代码。
一从XML文档读取树型控件的节点数据 创建一个Web应用程序项目,向页面内拖入一个TreeView控件。
打开控件TreeView1的属性窗口,设置控件的节点的ExpandedImageUrl、ImageUrl和SelectedImageUrl属性,这些属性指定当节点展开或选中时的图片地址。
ASP.NET程序设计 李德奇主编 12 三、从XML文件读取节点数据(2/5) 二编辑节点的XML文件 在VS.NET集成开发环境中,选择菜单“项目P→添加新项W”,在添加新项对话框右侧的模板框中选择“XML文件”,在名称框中输入XML文件的名称。
本例输入名称“XMLTreeViewNode.xml”,然后单击【打开】按钮,就可以切换到XML文件的编辑窗口,编辑文件的内容如下:
ASP.NET程序设计 李德奇主编 13 三、从XML文件读取节点数据(3/5)
ASP.NET程序设计 李德奇主编 14 三、从XML文件读取节点数据(4/5) 这个XML文档中只允许有一个根标签,所有的节点标签都必须放在这个根标签之内,标签标记TREENODES必须大写。
每个节点标签中定义一个节点,节点标签可以嵌套,嵌套层次表明了节点的结构关系。
三指定TreeView控件的TreeNodeSrc属性 需要指定TreeView控件的TreeNodeSrc属性,以指示TreeView控件的节点数据和结构来自文件。
注打开TreeView控件的属性窗口,在TreeNodeSrc属性上指定其值为刚编写的那个文件“XMLTreeViewNode.xml”。
ASP.NET程序设计 李德奇主编 15三、从XML文件读取节点数据(5/5)四控件效果 运行程序,效果如下图。
ASP.NET程序设计 李德奇主编 16 四、TreeView控件应用举例(1/10) 一获取用户选择的节点 程序运行后,用户会在TreeView控件上操作,或者展开节点,或者折叠节点,或者选择(打开)某一个节点。
当用户选择(打开)了某个节点之后,程序必然需要有所动作来对用户的选择作出响应。
例如在Windows资源管理器中,当用户在左边的资源结构树上选择某个节点后,需要在右边的资源内容区显示出该节点的所有资源。
在Web应用程序的页面上使用TreeView控件时,一般也会参照这个习惯。
为此,获取用户对节点的选择信息就显得必要了。
二两种获得用户选择节点信息的方法 ①TreeView控件的SelectedNodeIndex属性保存了用户选择节点的索引号,该属性的文本是形如”x.y.z..”的结构。
例如当TreeView1. SelectedNodeIndex.Text的值为“0.2.1”时,用户选择的节点在第一层的索引号为0,第二层的索引号为2,第三层的索引号为1,根据这个索引号可以确定用户选择了哪个节点。
ASP.NET程序设计 李德奇主编 17 四、TreeView控件应用举例(2/10) ②将TreeView控件的GetNodeFromIndex方法和SelectedNodeIndex属性结合使用,可以获得当前选择的节点。
GetNodeFormIndex方法返回参数索引号所指定的节点的引用。
通常用下列的代码处理用户的选择: TreeNode nodeTreeView1.GetNodeFromIndexSelectedNodeIndex Ifnode.Text”软件教研室” //处理代码 三TreeView控件的SelectedIndexChange事件 当用户对树型控件的节点作出新的选择后,将引发控件的SelectedIndexChange事件,在这个事件中正好对用户的选择作出反映。
该事件的第二个参数TreeViewSelectEventArgs e带入了用户的选择信息,e.NewNode为新选择的节点,e.OldNode为此前选择的节点。
ASP.NET程序设计 李德奇主编 18 四、TreeView控件应用举例(3/10)下段代码与前面一段代码等效:private void TreeView1_SelectedIndexChangeobject senderMicrosoft.Web.UI.WebControls.TreeViewSelectEventArgs e TreeNodenodeTreeView1.GetNodeFromIndexe.NewNode Ifnode.Text”软件教研室” //处理代码 这段代码中用到了事件处理程序的参数e.NewNode,因而它只能写在控件的SelectedIndexChange的事件中,而前两段代码可以写在页面后台代码的任何事件中。
ASP.NET程序设计 李德奇主编 19 四、TreeView控件应用举例(4/10) 四TreeView应用示例 在本例中,使用一个框架页面。
左框架内放置一个TreeView控件,将一系列的商品目录组织成一个树型结构,右框架显示被选择的商品对应的页面。
当用户在左框架的树型控件上作出新的选择后,右框架会导航到对应的新页面。
程序的运行效果如右图。
ASP.NET程序设计 李德奇主编 20