利用Ext Js生成动态树(地狱天堂)

最新推荐文章于 2023-07-04 09:41:26 发布
最新推荐文章于 2023-07-04 09:41:26 发布
阅读量618 收藏 1
点赞数
分类专栏： ExtJS 文章标签： ext stylesheet function styles extjs menu
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mmm123lmj/article/details/4444796
版权

 

一. 需求

  1. 要求生成一颗部门树，初始只列出根部门
  2. 当点击一个部门节点时，动态载入该部门下的直属子部门，并展开该部门节点
  3. 部门节点要求支持右键单击事件，当点击右键时，列出相关操作菜单

二. 关键类

这里主要涉及Ext JS的两个类:

  • Ext.tree.TreeNode
  • Ext.menu.Menu

相关API可以参考：http://extjs.com/deploy/ext/docs/

三. 代码示例

1. 先看一下测试页面

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <title>Reorder TreePanel</title>
  5. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
  6. <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
  7. <script type="text/javascript" src="../../ext-all.js"></script>
  8. <script type="text/javascript" src="reorder.js"></script>
  10. <!-- Common Styles for the examples -->
  11. <link rel="stylesheet" type="text/css" href="../shared/examples.css" />
  12. <link rel="stylesheet" type="text/css" href="../shared/lib.css" />
  14. <script type="text/javascript">
  15. /**************
  16.      onload事件
  17. ***************/
  18. window.onload=function(){
  19.      createTree(3);
  20. }
  21. </script>
  23. </head>
  24. <body>
  25. <script type="text/javascript" src="../shared/examples.js"></script>
  26. <h1>现在要生成一颗动态树</h1>
  27. <div id="container">
  28.     </div>
  29. </body>
  30. </html>

2. 再看一下生成树的函数

  1. /***********************************
  2.      创建树
  3.      by chb
  4. ************************************/
  5. function createTree(n){
  7.      Ext.QuickTips.init();
  8.     var mytree=new Ext.tree.TreePanel({
  9.        el:"container",
  10.        animate:true,
  11.        title:"Extjs动态树",
  12.        collapsible:true,
  13.        enableDD:true,
  14.        enableDrag:true,
  15.        rootVisible:true,
  16.        autoScroll:true,
  17.        autoHeight:true,
  18.        width:"30%",
  19.        lines:true
  20.      });
  21.   
  22.   //根节点
  23.   var root=new Ext.tree.TreeNode({
  24.        id:"root",
  25.        text:"集团公司",
  26.        expanded:true
  27.    });
  29.     for(var i=0;i<n;i++){
  30.         var sub1=new Ext.tree.TreeNode({
  31.          id:i+1,
  32.          text:"子公司"+(i+1),
  33.          singleClickExpand:true,
  34.          listeners:{
  35.             //监听单击事件
  36.             "click":function(node){
  37.                  myExpand(node);
  38.              },
  39.             //监听右键
  40.             "contextmenu":function(node,e){
  41.                 //列出右键菜单
  42.                  menu=new Ext.menu.Menu([
  43.                    {
  44.                      text:"打开当前节点",
  45.                      icon:"list.gif",
  46.                      handler:function(){
  47.                          myExpand(node);
  48.                      }
  49.                  },
  50.                  {
  51.                          text:"编辑当前节点",
  52.                          icon:"list.gif",
  53.                          handler:function(){
  54.                              alert(node.id);
  55.                          }
  56.                  },
  57.                  {
  58.                          text:"删除当前节点",
  59.                          icon:"list.gif",
  60.                          handler:function(){
  61.                              alert(node.id);
  62.                          }
  63.                  }]);
  64.                 //显示在当前位置
  65.                  menu.showAt(e.getPoint());
  66.              }
  67.          }
  68.        });
  69.          root.appendChild(sub1);
  70.      }
  71. mytree.setRootNode(root);//设置根节点
  73. mytree.render();//不要忘记render()下,不然不显示哦
  74. }

3. 展开子节点的代码

  1. /******************************************
  2.               展开节点
  3. ******************************************/
  4. function myExpand(node){
  5.     if(node.id=='1'){
  6.     if(node.item(0)==undefined){
  7.              node.appendChild(new Ext.tree.TreeNode({
  8.          id:node.id+'1',
  9.          text:node.text+"的第一个儿子",
  10.          hrefTarget:"mainFrame",
  11.          listeners:{//监听
  12.           "click":function(node,e){
  13.              expand2(node)
  14.              }
  15.          }
  16.          }));
  17.      }
  19.      node.expand();
  21.      }else if(node.id=='2'){
  22.          node.appendChild(new Ext.tree.TreeNode({
  23.          id:node.id+'2',
  24.          text:node.text+"的第一个儿子",
  25.          hrefTarget:"mainFrame",
  26.          listeners:{//监听
  27.           "click":function(node){
  28.              expand2(node)
  29.              }
  30.          }
  31.          }));
  32.      }else{
  33.          alert(node.id+"没有子部门了");
  34.      }
  35.     
  36. }

     读者可以自己运行一下如上代码，会发现如下现象：无论点击“子公司1”多少次，只会列出“子公司1的第一个儿子”一个节点，而每点击一次“子公司2”，就会多出一个“子公司2的第一个儿子”节点，这是为什么呢？

因为每次点击都会激发myExpand函数，而“子公司1”上加了node.item(0)==undefined的判断，这里明白了？

即：如果该部门下没有子部门，则载入子部门，否则只展开，不重新载入。

截图

roger_lmj
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学透JavaScript 你真的懂 Array 吗？
LuZhenQian2017的博客
03-09 1773
前言 科普 JavaScript，揭开 JavaScript 神秘面纱，直击 JavaScript 灵魂。此系列文章适合任何人阅读。 本文章内容为： 标准化数组。 数组与数组容器。 ECMAScript 规范中 Array API 讲解。 如果你想用 Array，而又不想学 API 的办法。 标准规范以外的 Array API 扩展。 V8 引擎对 Array 的处...
extjs实现动态树加载菜单
10-12
extjs实现动态树加载菜单
利用Ext Js生成动态树
hbcui1984的专栏
09-07 7046
 利用Ext Js生成动态树     今天在公司帮同事写了个用Ext Js生成动态树的Demo，在这里分享一下，也好供以后自己查阅。一. 需求要求生成一颗部门树，初始只列出根部门当点击一个部门节点时，动态载入该部门下的直属子部门，并展开该部门节点部门节点要求支持右键单击事件，当点击右键时，列出相关操作菜单二. 关键类这里主要涉及Ext JS的两个类:Ex
Node.js知识梳理（一）——基础
最新发布
未来可期
07-04 871
复习了Node.js与浏览器在运行JS上的不同之处，梳理了模块化的使用差别、常见的内置模块的使用~
前端开发 20 年变迁史
chaishen10000的专栏
05-06 3312
本文原文由作者“司徒正美”发布于公众号“前端你别闹”，即时通讯网收录时有改动，感谢原作者的分享。 1、引言 1990 年，第一个Web浏览器的诞生；1991 年，WWW诞生，这标志着前端技术的开始。 在这将近20年的前端发展史中，我们经历了从最早的纯静态页面，到JavaScript跨时代的诞生；从PC端到移动端；从依赖后端到前端可自由打包开发；从早期的网景Navigator浏览器到现在各家浏...
了解WEB前端开发吗，风风雨雨30年，前端开发变迁史
BOM485480的博客
04-25 454
按1990年，第一个Web浏览器诞生，而WWW的诞生直接拉开前端史的序幕。 从静态页面到JavaScript，从依赖后端到自主开发，前端开发者从不被重视的“页面仔”逆袭为如今很多前端工程师的薪资比后端还高，从前端技术由国外开发者主导到如今国内自主产生的小程序技术，我们走了近 30年。 1990 年，第一个Web浏览器的诞生；1991 年，WWW诞生，这标志着前端技术的开始。 在这将近 30 年的前端发展史中，我们经历了从最早的纯静态页面，到JavaScript跨时代的诞生；从PC端到移动端；从依赖后端到前
你们有了解过前端开发吗？风风雨雨30年，前端开发变迁史
Java高级教程、Java架构师、Java进阶教程
10-28 747
按1990年，第一个Web浏览器诞生，而WWW的诞生直接拉开前端史的序幕。 从静态页面到JavaScript，从依赖后端到自主开发，前端开发者从不被重视的“页面仔”逆袭为如今很多前端工程师的薪资比后端还高，从前端技术由国外开发者主导到如今国内自主产生的小程序技术，我们走了近 30年。 990 年，第一个Web浏览器的诞生；1991 年，WWW诞生，这标志着前端技术的开始。 在这将近 30 年的前...
利用Ext Js生成动态树实例代码
10-30
今天在公司帮同事写了个用Ext Js生成动态树的Demo，在这里分享一下，也好供以后自己查阅。
ext利用js生成树
10-29
在"ext利用js生成树"这个主题中，我们将深入探讨如何使用ExtJS库来创建和管理树形结构，这对于数据分层展示和导航非常有用。 1. **ExtJS TreePanel**: 树形组件是ExtJS中的核心组件之一，被称为TreePanel。它允许...
Ext JS动态加载JavaScript创建窗体的方法
11-25
在本文中，我们将深入探讨如何利用Ext JS这一强大的JavaScript框架来动态加载JavaScript创建窗体。 Ext JS是一个用于构建桌面和移动Web应用的富客户端JavaScript框架，它提供了丰富的UI组件和强大的数据管理功能。...
ext 代码生成器
01-21
本文件为：ext_editgrid_products.js，用来显示，编辑，删除products表的数据。 代码如下: var productsgrid; var productsstore; var productslimit = 25; //每页显示条数 var productsListPostUrl = “/management...
webpack4配置详解之慢嚼细咽
画漫画的程序员∙苏南
11-12 1366
Webpack4+配置详解，旨在帮大家加深理解、新手更容易上路，都能从0到1搭建配置自定属于自己的脚手架，本文详细讲解webpack的每一个配置字段的用途，以及redux、react、react-router的结合使用，entry、output、node_modules等加深对配置的理解，还有webpack4新增的optimization、runtimeChunk、UglifyJsPlugin、HtmlWebPackPlugin、ExtractTextPlugin结合的使用，
前端开发的 20 年变迁史～
画漫画的程序员∙苏南
08-26 328
点击上方“IT平头哥联盟”，选择“置顶或者星标”作者：司徒正美1990 年，第一个Web浏览器的诞生；1991 年，WWW诞生，这标志着前端技术的开始。在这将近20年的前端发展史中，我们经...
前端入门
wgod
04-22 551
推荐去查看原文章： https://blog.csdn.net/weixin_45810671/article/details/105658940?depth_1-utm_source=distribute.pc_feed.193533&utm_source=distribute.pc_feed.193533 按1990年，第一个Web浏览器诞生，而WWW的诞生直接拉开前端史...
ExtJS是什么
Roger★L☆M☆J★
08-13 1473
 ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多 彩的web应用程序界面。主要是企业信息化软件，网站后台等。ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写 的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应 用中。    Ex
ExtJs 下载及安装使用入门
Roger★L☆M☆J★
08-13 1012
 第一：下载ExtJs官方最新版本下载（截至2008-04-21）：http://extjs.com/deploy/ext-2.0.2.zip第二：解压ExtJs压缩包解压后的目录如下图所示，其中的demo为新建的目录。第三： 在demo文件夹中新建一个文件1.2a_helloword.html内容如下： Hello World Ext.onRe
ext js6拿数据库里面的数据来做动态的树
04-08
可以使用Ext JS6的TreePanel组件来实现动态的树状菜单。首先需要从数据库中获取数据，可以使用Ajax请求来实现。然后将数据转换为树状结构并绑定到TreePanel上即可。下面是一个简单的示例代码： ``` Ext.define('...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值