用ExtJS 实现动态载入树（Load tree）

qinya06

浏览: 604424 次
性别:
来自: 杭州

最近访客更多访客>>

CalvinLu

xieting0911

makeshow

地方疙瘩人

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ext基础

EXT JSP SQL Oracle json

Oracle DDL脚本：

create table  ORGANIZATION(

  ORGID       NUMBER(10) not null,

  PARENTID    NUMBER(10) not null,

  ORGNAME     VARCHAR2(32) not null,

  ISAVAILABLE NUMBER(1) default 1 not null

);

alter table  ORGANIZATION

       add constraint PK_ORGID primary key (ORGID);

alter table  ORGANIZATION

       add constraint FK_ORGID_PARENTID foreign key (PARENTID)

 references ORGANIZATION (ORGID);

初始化数据内容（注意第一行数据是必需的）：

insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME,  ISAVAILABLE) values (-100, -100, '组织机构图', 1);

insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME,  ISAVAILABLE) values (1, -100, '公司总部1',  1);

insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME,  ISAVAILABLE) values (2, -100, '公司总部2',  1);

insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME,  ISAVAILABLE) values (3, -100, '公司总部3',  1);

insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME,  ISAVAILABLE) values (4, 1, '公司总部1-1',  1);

insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME,  ISAVAILABLE) values (5, 1, '公司总部1-2',  1);

insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME,  ISAVAILABLE) values (6, 2, '公司总部2-1',  1);

insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME,  ISAVAILABLE) values (7, 2, '公司总部2-2',  1);

insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME,  ISAVAILABLE) values (8, 3, '公司总部3-1',  1);

insert into LOON_ORGANIZATION (ORGID, PARENTID, ORGNAME,  ISAVAILABLE) values (9, 3, '公司总部3-2',  1);

有了数据库支持就可以动态的从数据库中提取树数据。

第一步是建立JSP文件（org.jsp）和JavaScript(org.js)文件：

在org.jsp中导入ExtJS所必需的库文件，并在<body>中加入
<body>

<div id="tree-div" style="overflow:auto; height:300px;width:200px;border:2px solid #c3daf9;"></div>

</body>

Org.jsp文件完全可以是静态HTML文件，这里org.jsp中不包含任何动态内容，注意ExtJS所必需的库文件类库路径问题。

Org.js文件内容：

Ext.onReady(function() {

      var Tree = Ext.tree;

      var tree = new Tree.TreePanel( {

            el : 'tree-div',//目标div容器

            autoScroll : true,

            animate : true,

            enableDD : true,

            containerScroll : true,

            loader : new Tree.TreeLoader( {

                  dataUrl : ' OrgTreeJsonData.action '// OrgTreeJsonData.action就是要动态载入数据的请求地址，这里请求时会提交一个参数为node的值，值为root即new Tree.AsyncTreeNode()对象的id值

            })

      });

      var root = new Tree.AsyncTreeNode( {

            text : '组织机构树',

            draggable : false,

            id : '-100'//默认的node值：?node=-100

      });

      tree.setRootNode(root);

      tree.render();

      root.expand();

});

OrgTreeJsonData.action所请求的JSON数据例子：

我载入的jsondata

[ {
"text" : "公司总部1",
"id" : "1",
"cls" : "folder","href":"1.jsp","left":"true","qtip":"根节点提示" }]

获取上面的href地址：node.attributes.href

[ {

      "text" : "公司总部1",

      "id" : "1",

      "cls" : "folder"

}, {

      "text" : "公司总部2",

      "id" : "2",

      "cls" : "folder"

}, {

      "text" : "公司总部3",

      "id" : "3",

      "cls" : "folder"

}]

服务器端可以使用这样的SQL语句来查询：

select t.orgid,t.orgname,t.parentid from organization t 

where t.parentid='-100' and t.orgid!='-100'

下面的代码片断用于struts2 action类中：

public String treeNode() {

              try {

                     List<Object[]> list = this.organizationService.findByParentId(this.node);

                     if (list != null && !list.isEmpty()) {

                           boolean isFirst = true;

                           int i = 0;

                           int last = list.size();

                           for (Object[] o : list) {

                                  if (i == 0) {

                                         this.setJsonString("[{\"text\" :\"" + o[1].toString() + "\" ,\"id\" :\"" + o[0].toString()

                                                       + "\" ,\"cls\" :\"folder\"} ");

                                  } else if (i == (last - 1)) {

                                         this.setJsonString(this.getJsonString() + ",{\"text\" :\"" + o[1].toString() + "\" ,\"id\" :\""

                                                       + o[0].toString() + "\" ,\"cls\" :\"folder\"}]");

                                  } else {

                                         this.setJsonString(this.getJsonString() + ",{\"text\" :\"" + o[1].toString() + "\" ,\"id\" :\""

                                                       + o[0].toString() + "\" ,\"cls\" :\"folder\"}");

                                  }

                                  i++;

                           }

                     } else {

                           this.setJsonString("");

                     }

                     System.out.println(this.getJsonString());

              } catch (Exception e) {

                     // TODO Auto-generated catch block

                     e.printStackTrace();

                     return this.INPUT;

              }

              return this.SUCCESS;

       }

运行时的图：
http://dl.iteye.com/upload/picture/pic/58892/423be1ce-d811-31a6-b65a-ff4c88996dfd.jpg

Ext.onReady(function() {

      var Tree = Ext.tree;

      var tree = new Tree.TreePanel( {

            el : 'tree-div',//目标div容器

            autoScroll : true,

            animate : true,

            enableDD : true,

            containerScroll : true,

            loader : new Tree.TreeLoader( {

                  dataUrl : 'student/doGetTree.action '// OrgTreeJsonData.action就是要动态载入数据的请求地址，这里请求时会提交一个参数为node的值，值为root即new Tree.AsyncTreeNode()对象的id值

            }),
            listeners:{
                    click : function(node){
                        if(node.id == '-100'){
                            // 如果点击的是根节点，则 GridPanel 显示所有的数据
                            //store.load({params:{flag:'all'}});
                             alert("play"); 
                        }
                        else if(node.isLeaf() == true){
                            // 如果点击的是枝节点的话，则根据 ID 查询联系人的信息
                            //store.load({params:{flag:'contacter',contacterId:node.id}}); 
                               
                            alert("leaf"); 
                                                    
                        }else{
                            // 如果既不是根节点也不是枝节点，那么点击的就是分组节点，
                            // 则 GridPanel 显示对应分组号的联系人信息
                            //store.load({params:{flag:'group',groupId:node.id}});
                            var nodeId=node.attributes.id; 
                            
                            
                            alert(nodeId);
                            self.location = 'test.jsp?nodeid='+nodeId;
                            
                            
                            
                        }                        
                    }
                 }

      });

      var root = new Tree.AsyncTreeNode( {

            text : '组织机构树',

            draggable : false,

            id : '-100'//默认的node值：?node=-100

      });

      tree.setRootNode(root);

      tree.render();

     // root.expand();
     tree.root.expand(false, false); //默认展开第一级
    
   

});

分享到：

ContentType | mysql oracle sql server 分页

2010-04-06 12:49
浏览 9233
评论(1)
分类:Web前端
查看更多

1 楼 jisang 2016-05-24

没看懂，第一个org.js和最后的js什么关系，可否发我一份完整的源码

发表评论

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

相关推荐

extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据: 标签“源码”和“工具”暗示了这篇博客可能还讨论了EXTJS的源代码以及如何使用EXTJS作为开发工具来实现动态加载功能。EXTJS的源码可以提供深入的理解，帮助开发者调试和优化代码。EXTJS提供的各种工具，如`sencha ...

ext tree json 例子（不含EXT包）: 首先，我们来看`extjs的tree的使用（拖动、动态载入json数据、拖动后的事件处理） - HuaZi4995 工作笔记 - 博客园.mht`这个文件，它可能包含了一个关于如何实现拖放操作、动态加载JSON数据到TreePanel，以及处理...

计算机发展与计算机应用概述.pdf: 计算机发展与计算机应用概述.pdf

计算机二级公共基础知识全集合.pdf: 计算机二级公共基础知识全集合.pdf

计算机机试答案.pdf: 计算机机试答案.pdf

基于STM32F103的750W全桥逆变器并离网设计方案及其实现: 内容概要：本文详细介绍了基于STM32F103RCT6的750W全桥逆变器设计方案，涵盖硬件电路设计、软件编程以及保护机制等方面。硬件部分包括主控芯片的选择、PWM配置、Boost升压电路、PCB布局优化等；软件部分涉及并离网切换的状态机设计、过流保护、风扇控制算法、并机功能实现等。文中还分享了许多实战经验和调试技巧，如死区时间配置、电流采样方法、并网同步算法等。适合人群：具有一定电子电路和嵌入式开发基础的技术人员，尤其是从事逆变器及相关电力电子产品开发的工程师。使用场景及目标：适用于希望深入了解逆变器工作原理和技术实现的开发者，特别是那些需要掌握并离网切换、高效电源管理及可靠保护机制的人群。目标是帮助读者构建一个稳定可靠的逆变器系统，能够应对各种复杂的工作环境。其他说明：本文不仅提供了详细的理论讲解，还有丰富的代码片段和实践经验分享，有助于读者更好地理解和应用相关技术。

基于Simulink的单相全桥逆变器仿真与优化：MATLAB环境下的详细实现: 内容概要：本文详细介绍了如何利用Simulink在MATLAB环境中搭建单相全桥逆变器的仿真模型。首先，通过构建H桥结构，连接直流电源和RL负载，并引入PWM控制器进行开关管的控制。接着，针对仿真过程中遇到的各种问题，如谐波失真、开关管直通等问题，提出了具体的解决方案，包括加入LC滤波器、设置死区时间和优化PWM参数等。此外，还探讨了通过MATLAB脚本自动化测试不同参数组合的方法，以及如何提高电压利用率和降低谐波失真。最终，通过对仿真结果的分析，验证了所提方法的有效性和优越性。适合人群：电力电子工程师、科研人员、高校学生等对逆变器仿真感兴趣的群体。使用场景及目标：适用于研究和开发高效、稳定的逆变器系统，旨在通过仿真手段减少实验成本，优化设计方案，提高系统的性能指标。其他说明：文中提供了详细的建模步骤和技术细节，帮助读者更好地理解和掌握相关技术和方法。同时，强调了仿真参数的选择和优化对于获得理想仿真结果的重要性。

计算机红外通信.pdf: 计算机红外通信.pdf

软考考试学习必备资料.md: 软考考试学习必备资料.md

基于cornerstonejs开发移动端: 基于cornerstonejs开发移动端

JavaScript网页设计高级案例：构建交互式图片画廊#JavaScript: 构建交互式图片画廊

在学习Wpf的过程中，手搓了一个2048: 源码

Bosch Rexroth IndraWorks Ds IndraWorks Ds 14V16.310.0: Bosch Rexroth IndraWorks Ds IndraWorks Ds 14V16.310.0

java面向对象 - 类与对象: java面向对象 - 类与对象

电机控制领域无感FOC算法的AT32平台实现及其鲁棒性优化: 内容概要：本文详细介绍了基于AT32平台的无感FOC（Field-Oriented Control）控制算法，特别是针对永磁同步电机（PMSM）和无刷直流电机（BLDC）的位置速度观测器实现。文章首先展示了启动策略的独特之处，即跳过传统前馈强拖阶段，直接利用矢量控制环和观测器协同启动。接着深入探讨了磁链观测器的核心算法，包括磁链积分、反正切求角度以及速度估算部分使用的改良版PLL。此外，文中还提到了容差配置模块，用于提高系统的鲁棒性和稳定性。最后，强调了模块间良好的解耦设计，使得各功能模块拥有明确的输入输出接口，增强了代码的可维护性和移植性。适合人群：从事电机控制系统开发的技术人员，尤其是对无感FOC算法感兴趣的工程师。使用场景及目标：适用于需要高精度、快速响应的电机控制系统开发项目，旨在提升系统的鲁棒性和稳定性，特别是在电机参数存在偏差的情况下依然能够保持良好性能。其他说明：文章不仅提供了详细的代码实现，还分享了许多实用的经验和技术细节，如启动策略、磁链观测器的物理本质、速度估算方法等，有助于读者更好地理解和应用无感FOC算法。

计算机机房de设置与维护.pdf: 计算机机房de设置与维护.pdf

《Java 面试进阶指北》质量很高，专为面试打造: 《Java 面试进阶指北》质量很高，专为面试打造

外转子开关磁阻电机多目标优化的NSGA-II算法实现与Matlab代码解析: 内容概要：本文详细介绍了外转子开关磁阻电机（ER-SRM）的多目标优化方法，主要采用NSGA-II算法进行优化。文章首先解释了为什么ER-SRM比传统内转子电机更难以优化，接着展示了如何利用NSGA-II算法解决这一难题。文中提供了详细的Matlab代码，包括种群初始化、交叉变异操作、非支配排序以及目标函数的定义。此外，还讨论了优化过程中的一些注意事项，如初始种群多样性的保持、交叉变异参数的选择、目标函数的设计等。最后，通过具体的案例和图表展示了优化结果及其应用价值。适合人群：从事电机设计与优化的研究人员和技术人员，尤其是对外转子开关磁阻电机感兴趣的读者。使用场景及目标：适用于需要同时优化电机效率、转矩波动和制造成本等多种目标的情况。通过NSGA-II算法，可以在多个相互冲突的目标间找到最佳平衡点，从而提高电机的整体性能。其他说明：文章不仅提供了完整的Matlab代码实现，还分享了许多实践经验，如参数设置的经验公式、常见错误及解决方案等。这对于理解和掌握NSGA-II算法的实际应用非常有帮助。

"慢行智远"是一款专业的串口数据采集与波形分析软件软件支持多通道波形显示、数据记录、协议解析等功能，界面友好，操作简便，是您进行串口通信与数据分析的得力助手: 慢行智远V2.0"是一款专业的串口数据采集与信号分析软件，集成了多通道数据采集、实时波形显示、FFT频谱分析、FIR滤波处理等高级功能。软件提供直观的用户界面，支持亮色/暗色两种主题，具备强大的数据处理与可视化能力。核心功能包括：全面的串口通信支持（多种波特率、数据位、停止位、校验位配置）多通道（最多4通道）波形实时显示与分析高级信号处理（FFT频谱分析、FIR滤波、信号平滑等）智能数据管理（断行数据处理、大数据量优化）数据记录与导出（文本、CSV、图像多种格式）自适应界面设计（支持高DPI显示、暗色主题）适用人群嵌入式开发工程师：需要通过串口调试单片机、开发板等嵌入式设备电子工程师：进行电路测试、信号采集与分析的专业人员工业自动化技术人员：监测工业设备数据、进行状态分析科研教育工作者：用于实验数据采集、科学研究与教学演示医疗设备开发人员：分析生物电信号、开发医疗监测设备物联网开发者：调试传感器网络、分析传感器数据硬件测试工程师：进行产品质量检测、性能评估使用场景及目标研发调试场景单片机开发：实时监控传感器数据、调试通信协议、观察系统运行状态等等

计算机基础- 图.pdf: 计算机基础- 图.pdf

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论