`

ExtJS的使用方法汇总3——树形结构

 
阅读更多

在应用程序中，我们经常需要显示或处理树状结构的对象信息，比如部门信息和地区信息，树是一种非常典型的数据结构，这些信息都可以用树来表示。对于传统的HTML页面来说，完全依靠手动编码来实现树是比较困难的，因为需要写很多的JS代码，对基于AJAX异步加载来说尤其如此，不但涉及AJAX数据异步加载，还需要考虑跨浏览器支持，处理起来非常麻烦，EXT中提供了现成的树控件，通过这些控件，可以在B/S应用中快速开发出包含树形信息结构的应用。

本文就是详细介绍树形结构的使用过程和实例。

一、创建一棵树

树控件由Ext.tree.TreePanel类定义，控件的名称为TreePanel，TreePanel类继承自Panel面板，在EXT中使用树控件非常简单，我们先来看一下代码（包含配置信息）。

[c-sharp] view plaincopy
  1. <htmlxmlns="http://www.w3.org/1999/xhtml">
  2. <headid="Head1"runat="server">
  3. <title>简单的树形</title>
  4. <linkrel="stylesheet"type="text/css"href="../resources/css/ext-all.css"/>
  5. <scripttype="text/javascript"src="../adapter/ext/ext-base.js"</script>
  6. <scripttype="text/javascript"src="../ext-all.js"></script>
  7. <scripttype="text/javascript"><!--
  8. Ext.onReady(function(){
  9. vartree=newExt.tree.TreePanel({
  10. el:'tree'
  11. });
  12. varroot=newExt.tree.TreeNode({text:'我是根'});
  13. tree.setRootNode(root);
  14. tree.render();
  15. });
  16. </script>
  17. </head>
  18. <body>
  19. <divid="tree"></div>
  20. </body>
  21. </html>

这里的参数tree表示渲染的DOM的id.HTML中应该要要有<div id="tree"></div>相对应，最后这棵树就出现在这个div的位置上。

在获得了树形面板后，就必须要设置根，因为必须有了根才可以生长枝节，最后生成完整的树，所以根是必须的。具体实现的效果如图1所示。

1

图1 只有根的树

二、为树生枝展叶

上面的实例代码生成一棵没有根的树，下面的代码就为树添加枝和叶，代码清单如下：

[c-sharp] view plaincopy
  1. <scripttype="text/javascript">
  2. Ext.onReady(function(){
  3. vartree=newExt.tree.TreePanel({
  4. el:'tree',
  5. autoHeight:true
  6. });
  7. varroot=newExt.tree.TreeNode({text:'区域信息'});
  8. varnode1=newExt.tree.TreeNode({text:'湖南省'});
  9. varnode3=newExt.tree.TreeNode({text:'广东省'});
  10. varnode2=newExt.tree.TreeNode({text:'广州市'});
  12. node3.appendChild(node2);
  13. root.appendChild(node1);
  14. root.appendChild(node3);
  15. tree.setRootNode(root);
  17. tree.render();
  18. });
  19. </script>

效果图如图2所示：

2

图2 完整的树控件

注意：我们一方面可以通过修改<div id="tree" style="height:300px;"></div>来设置div高度；同时也可以设置treePanel的autoHeight属性为tree，则可以自动计算高度，否则展开的树形控件看不到枝叶。

三、使用TreeLoader获得数据

使用上面的录入方式来获取数据不仅麻烦，而且还容易出错，Ext.tree.TreeLoader可以利用从后台获取的数据为我们组装出一棵树来，我们只需要提供数据，让treeLoader完成数据转换和装配节点的操作。

（1）我们要为TreePanel配置一个TreeLoader，如下面代码所示：

[c-sharp] view plaincopy
  1. vartree=newExt.tree.TreePanel({
  2. el:'tree',
  3. loader:newExt.tree.TreeLoader({dataUrl:'data.txt'}),
  4. autoHeight:true
  5. });

（2）这里的TreeLoader仅包含一个参数{dataUrl:'data.txt'},这个dataUrl表示在树完成渲染后从何处读取数据。data.txt内容如下：

[c-sharp] view plaincopy
  1. [
  2. {text:'notleaf'},
  3. {text:'isleaf',leaf:true}
  4. ]

(3) 现在查看页面依然只能看到根，没有读取数据并显示到页面上，因为我们使用的TreeNode不支持Ajax，我们需要将其改成AsyncTreeNode,这样才可以实现我们想要的异步加载效果，如下面的代码所示：

[c-sharp] view plaincopy
  1. varroot=newExt.tree.AsyncTreeNode({text:'区域信息'});

注意:必须将root.expand(true,true)修改成root.expand()避免无限循环展开树枝。

四、读取本地JSON数据

读取本地JSON其实是一种是用使用TreeLoader的另类方法。因为有时候树形的数据并不多，为了获取少量的数据而是用AJAX访问后台实在不划算。首先为TreePanel设置一个参数为空的TreeLoader，如下面代码所示：

[c-sharp] view plaincopy
  1. vartree=newExt.tree.TreePanel({
  2. el:'tree',
  3. loader:newExt.tree.TreeLoader(),
  4. autoHeight:true
  5. });

然后，设置一个根节点，并为这个根节点设置children属性，如下面代码所示：

[c-sharp] view plaincopy
  1. varroot=newExt.tree.AsyncTreeNode({
  2. text:'我是根',
  3. children:[
  4. {text:'LeafNo.1',leaf:true},
  5. {text:'LeafNo.1',leaf:true}
  6. ]
  7. });
  8. tree.setRootNode(root);

这里需要注意几点：

(1) 必须设置TreeLoader,否则根节点会一直处于在读取状态，无法获得children中定义的子节点

(2) 根节点必须是AsyncTreeNode,如果是TreeNode,也无法生成子节点

(3) 子节点中的叶子节点必须都加上leaf:true，否则会一直显示读取状态。

五、右键菜单

树形弹出的右键菜单效果图如图3所示：

3

图3 右键菜单效果

具体实现步骤如下：

(1) 制作自定义菜单，如下面的代码所示：

[c-sharp] view plaincopy
  1. varcontextmenu=newExt.menu.Menu({
  2. id:'theContextMenu',
  3. items:[{
  4. text:'点击',
  5. handler:function(){
  6. alert('我被点中了');
  7. }
  8. }]
  9. });

(2) 绑定contextmenu时间，如下面代码所示：

[c-sharp] view plaincopy
  1. tree.on("contextmenu",function(node,e){
  2. e.preventDefault();
  3. node.select();
  4. contextmenu.showAt(e.getXY());
  5. });

六、修改节点的默认图标

实际上，每个树形节点都有icon和iconCls属性，他们负责制定节点的图标，现在我们来修改树种节点的图标，无论是通过new手工创建的节点，还是通过JSON读取到的节点，设置方式都是一样，如下面代码所示：

[c-sharp] view plaincopy
  1. varroot1=newExt.tree.TreeNode({
  2. text:'icon',
  3. icon:'user_female.png'
  4. });

七、从节点弹出对话框

下面的代码可以让对话框看起来像是从标题上飞出来的：

[c-sharp] view plaincopy
  1. tree.on("click",function(node){
  2. Ext.Msg.show({
  3. title:'提示',
  4. msg:"你单击了"+node,
  5. animEl:node.ui.textNode
  6. });
  7. });

八、节点提示信息

当我们把鼠标停留在某个节点的上方时，便会出现提示信息，为了实现这种效果，我们需要对提供的JSON数据做一些修改，在JSON中添加对应的节点提示信息，我们给每个节点数据都加上qtip:'xxx'参数，这个节点就可以显示提示信息了。

不过，仅仅为JSON添加这个参数还不能在页面上显示提示信息，需要先在JS中对EXT的提示功能进行初始化。

[c-sharp] view plaincopy
  1. Ext.QuickTips.init();//开启提示功能

上面这行代码必须在其他功能加载前完成，建议写在onReady函数的第一行。具体代码如下：

[c-sharp] view plaincopy
  1. <scripttype="text/javascript">
  2. Ext.onReady(function(){
  3. Ext.QuickTips.init();
  4. vartree=newExt.tree.TreePanel({
  5. el:'tree',
  6. loader:newExt.tree.TreeLoader(),
  7. autoHeight:true
  8. });
  9. varroot=newExt.tree.AsyncTreeNode({
  10. text:'我是根',
  11. children:[
  12. {text:'LeafNo.1',qtip:'No1',leaf:true},
  13. {text:'LeafNo.1',qtip:'No2',leaf:true}
  14. ]
  15. });
  16. varroot1=newExt.tree.TreeNode({
  17. text:'icon',
  18. icon:'user_female.png'
  19. });
  20. tree.setRootNode(root);
  21. //root.expand(true,true);
  22. varcontextmenu=newExt.menu.Menu({
  23. id:'theContextMenu',
  24. items:[{
  25. text:'点击',
  26. handler:function(){
  27. alert('我被点中了');
  28. }
  29. }]
  30. });
  31. tree.on("contextmenu",function(node,e){
  32. e.preventDefault();
  33. node.select();
  34. contextmenu.showAt(e.getXY());
  35. });
  36. tree.on("click",function(node){
  37. Ext.Msg.show({
  38. title:'提示',
  39. msg:"你单击了"+node,
  40. animEl:node.ui.textNode
  41. });
  42. });
  43. tree.render();
  45. });
  46. </script>

九、为节点设置超链接

虽然我们完全可以监听click事件，但是直接在节点树形中设置超链接的地址也是一个好主意，这是很多人想实现的功能，具体的代码如下：

[c-sharp] view plaincopy
  1. varroot=newExt.tree.AsyncTreeNode({
  2. text:'我是根',
  3. children:[
  4. {text:'新浪网',qtip:'新浪网',leaf:true,href:'http://www.sina.com.cn'},
  5. {text:'百度中国',qtip:'搜索引擎',leaf:true,href:'http://www.baidu.cn',hrefTarget:'_blank'}
  6. ]
  7. });
分享到：
| ExtJS的使用方法汇总2——表单与输入控件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    EXTJS4自学手册

    目录： 一 Extjs 基础 EXTJS4自学手册——EXT文件目录，本地加载文档，命名规范 EXTJS4自学手册——EXT基本方法、属性（onReady、...EXTJS4自学手册——页面控件（树形控件） EXTJS4自学手册——页面控件（表单控件）

    extjs树形下拉框treeField

    extjs 树形下拉列表框，可以进行数据选择，数据回显。

    ExtJs树形结构 ext的简单应用

    在ExtJs中，树形结构（Tree）是一种数据展示方式，常用于呈现层次化的数据，比如文件系统、组织架构等。本文将深入探讨如何在ExtJs中应用树形结构，并通过实例演示其基本用法。 1. **树形结构的基本概念** 树形...

    easyui或extjs构建动态树形结构

    通过学习和实践这些代码，开发者不仅可以掌握 EasyUI 和 ExtJS 构建树形结构的基本方法，还能了解到如何结合实际需求进行定制和扩展，从而提高开发效率。 总结起来，无论选择 EasyUI 还是 ExtJS，构建动态树形结构...

    ExtJS树形结构.docx

    3. **TreeNode**：树的节点，用于构建树结构。在代码中，首先创建了一个根节点`root`，然后用两个嵌套循环添加了子节点，形成了一种级联结构。 4. **属性和方法**： - `id`：节点的唯一标识符。 - `text`：节点...

    extjs实现动态树

    1. `Ext.tree.TreePanel`：这是ExtJS中用于创建树形结构的主要组件。它具有丰富的配置项和事件，支持数据源绑定，能轻松实现动态加载。 2. 数据源：动态树的数据通常来自服务器，通过Ajax请求获取JSON格式的节点数据...

    Ext JS 深入浅出 树形结构

    它提供了丰富的组件库，其中包括用于创建树形结构（Tree）的组件。在深入讲解树形结构之前，先了解一下Ext JS的基本概念。 Ext JS 的核心是其组件模型，允许开发者构建复杂的用户界面，而树形结构就是这些组件中的...

    extjs树形结构实现系统主界面功能框架借鉴.pdf

    在本文档中，作者展示了如何使用EXTJS创建一个具有树形结构的系统主界面功能框架。这个框架利用EXTJS的强大组件模型，允许用户通过点击树形节点在中心区域打开新的选项卡，展示相应的功能或内容。 1. **树形结构**...

    EXTJS 4 树形表格组件使用示例

    在EXTJS 4中，树形表格组件不仅支持基本的节点操作，如展开、折叠、拖放，还提供了丰富的数据绑定和筛选功能，是处理复杂数据结构的理想选择。 首先，让我们深入了解一下EXTJS 4树形表格组件的特性： 1. **层级...

    使用ExtJs构建树形菜单功能

    ### 使用ExtJs构建树形菜单功能详解 #### 一、引言 在现代Web应用程序开发中，树形菜单是一项常用且重要的功能。它能够帮助用户更直观地理解数据层次关系，尤其是在展示组织架构、文件系统或者任何有层级结构的...

    extjs开发的权限系统（树形菜单复选框可级联选择）

    使用extjs+ibatis+spring+struts开发的权限系统 数据库mysql 数据库文件在开发文档目录下 动态树形菜单的加载 ，用户角色权限菜单的维护 jar文件删了一些，需要用的自己加包

    ExtJs2.0 SSH 实现简单结构与上传文件 数据库同步树形结构

    标题中的“ExtJs2.0 SSH 实现简单结构与上传文件 数据库同步树形结构”表明了这个项目的核心特性。首先，`ExtJs2.0`用于构建用户界面，尤其是树形结构展示，这在数据管理中十分常见，如组织架构、文件目录等。树形...

    Extjs折叠布局中添加树

    通过这个示例，我们可以了解到如何在ExtJS的折叠布局中集成树形结构，以及如何从服务器动态加载数据来构建这个树。这在实现具有层次结构的导航菜单或信息分类时非常有用。同时，我们也学习到了如何创建和配置不同的...

    extjs 树 搜索

    在EXTJS中，树形控件（Tree）是一种常见的数据展示方式，用于组织层次结构的数据。树形控件可以被广泛应用于文件系统、组织架构、菜单等场景。当我们需要在这些大量的层次数据中查找特定信息时，搜索功能就显得尤为...

    extJs树形框架(一个例子)

    在树形框架中，ExtJS的TreePanel组件是核心，它允许开发者构建可交互、可扩展的树状结构，展示层次化的数据。这个例子可能展示了如何配置TreePanel，加载数据，以及处理用户交互事件。 2. **Oracle数据库**：Oracle...

    ExtJs_树形机构封装使用说明

    ### ExtJs树形结构封装使用说明 #### 一、概述 在现代Web开发中，树形结构是非常常见的一种数据展示方式，特别是在企业级应用中，用于展现组织结构、文件系统等场景。ExtJs是一个功能强大的JavaScript框架，它提供...

    Extjs下拉多选树

    在ExtJS中，"下拉多选树"（Combobox Tree）是一种结合了下拉框和树形结构的组件，它允许用户在下拉菜单中选择多个树节点，提供了一种高效且直观的用户交互方式。 1. **下拉树组件**：在ExtJS中，树形组件...

    EXTJS 动态生成下来树形框

    4. **扩展下拉框**：EXTJS允许我们自定义组件，可以通过继承`Ext.form.field.ComboBox`并重写相关方法，比如`onRender`和`onExpand`，来实现下拉框展开时显示树形结构。 5. **事件监听**：添加必要的事件监听器，如...

    ExtJS的使用方法汇总--doc文档

    树形结构（TreePanel）则用于展示层次结构的数据，支持展开、折叠、拖放等功能。弹出窗口（Window）则是用于显示临时信息或交互操作的浮动组件，可自定义大小、内容和行为。 总的来说，ExtJS提供了全面的UI解决方案...

    JSP实现树型结构TREE

    本例"JSP实现树型结构TREE"提供了一个使用JSP（JavaServer Pages）、EXTJS（一个前端JavaScript框架）、JSON（JavaScript Object Notation）以及MySQL数据库来创建树形结构的示例，这对于初学者或开发者来说，是一个...

Magicbox
Global site tag (gtag.js) - Google Analytics