-
核心提示:最近尝试用 extjs来展示树状菜单。着实花了一番功夫。树状菜单的菜单项需要动态加载,而目前版本的extjs中只支持JSON格式的数据。查了一些资料,决定使 用struts2的json-plugin。首先按照例子做了一个,但是结果就是不成功,界面上只出来了一个js中生成的root
-
最 近尝试用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 "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 >
- < 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();
- });
该篇是引用http://ajava.org/course/ajax/14590.html,这篇文章没有和数据库的交互,那么下一篇文章将会讲述和数据库交互的树的实例,下一个实例是我自己做的。