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

qinya06

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

最近访客更多访客>>

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
浏览 9189
评论(1)
分类:Web前端
查看更多

1 楼 jisang 2016-05-24

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

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论