{"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"}
鑰宔xtjs闇瑕佺殑鏁版嵁鏍煎紡濡備笅錛?br />
[{"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"}]
鍖哄埆寰堝皬錛屽氨鍙浉宸渶澶栭潰鐨勪袱涓柟鎷彿銆備絾鏄皯浜?jiǎn)杩欎袱涓栆?guī)嫭鍙鳳紝鍦╦son涓紝鍚箟榪ョ劧涓嶅悓錛屽墠鑰呰〃紺轟竴涓璞★紝鑰屽悗鑰呰〃紺轟竴涓暟緇勩傝宔xtjs涓?
tree鐨刣ataloader闇瑕佺殑鏁版嵁蹇呴』鏄竴涓暟緇勩傝岃繖鏍風(fēng)殑鏁版嵁鏍煎紡鏄痡son-plugin鑷姩鐢熸垚鐨勶紝鏃犳硶鏀瑰彉銆傛墍浠ワ紝鎴戞渶鍚庢斁寮冧簡(jiǎn)json
-plugin錛岃漿鑰屼嬌鐢╦son-lib鏉ヨВ鍐寵繖涓棶棰樸?br />
1. 涓嬭澆json-lib, http://json-lib.sourceforge.net/
2. lib鐩綍涓嬬殑jar鏂囦歡娓呭崟錛?br />
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>
鐒跺悗鏄痵truts.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. 鏍?wèi)鐨勮妭鐐规ā鍨嬪Q堢渷鐣ヤ簡(jiǎn)getter錛宻etter)
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欏甸潰鍜宩s
鎴戜嬌鐢ㄧ殑灝辨槸extjs鐨別xample涓殑reorder.html鍜宺eorder.js錛屾洿鏀逛簡(jiǎn)reorder.js涓璽reeloader鐨刣ataurl錛?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();
});
鎴戝凡緇忎笂浼犱簡(jiǎn)瀹屾暣鐨刉ar鏂囦歡錛堝寘鍚墍鏈夋簮浠g爜錛夛紝瑙侊細(xì)Extjs Tree + JSON + Struts2 鐨勬墍鏈夌ず渚嬫簮浠g爜鍜寃ar鏂囦歡涓嬭澆

]]>