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

最新推荐文章于 2015-05-29 13:50:05 发布
最新推荐文章于 2015-05-29 13:50:05 发布
阅读量236 收藏
点赞数
分类专栏： 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;

       }



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

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); //默认展开第一级



});
zyuanq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Extjs 动态加载树
03-22
NULL 博文链接：https://kaobian.iteye.com/blog/996146
用ExtJS实现动态载入树WORD版
07-22
资源名称：用ExtJS实现动态载入树 WORD版内容简介：本文档主要讲述的是用ExtJS实现动态载入树；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看资源截图： 资源太大，传百度网盘了，链接在附件中，有...
ExtJS 创建动态加载树
weixin_30258901的博客
11-12 115
Ext 中导航树的创建有两种方式：1、首先将所有的数据读出来，然后绑定到前台页面。2、每点击一个节点展开后加载子节点。在数据量比较小的时候使用第一种方式加载的会快一些，然而当数据量比较大的时候，我还是建议使用第二种方式的。这里我就来介绍一下第二种树的展示方式。 源码奉上： 1 //创建model 2 Ext.define("treeModel",{ 3 　　extend:"E...
Exitjs tree动态连接数据库加载Node
萧逸闲侃
09-01 813
经过几天的努力，终于搞定了，动态连接数据库加载tree莱单中Node，这个也在网上查了不少资料，可惜啊,基本上都是转载一人之手。看上去很麻烦。咋一看就头晕，功夫不负有心人，我终于找到一个算是简单的方法，但是，还是不好用，还得靠自己啊，最后我把它们的代码综合参考一下，整理之后还算可以,虽然有点乱慢慢看。 数据库表设计 DROP TABLE treenode; CREATE TABLE treenod
ExtJs+JSP构造动态树
翻滚吧小牛
02-04 1182
在实际生产中树的构造是需要根据后台数据库中存放的内容动态加载的，例如一个系统中，不同的角色有不同的权限，他们所能进行的操作也是不同的，如果需要构造一个树形结构展现某个角色所能进行的操作，这就用到了树形结构。 ExtJs提供了动态加载树形结构的机制，这里就用到了TreeStore动态加载，常用的动态加载数据格式有JSON和XML。 这里我们看一下如何使用JSON格式数据动态加载属性结构。 首先
用ExtJS 实现动态载入树（Load tree）
javatoyou
02-06 234
数据库背景：这里有一个组织机构表，结构如下： &lt;shapetype id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"&gt;&lt;
用ExtJS实现动态载入树
04-23
### 用ExtJS实现动态载入树的知识点详解 #### 一、背景介绍与需求分析 在企业级应用开发中，树形结构是一种常见的数据展示形式，尤其在组织架构、文件系统等方面应用广泛。本文将详细介绍如何利用ExtJS框架来实现...
extjs实现动态树
10-12
动态树（Dynamic Tree）是指在运行时可以动态加载、添加、删除或更新节点的树形控件。在ExtJS中，这种功能主要通过`Ext.tree.TreePanel`或其现代版本`Ext.tree.View`来实现。 一、ExtJS 动态树基础 1. `Ext.tree....
extjs实现动态树加载菜单
10-12
在 ExtJS 中实现动态树加载，我们需要遵循以下步骤： 1. **配置树节点**：首先，我们需要为树节点定义模型（Ext.data.TreeModel），并在模型中设置`leaf`属性为`false`来表示这是一个可扩展的节点，而非叶子节点。...
Extjs整体加载树节点
weixin_30535843的博客
10-24 130
Ext.onReady(function () { Ext.define('company', { extend: 'Ext.data.Model', fields: ['text'] }); var treeSt...
extjs做的动态树
05-19
我们都是EXTJS做的界面吧，界面不光漂亮，而且非常实用，这是个例子，可以很好的借鉴一下~~
EXTJS动态树的实现
03-01
NULL 博文链接：https://yahaitt.iteye.com/blog/207696
extjs动态树 动态grid 动态列
dianjin3567的博客
06-07 188
由于项目需要做一个动态的extjs树、列等等，简而言之，就是一个都是动态的加载功能， 自己琢磨了半天，查各种资料，弄了将近两个星期，终于做出来了 首先，想看表结构，我的这个功能需要主从两张表来支持 代码目录表： CREATE TABLE SYS_T01_CODECONTENT ( ID NUMBER NOT NULL, PID NUMBER NOT NULL,...
ExtJs TreePanel 动态加载
05-29 1033
今天在做ExtJs 做动态加载的时候，使用删除第一次可以正确执行，当使用编辑、或添加后，更新的数据一直出不来这是修改之前的代码：//添加点组 var addPointGroup = function(groupName) { Ext.Ajax.request( { url : pg_servlet + '_addFavoriteGroup?name=' + encodeURI(group
用ExtJS 实现动态载入树（Load tree） 转载
wenzi_li的专栏
12-24 131
[url=http://blog.csdn.net/myloon/archive/2007/11/09/1876089.aspx]用ExtJS 实现动态载入树（Load tree） 转载[/url]
Extjs动态加载树
wellbeing2006的专栏
09-12 366
 //树 var ReadyFun = function(){  function treeNodeClickPage(){   Ext.apply(pageUserStore.proxy.extraParams, {       groupId : currentRecord.raw['id']   });   pageUserStore.loadPage(1);   Ext
Extjs 动态树 异步树
huaye2007的专栏
08-14 4082
先说下本项目使用struts2+hibernate+Extjs3.*   将整个项目搭建起来后，我的项目整体架构如下图片 其中一些配置很重要，只讲下struts.xml其他的没多大问题       "-//Apache Software Foundati
ExtJS动态树与TreeGrid节点拖拽实现
"Extjs动态树的实现及节点拖拽，ExtJSTreeGrid叶子节点拖拽问题和选择框使用方法" 在ExtJS中，动态树是一种常见的数据展示形式，它允许用户交互地操作数据结构，如添加、删除和移动节点。动态树的实现通常涉及到Ext...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值