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