|
|
posted on 2008-02-19 09:27 云自无心水自闲 阅读(43562) 评论(49) 所属分类: 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
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.jspwelcome-file>
welcome-file-list>
<filter>
<filter-name>struts2filter-name>
<filter-class>org.apache.struts2.dispatcher.filterdispatcherfilter-class>
filter>
<filter-mapping>
<filter-name>struts2filter-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.jspresult>
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" %>
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 treepaneltitle>
<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 treepanelh1>
<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>notb> 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.jsa>.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文件（包含所有源代码），见：
评论
# re: extjs tree json struts2 回复
2008-02-19 10:41 by
哈哈学习了！～返回json对象的时候，的确需要注意。
# re: extjs tree json struts2 回复
2008-02-19 14:24 by
nice tutorial
# re: extjs tree json struts2 回复
2008-02-20 16:59 by
请教一个问题怎样将树下的栏目加上链接?
/*
* ext js library 2.0
* 凯发天生赢家一触即发官网 copyright(c) 2006-2007, ext js, llc.
* licensing@extjs.com
*
*
*/
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:''
})
});
// set the root node
var root = new tree.asynctreenode({
text: 'ext js',
href:'',
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 = '';
} else {
node.toggle();
}
});
其中menutree是treepanel的id,
center-iframe是嵌入在另一个面板中的iframe的id
# re: extjs tree json struts2 回复
2008-02-21 10:57 by
谢谢!我试试看吧.我的msn:xiaoqiu369@hotmail.com,希望有时间多向你请教!
# re: extjs tree json struts2 回复
2008-03-09 00:56 by
使用json-plugin也可以，只要在treeloader的processresponse处理一下，把返回的json对象处理为数组.
# re: extjs tree json struts2 回复
2008-03-22 21:07 by
谢谢，给予了很好的帮助~ :)
# re: extjs tree json struts2 回复
2008-03-24 14:10 by
有没有struts ext整合的demo，我不知道怎么弄呢，如果有的话，请给我发一份好吗，邮箱1758_love@163.com
# re: extjs tree json struts2 回复
2008-04-22 10:32 by
帮我解决了问题啊
# re: extjs tree json struts2 回复
2008-04-25 09:31 by
内容很棒。多谢
# re: extjs tree json struts2 回复
2008-05-23 18:18 by
我按照文章的步骤来写的，但是虽然能够得到树，而且该树的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
@坚持到底
你说的是lazy load还是async load?
# re: extjs tree json struts2 回复
2008-07-07 17:24 by
请问，如何在叶子节点上加入点击事件呢？
# re: extjs tree json struts2 回复
2008-07-08 13:29 by
@cqy
这需要给树中节点添加点击的侦听函数:
ext.getcmp("menutree").on('click', function(node) {
if ( node.id == 1 ) {
ext.get("center-iframe").dom.src = '';
} else {
node.toggle();
}
});
其中menutree是treepanel的id,
center-iframe是嵌入在另一个面板中的iframe的id
# re: extjs tree json struts2 回复
2008-08-06 11:07 by
如何判定本次点击的node为原有的node呢？
就是不想重新加载页面。
# re: extjs tree json struts2 回复
2008-08-06 14:30 by
问题已经解决，分享一下!
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 "¶m2=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
@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
@大帅
可以都使用menu.jsp
# re: extjs tree json struts2 回复
2008-09-12 16:49 by
能不能这你这个源码发一个给我，我照 着做的，就是没效果，solar_mx@163.com
# re: extjs tree json struts2 回复
2008-09-18 23:55 by
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
有些包不知道在哪里下,
# re: extjs tree json struts2 回复
2008-10-21 22:14 by
能提供下载吗？不成功
# re: extjs tree json struts2 回复
2008-12-21 10:55 by
怎么把数据返回给后台 ?
# re: extjs tree json struts2 回复
2008-12-21 14:41 by
@snowwolf
可以参考cqq的答复
# re: extjs tree json struts2 回复
2008-12-28 15:07 by
是我漏掉哪一步了么,
[{"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
@gba
我也是子节点显示不出, 控制台能打出来正常的json串.
# re: extjs tree json struts2 回复
2009-02-23 23:26 by
能说明一下第五步是干什么用的？？
# re: extjs tree json struts2 回复
2009-03-16 15:00 by
第五步的menu.jsp到底是在哪加载的
# re: extjs tree json struts2 回复
2009-03-20 10:58 by
@l932
在record.js中的dataurl是：
而在struts.xml中，menu.jsp是menu.action的返回页面
# re: extjs tree json struts2 回复
2009-05-25 16:44 by
在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
@why
thanks a lot.
# re: extjs tree json struts2 回复
2009-08-15 10:53 by
能不能这你这个源码发一个给我，我照 着做的，就是没效果，
hyouz126@126.com
# re: extjs tree json struts2 回复
2009-08-15 11:04 by
@大帅
能不能把你源码发来看看， 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:''
})
});
叶子节点同样也会进入“menus.action”，我也要叶子节点进入另外的action,请问怎么做？
# re: extjs tree json struts2 回复
2009-09-29 15:49 by
能不能给我发一份源码，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
好东西顶了
# 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
@金
应该是你的json返回串的问题。
# re: extjs tree json struts2 回复
2010-05-11 20:36 by
@哎，不会利用客户端资源
权限的数据应该存储在服务器端面吧。
# re: extjs tree json struts2 [未登录] 回复
2012-05-29 13:24 by
如果从数据库调用数据呢。不是写死了。要怎么做
# re: extjs tree json struts2 回复
2014-04-12 10:55 by
实体类menu中，hebernate注解怎么写
|