sturts2+json+extjs_tree

最新推荐文章于 2024-07-19 10:28:14 发布

wzh695

最新推荐文章于 2024-07-19 10:28:14 发布

阅读量2.5k

点赞数

分类专栏： ajax spring struts2 文章标签： extjs json struts tree menu licensing

spring 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

struts2

3 篇文章 0 订阅

订阅专栏

ajax

2 篇文章 0 订阅

订阅专栏

Extjs Tree + JSON + Struts2
Posted on 2008-02-19 09:27 云自无心水自闲阅读(5073) 评论(13) 编辑收藏所属分类: Java 、心得体会、Struts2 、Ajax 、Extjs
最近尝试用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
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" />

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
     

    <script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="reorder.js"></script>

<link rel="stylesheet" type="text/css" href="extjs/resources/css/example.css" />
</head>
<body>
<script type="text/javascript" src="../examples.js"></script>
<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 "leaf" (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 <a href="reorder.js">reorder.js</a>.</p>

</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();
});

Feedback
# 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?

wzh695

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
sturts2+json+extjs_tree

Extjs Tree + JSON + Struts2Posted on 2008-02-19 09:27 云自无心水自闲阅读(5073) 评论(13) 编辑收藏所属分类: Java 、心得体会、Struts2 、Ajax 、Extjs最近尝试用extjs来展示树状菜单。着实花了一番功夫。树状菜单的菜单项需要动态加载，而目前版本的extjs中只支持JSON格式的数据。查了一些资料，决定
复制链接

扫一扫