第15讲 TreeView控件应用

ASP.NET程序设计
李德奇主编
2
一、TreeView控件的初步使用 (1/4) 控件的初步使用
(一)编辑 一 编辑 编辑TreeView控件的节点 控件的节点 新建一个Web应用程序项目，将工具箱的Web窗体控件组 中的TreeView控件拖入到Web页面，在该控件的属性窗口， 单击Nodes属性右侧的“…”打开按钮，启动TreeView控件的 节点编辑器，如下图。 在节点编辑器中编 辑一个树型结构。树型 结构最适合表达一种层 次关系，一个根节点下 可以有若干个子节点， 一个子节点下又可以有 若干个子节点，构成了 一棵完整的树。
ASP.NET程序设计
李德奇主编
6
动态添加和删除TreeNode节点（1/5） 二、动态添加和删除 节点
TreeView控件中的节点若在整个程序的生命期间都是不 变的，则可以在程序设计时使用节点编辑器编辑它，或者在 页面的HTML标记中手工添加它。也可根据程序运行中数据变 化的需要对节点动态进行增减。在后台代码中调用TreeView 控件的Nodes集合的Add方法和AddAt方法增加节点，调用 Remove方法删除节点。 (一)Nodes.Add方法 一 方法 Nodes.Add方法向控件加入一个节点，增加的节点放在控 件的最后面。下段程序可以向控件TreeView1中增加一个新 节点： TreeNode newNode=new TreeNode(); newNode.Text="人文科学系"; TreeView1.Nodes.Add(newNode);
ASP.NET程序设计 李德奇主编
3
一、TreeView控件的初步使用 (2/4) 控件的初步使用
编辑器中3个按钮“Add Root”、“Add Child”和 “Delete”分别用来添加 根节点、添加子节点和 删除节点，4个箭头按钮 “↑”、“↓”、“←” 和“→”用来调整节点 的层次关系。单击【OK】 按钮结束树型结构的编 辑。 编译运行程序，得到的 效果如右图。
ASP.NET程序设计
李德奇主编
8
二、动态添加和删除TreeNode节点（3/5） 动态添加和删除 节点
(三)Nodes.Remove方法 三 方法 Nodes.Remove方法从TreeView控件中移除一个节点。 下行程序将树中的第二个节点移除。 TreeView1.Nodes.Remove(TreeView1.Nodes[1]); 直接调用TreeView控件的Nodes.Add方法或 Nodes.AddAt方法添加的节点都是顶层节点，调用 Nodes.Remove方法删除的也是顶层节点，若要将节点插 入到任意层次，或者需要删除非顶层的节点则： 需要在调用上述3个方法之前，有一种方法能够分辨 出节点的层次出来，这要用到TreeView控件的 GetNodeFromIndex()方法。
TreeView控件应用 第十五讲 TreeView控件应用
教学内容
一、使用 使用TreeView控件 控件 二、动态添加和删除节点 三、从XML文件读取节点数据 文件读取节点数据 四、TreeView控件应用 控件应用
ASP.NET程序设计
李德奇主编
教学目标
掌握在TreeView控件上动态添加节点的方法； 控件上动态添加节点的方法； 掌握在 控件上动态添加节点的方法 掌握在TreeView控件上动态删除节点的方法； 掌握在 控件上动态删除节点的方法； 控件上动态删除节点的方法 掌握从XML文件读取节点数据的方法； 文件读取节点数据的方法； 掌握从 文件读取节点数据的方法 学习TreeView控件应用。 控件应用。 学习 控件应用
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，根据这个索引号可以确定用户选择了哪 个节点。 17 ASP.NET程序设计 李德奇主编
ASP.NET程序设计
李德奇主编
4
一、TreeView控件的初步使用 (3/4) 控件的初步使用
(二)设置节点图片 设置节点图片 Windows资源管理器左侧的树型资源结构图中，各节点都 有图片连接，例如磁盘的图片、光盘的图片和文件夹的图 片等，使资源的表现更加形象。IEWebControls的 TreeView控件也可以为节点链接图片，这时需要利用以下 3个属性关联到节点的标准状态（未展开、未选中）、展 开状态和选中状态。 ImageUrl属性 属性：TreeNode处于标准状态时显示的图片的 属性 地址。 ExpandImageUrl属性：TreeNode处于展开状态时显示 属性： 属性 的图片的地址。 SelecteImageUrl属性：TreeNode处于选中状态时显示 属性： 属性 的图片的地址。
ASP.NET程序设计 李德奇主编
7
二、动态添加和删除TreeNode节点（2/5） 动态添加和删除 节点
(二)Nodes.AddAt方法 二 方法 Nodes.AddAt方法向控件加入节点时，需要指定节点的 索引位置，因此可以将节点插入到原有的节点的中间。下 段程序插入一个节点到树的开头。 //创建一个新节点 TreeNode newNode=new TreeNode(); newNode.Text="冶金职院"; //添加新节点到Nodes集合中 TreeView1.Nodes.AddAt(0,newNode);
ASP.NET程序设计 李德奇主编
12
三、从XML文件读取节点数据（2/5） 文件读取节点数据
(二)编辑节点的 二 编辑节点的 编辑节点的XML文件 文件 在VS.NET集成开发环境中，选择菜单“项目(P)→添加新 项(W)”，在添加新项对话框右侧的模板框中选择“XML文件”， 在名称框中输入XML文件的名称。本例输入名称 “XMLTreeViewNode.xml”，然后单击【打开】按钮，就可以 切换到XML文件的编辑窗口，编辑文件的内容如下： <?xml version="1.0" encoding="utf-8" ?> <TREENODES> <TreeNode Text="商品总目"> <TreeNode Text="农产品"> <TreeNode Text="水果"></TreeNode> <TreeNode Text="粮食"></TreeNode> </TreeNode> <TreeNode Text="日化产品">
ASP.NET程序设计 李德奇主编
14
三、从XML文件读取节点数据（4/5） 文件读取节点数据
这个XML文档中只允许有一个根标签 <TREENODES></TREENODES>，所有的节点标签都必 须放在这个根标签之内，标签标记TREENODES必须大写。 每个节点标签<TreeNode ></TreeNode>中定义一个节 点，节点标签可以嵌套，嵌套层次表明了节点的结构关系。 (三)指定 (三)指定TreeView控件的TreeNodeSrc属性 指定TreeView控件的 控件的TreeNodeSrc属性 需要指定TreeView控件的TreeNodeSrc属性，以指示 TreeView控件的节点数据和结构来自文件。注打开 TreeView控件的属性窗口，在TreeNodeSrc属性上指定其 值为刚编写的那个文件“XMLTreeViewNode.xml”。
TreeNode addNode=this.TreeView1.GetNodeFromIndex("1.2")；
//将新节点插入 addNode.Nodes.AddAt(1,newNode1);
ASP.NET程序设计
李德奇主编
ቤተ መጻሕፍቲ ባይዱ
11
三、从XML文件读取节点数据（1/5） 文件读取节点数据
利用节点编辑器来编辑TreeView控件的节点，只适应于在 编程阶段就可预知节点结构的情况。虽然此后可以动态修改节 点，也必须由程序代码实现，若节点结构变化的规律与程序代 码不符，就必须修改程序代码。 ASP.NET允许将树型控件节点数据编写在一个XML文档中， 程序从这个文档读取数据以构造树型控件的节点。若控件节点 所代表的资源发生变化时，只需要修改这个XML文档即可，不 需要修改程序代码。 (一)从XML文档读取树型控件的节点数据 一 从 文档读取树型控件的节点数据 创建一个Web应用程序项目，向页面内拖入一个TreeView 控件。打开控件TreeView1的属性窗口，设置控件的节点的 ExpandedImageUrl、ImageUrl和SelectedImageUrl属性，这些 属性指定当节点展开或选中时的图片地址。
ASP.NET程序设计 李德奇主编
9
二、动态添加和删除TreeNode节点（4/5） 动态添加和删除 节点
(四)GetNodeFromIndex方法 四 方法 GetNodeFromIndex方法返回参数索引号所指定的节点的 引用。调用的格式为： TreeView1.GetNodeFromIndex("x.y.z…") 其中TreeView1是当前的树型控件，参数x.y.z指明节点的 1.2” 1 2 层次，例如”1.2”表示顶层索引号为1，其下一层索引号为2 的那个节点。 (五)删除非顶层节点 五 删除非顶层节点 当要删除顶层索引号为1，其下一层索引号为2的那个节 点时，可以写如下的代码： //获取该节点
TreeNode delNode=this.TreeView1.GetNodeFromIndex("1.2");
//删除该节点 delNode.Remove();
ASP.NET程序设计 李德奇主编
10
二、动态添加和删除TreeNode节点（5/5） 动态添加和删除 节点
(六)插入非顶层节点 六 插入非顶层节点 要在顶层索引号为1，其下一层索引号为2的那个位 置插入一个节点时，可以写如下的代码： //创建一个新节点 TreeNode newNode1=new TreeNode(); newNode1.Text="多媒体教研室"; //获取插入位置的节点节点
ASP.NET程序设计 李德奇主编
5
一、TreeView控件的初步使用 (4/4) 控件的初步使用
为上图中的TreeView控件的 节点加入图片关联。打开 TreeView控件的属性窗口， 分别为ImageUrl属性、 ExpandImageUrl属性和 SelecteImageUrl属性指定一 个图片，这些图片可以从 C:\Program Files\IE Web Controls\build\Runtime\ima ges目录中找到，是安装 IEWebControls控件集时生 成的。加入节点图片后运行 效果如右图。
ASP.NET程序设计 李德奇主编
13
三、从XML文件读取节点数据（3/5） 文件读取节点数据
<TreeNode Text="洗涤用品"></TreeNode> <TreeNode Text="化妆用品"></TreeNode> </TreeNode> <TreeNode Text="百货"> <TreeNode Text="服装"></TreeNode> <TreeNode Text="鞋帽"></TreeNode> Text=" "></TreeNode> </TreeNode> <TreeNode Text="家电"> <TreeNode Text="冰箱"></TreeNode> <TreeNode Text="洗衣机"></TreeNode> </TreeNode> </TreeNode> </TREENODES>