云自无心水自闲

天平山上白云泉,云自无心水自闲。何必奔冲山下去,更添波浪向人间!
posts - 288, comments - 524, trackbacks - 0, articles - 6
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

Extjs Tree + JSON + Struts2

Posted on 2008-02-19 09:27 云自无心水自闲 阅读(43314) 评论(49)  编辑  收藏 所属分类: Java心得体会Struts2AjaxExtjs
最近尝试用extjs来展示树状菜单。着实花了一番功夫。树状菜单的菜单项需要动态加载,而目前版本的extjs中只支持JSON格式的数据。查了一些资 料,决定使用struts2的json-plugin。首先按照例子做了一个,但是结果就是不成功,界面上只出来了一个js中生成的root节点,不能加 载从后台生成的数据。研究后发现是数据格式有问题。使用json-plugin生成的数据格式如下:
{"cls":"folder","id":10,"leaf":false,"children":[{"cls":"file","id":11,"leaf":true,"children":null,"text":"S600"},{"cls":"file","id":12,"leaf":true,"children":null,"text":"SLK200"}],"text":"Benz"}
而extjs需要的数据格式如下:
[{"cls":"folder","id":10,"leaf":false,"children":[{"cls":"file","id":11,"leaf":true,"children":null,"text":"S600"},{"cls":"file","id":12,"leaf":true,"children":null,"text":"SLK200"}],"text":"Benz"}]
区别很小,就只相差最外面的两个方括号。但是少了这两个方括号,在json中,含义迥然不同,前者表示一个对象,而后者表示一个数组。而extjs中 tree的dataloader需要的数据必须是一个数组。而这样的数据格式是json-plugin自动生成的,无法改变。所以,我最后放弃了json -plugin,转而使用json-lib来解决这个问题。
1. 下载json-lib, http://json-lib.sourceforge.net/
2. lib目录下的jar文件清单:
commons-beanutils-1.7.0.jar
commons-collections-3.2.jar
commons-digester-1.6.jar
commons-lang-2.3.jar
commons-logging-1.1.jar
dom4j-1.6.1.jar
ezmorph-1.0.4.jar
freemarker-2.3.8.jar
javassist-3.8.1.jar
json-lib-2.2.1-jdk15.jar
log4j-1.2.13.jar
ognl-2.6.11.jar
struts2-core-2.0.11.jar
xml-apis-1.0.b2.jar
xwork-2.0.4.jar


首先配置web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
  xmlns:xsi
="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation
="http://java.sun.com/xml/ns/j2ee
    http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
>
  
<welcome-file-list>
    
<welcome-file>index.jsp</welcome-file>
  
</welcome-file-list>
  
<filter>
    
<filter-name>struts2</filter-name>
    
<filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>
  
</filter>

  
<filter-mapping>
    
<filter-name>struts2</filter-name>
    
<url-pattern>/*</url-pattern>
  
</filter-mapping>
</web-app>

然后是struts.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd"
>
   
<struts>
    
<constant name="struts.devMode" value="true"/>
    
<constant name="struts.i18n.encoding" value="UTF-8"/>
    
<package name="person" extends="struts-default">
        
<action name="menus" method="execute" class="com.lab.MenuAction">
            
<result>/menu.jsp</result>
        
</action>
    
</package>
</struts>

3. 树的节点模型(省略了getter,setter)
public class Menu {
    
private int id;
    
private String text;
    
private boolean leaf;
    
private String cls;
    
private List<Menu> children;
}

4. action
package com.lab;

import java.util.ArrayList;
import java.util.List;

import net.sf.json.JSONArray;

public class MenuAction {
    
private String menuString;
   
    
private List<Menu> menus;
   
    
public String execute() {

        menus 
= new ArrayList<Menu>();
       
        Menu benz 
= new Menu();
        benz.setText(
"Benz");
        benz.setCls(
"folder");
        benz.setLeaf(
false);
        benz.setId(
10);
        menus.add(benz);
       
        List
<Menu> benzList = new ArrayList<Menu>();
        benz.setChildren(benzList);
       
        Menu menu;
        menu 
= new Menu();
        menu.setText(
"S600");
        menu.setCls(
"file");
        menu.setLeaf(
true);
        menu.setId(
11);
        benzList.add(menu);
        menu 
= new Menu();
        menu.setText(
"SLK200");
        menu.setCls(
"file");
        menu.setLeaf(
true);
        menu.setId(
12);
        benzList.add(menu);
       
        Menu bmw 
= new Menu();
        bmw.setText(
"BMW");
        bmw.setCls(
"folder");
        bmw.setLeaf(
false);
        bmw.setId(
20);
        menus.add(bmw);
       
        List
<Menu> bmwList = new ArrayList<Menu>();
        bmw.setChildren(bmwList);
       
        menu 
= new Menu();
        menu.setText(
"325i");
        menu.setCls(
"file");
        menu.setLeaf(
true);
        menu.setId(
21);
        bmwList.add(menu);
       
        menu 
= new Menu();
        menu.setText(
"X5");
        menu.setCls(
"file");
        menu.setLeaf(
true);
        menu.setId(
22);
        bmwList.add(menu);
       
        JSONArray jsonObject 
= JSONArray.fromObject(menus);
        
try {
            menuString 
= jsonObject.toString();
        } 
catch (Exception e) {
            menuString 
= "ss";
        }

        
return "success";
    }

    
public String getMenuString() {
        
return menuString;
    }

    
public void setMenuString(String menuString) {
        
this.menuString = menuString;
    }
}

5. menu.jsp
<%@ taglib prefix="s" uri="/struts-tags" %>
<s:property value="menuString" escape="false"/>

6. html页面和js
我使用的就是extjs的example中的reorder.html和reorder.js,更改了reorder.js中treeloader的dataurl: menus.action
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Reorder TreePanel</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

    
<!-- GC -->
     
<!-- LIBS -->
     
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
     
<!-- ENDLIBS -->
 
    
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="reorder.js"></script>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/example.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
<h1>Drag and Drop ordering in a TreePanel</h1>
<p>This example shows basic drag and drop node moving in a tree. In this implementation there are no restrictions and 
anything can be dropped anywhere except appending to nodes marked 
&quot;leaf&quot; (the files). <br></p>
<p>Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop.</p>
<p>In order to demonstrate drag and drop insertion points, sorting was <b>not</b> enabled.</p>
<p>The data for this tree is asynchronously loaded with a JSON TreeLoader.</p>
<p>The js is not minified so it is readable. See <href="reorder.js">reorder.js</a>.</p>

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

</body>
</html>



js:
/*
 * Ext JS Library 2.0.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 
*/

Ext.onReady(
function(){
    
// shorthand
    var Tree = Ext.tree;
   
    
var tree = new Tree.TreePanel({
        el:'tree
-div',
        autoScroll:
true,
        animate:
true,
        enableDD:
true,
        containerScroll: 
true,
        loader: 
new Tree.TreeLoader({
            dataUrl:'http:
//localhost:8080/lab/menus.action'
        })
    });

    
// set the root node
    var root = new Tree.AsyncTreeNode({
        text: 'Ext JS',
        draggable:
false,
        id:'source'
    });
    tree.setRootNode(root);

    
// render the tree
    tree.render();
    root.expand();
});

我已经上传了完整的War文件(包含所有源代码),见:Extjs Tree + JSON + Struts2 的所有示例源代码和war文件下载




评论

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-02-19 10:41 by 久城
哈哈学习了!~返回JSON对象的时候,的确需要注意。

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-02-19 14:24 by altuure
nice tutorial

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-02-20 16:59 by xt
请教一个问题怎样将树下的栏目加上链接?
/*
* Ext JS Library 2.0
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

Ext.onReady(function(){
// shorthand
var Tree = Ext.tree;

var tree = new Tree.TreePanel({
el:'tree-div',
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'http://localhost:8080/extTest/menus.action'
})
});

// set the root node
var root = new Tree.AsyncTreeNode({
text: 'Ext JS',
href:'http://baidu.com',
draggable:false,
id:'source'
});
tree.setRootNode(root);

// render the tree
tree.render();
root.expand();
});

# re: Extjs Tree + JSON + Struts2 [未登录]  回复  更多评论   

2008-02-21 08:41 by 云自无心水自闲
@xt
这需要给树中节点添加点击的侦听函数:
Ext.getCmp("menuTree").on('click', function(node) {
if ( node.id == 1 ) {
Ext.get("center-iframe").dom.src = 'http://www.google.com';
} else {
node.toggle();
}
});


其中menuTree是TreePanel的id,
center-iframe是嵌入在另一个面板中的iframe的id

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-02-21 10:57 by xt
谢谢!我试试看吧.我的msn:xiaoqiu369@hotmail.com,希望有时间多向你请教!

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-03-09 00:56 by topsonstar
使用json-plugin也可以,只要在TreeLoader的processResponse处理一下,把返回的json对象处理为数组.

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-03-22 21:07 by hua_y9
谢谢,给予了很好的帮助~ :)

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-03-24 14:10 by laitao
有没有struts+ext整合的DEMO,我不知道怎么弄呢,如果有的话,请给我发一份好吗,邮箱1758_love@163.com

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-04-22 10:32 by ph
帮我解决了问题啊

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-04-25 09:31 by Nicolas
内容很棒。多谢

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-05-23 18:18 by gba
我按照文章的步骤来写的,但是虽然能够得到树,而且该树的root节点前面有+号,但是我一点那个+号,却出来不了子结点(并且+号消失),请问lz是怎么回事呢?谢谢了

我得到的json字符串是[{"children":[{"children":[],"cls":"file","id":11,"leaf":true,"text":"S600"},{"children":[],"cls":"file","id":12,"leaf":true,"text":"SLK200"}],"cls":"folder","id":10,"leaf":false,"text":"Benz"},{"children":[{"children":[],"cls":"file","id":21,"leaf":true,"text":"325i"},{"children":[],"cls":"file","id":22,"leaf":true,"text":"X5"}],"cls":"folder","id":20,"leaf":false,"text":"BMW"}]

# re: Extjs Tree + JSON + Struts2 [未登录]  回复  更多评论   

2008-06-17 13:46 by 坚持到底
你好,我按照上面的例子做完之后发现这不是一棵异步加载的树呀!楼主还有没有异步加载的例子了?

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-06-19 14:06 by usherlight
@坚持到底
你说的是lazy load还是async load?

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-07-07 17:24 by cqy
请问,如何在叶子节点上加入点击事件呢?

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-07-08 13:29 by usherlight
@cqy
这需要给树中节点添加点击的侦听函数:
Ext.getCmp("menuTree").on('click', function(node) {
if ( node.id == 1 ) {
Ext.get("center-iframe").dom.src = 'http://www.google.com';
} else {
node.toggle();
}
});


其中menuTree是TreePanel的id,
center-iframe是嵌入在另一个面板中的iframe的id

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-08-06 11:07 by cqq
如何判定本次点击的node为原有的node呢?
就是不想重新加载页面。

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-08-06 14:30 by cqq
问题已经解决,分享一下!
tree.on('beforeclick', function(n)
alert(n.id);
var sn = this.selModel.selNode || {};// 取原选定的node
if( n.id != sn.id){ // ignore clicks on folders and currently selected

var paramsStr;
paramsStr="FItemClassID=" + n.id+ "&param2=bar";
//tree与grid组合时,可以使用以下方法只更新grid
Ext.get("grid").load({
url: "tryMc.aspx",
scripts: true,
params: paramsStr ,
text: "正在加载数据,请稍侯……"
});


}
});

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-08-07 08:56 by usherlight
@cqq
谢谢分享

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-08-12 10:08 by 大帅
请问。 你的 第五步 menu.jsp 这个是干嘛的呀。 貌似他也不用来显示东西吧。

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-08-12 12:11 by 大帅
按照您做的 ,果然搞定了。。
伟大。。

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-08-12 12:16 by 大帅
问题又出来了啊。。。
难道使用struts2 后面的只要返回json的 难道都要 多建立一个jsp页面用于接受 action返回的 字段么?

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-08-12 20:03 by usherlight
@大帅
可以都使用menu.jsp

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-09-12 16:49 by solar
能不能这你这个源码发一个给我,我照 着做的,就是没效果,solar_mx@163.com

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-09-18 23:55 by errorfun
EXT中的JsonStore有个root属性,是取你返回的对象对应名称的数据。只要那个名称对应的是数组就可以了。

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-10-11 10:39 by 安安
@cqq
为什么var sn = this.selModel.selNode || {};我取的是现在选中的node的值啊!

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-10-15 15:27 by dgz
有些包不知道在哪里下,

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-10-21 22:14 by mnzi
能提供下载吗?不成功

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-12-21 10:55 by snowwolf
怎么把数据返回给后台 ?

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-12-21 14:41 by usherlight
@snowwolf
可以参考cqq的答复

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-12-28 15:07 by Iain
是我漏掉哪一步了么,
[{"id":7,"leaf":true,"text":"组织管理"},{"id":8,"leaf":true,"text":"用户管理"},{"id":9,"leaf":true,"text":"角色管理"},{"id":10,"leaf":true,"text":"模块设置"},{"id":16,"leaf":true,"text":"系统设置"},{"id":17,"leaf":true,"text":"操作日志查询"},{"id":18,"leaf":true,"text":"通知日志"}]

和spirng2.5,hib3,struts2,一起从mysql里刷出来的数据. 就想实现点击父节点是触发异步刷新. 请指教下, 异常感谢!

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2008-12-28 16:19 by Iain
@gba

我也是子节点显示不出, 控制台能打出来正常的json串.

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2009-02-23 23:26 by jache
能说明一下第五步是干什么用的??

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2009-03-16 15:00 by l932
第五步的menu.jsp到底是在哪加载的

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2009-03-20 10:58 by usherlight
@l932
在record.js中的dataUrl是:http://localhost:8080/lab/menus.action
而在struts.xml中,menu.jsp是menu.action的返回页面

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2009-05-25 16:44 by why
在action那里,最后写 ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
PrintWriter out=ServletActionContext.getResponse().getWriter();

out.print(menuString);

out.close();
这样就可以省掉menu.jsp这一步..

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2009-05-26 09:15 by usherlight
@why
Thanks a lot.

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2009-08-15 10:53 by xiao huang
能不能这你这个源码发一个给我,我照 着做的,就是没效果,
hyouz126@126.com

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2009-08-15 11:04 by xiao huang
@大帅
能不能把你源码发来看看, hyouz126@126.com

# re: Extjs Tree + JSON + Struts2 [未登录]  回复  更多评论   

2009-09-11 10:39 by 小鸟
非常感谢,按源码整出来了

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2009-09-28 11:00 by 张闪闪
var tree = new Tree.TreePanel({
el:'tree-div',
autoScroll:true,
animate:true,
enableDD:true,
containerScroll: true,
loader: new Tree.TreeLoader({
dataUrl:'http://localhost:8080/extTest/menus.action'
})
});
叶子节点同样也会进入“menus.action”,我也要叶子节点进入另外的Action,请问怎么做?

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2009-09-29 15:49 by mooxin
能不能给我发一份源码,mooxin@163.com.cn,先谢谢了!

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2009-12-02 09:14 by 哎,不会利用客户端资源
差劲,还要服务端组合成数据格式,这还要你这样做干什么呢?

# re: Extjs Tree + JSON + Struts2 [未登录]  回复  更多评论   

2009-12-07 17:02 by wolf
好东西顶了

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2010-05-11 11:35 by
帅哥我想问下,我按照你的做法,可是报错了
net.sf.json.JSONException: There is a cycle in the hierarchy!

一个死循环。。。。

这是什么问题呢?可以的话加下我QQ行吗?378578601

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2010-05-11 11:35 by
帅哥我想问下,我按照你的做法,可是报错了
net.sf.json.JSONException: There is a cycle in the hierarchy!

一个死循环。。。。

这是什么问题呢?可以的话加下我QQ行吗?378578601

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2010-05-11 20:32 by usherlight
@金
应该是你的JSON返回串的问题。

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2010-05-11 20:36 by usherlight
@哎,不会利用客户端资源
权限的数据应该存储在服务器端面吧。

# re: Extjs Tree + JSON + Struts2 [未登录]  回复  更多评论   

2012-05-29 13:24 by K
如果从数据库调用数据呢。不是写死了。要怎么做

# re: Extjs Tree + JSON + Struts2   回复  更多评论   

2014-04-12 10:55 by 赵帅帅
实体类menu中,hebernate注解怎么写

只有注册用户登录后才能发表评论。


网站导航: