Kürzlich habe ich versucht, ExtJs zu verwenden, um ein baumartiges Menü anzuzeigen. Es hat wirklich viel Mühe gebraucht. Menüelemente des baumartigen Menüs müssen dynamisch geladen werden, während die aktuelle Version von ExtJS nur JSON-Formatdaten unterstützt. Nachdem ich einige Informationen überprüft hatte, entschied ich mich, JSON-Plugin von Struts2 zu verwenden. Zuerst habe ich einen gemäß dem Beispiel gemacht, aber das Ergebnis war, dass es erfolglos war. Auf der Schnittstelle erschien nur ein in JS erzeugter Stammknoten, und die aus dem Hintergrund generierten Daten konnten nicht geladen werden. Nach der Forschung wurde festgestellt, dass es ein Problem mit dem Datenformat gab. Die mit JSON-Plugin generierten Daten sind wie folgt:
{"cls": "Ordner", "ID": 10, "Blatt": Falsch, "Kinder": [{"Cls": "Datei", "ID": 11, "Leaf": wahr, "Kinder": null , "Text": "S600"}, {"Cls": "Datei", "ID": 12, "Blatt": wahr, "Kinder": Null, "Text": "Slk200"}, "Text": "Benz"} Das von ExtJS erforderliche Datenformat lautet wie folgt:
[{"Cls": "Ordner", "ID": 10, "Blatt": Falsch, "Kinder": [{"Cls": "Datei", "ID": 11, "Leaf": wahr, "Kinder": null , "Text": "S600"}, {"Cls": "Datei", "ID": 12, "Leaf": wahr, "Kinder": Null, "Text": "Slk200"}, "Text": "Benz"}] Der Unterschied ist sehr klein, daher gibt es nur zwei Quadratklammern zum äußersten Unterschied. Ohne diese beiden Quadratklammern in JSON ist die Bedeutung jedoch sehr unterschiedlich. Ersteres repräsentiert ein Objekt, während letzteres ein Array darstellt. Die vom Baum Dataloader in ExtJs erforderlichen Daten müssen ein Array sein. Und ein solches Datenformat wird automatisch von JSON-Plugin generiert und kann nicht geändert werden. Also gab ich JSON -Plugin auf und verwendete stattdessen JSON -Lib, um dieses Problem zu lösen.
1. Download json-lib, http://json-lib.sourceforge.net/
2. Liste der JAR -Dateien im Lib -Verzeichnis:
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
Konfigurieren Sie zuerst web.xml
<? XSI: Schemalocation = "http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <willkommen-file-list> </Welcome-file> Index.jspile> </willkommen> </willkommen> </willkommen> </willkommen> </willkommen> </willkommen> </willkommen> </willkommen> </willkommen> </willkommen> </willkommen> </willkommen> </willkommen> </willkommen> </willkommen; <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>
Dann gibt es Struts.xml
<? name = "struts.i18n.encoding" value = "utf-8"/> <package name = "person" extends = "struts-default"> <action name = "meenus" method = "execute"> <Elteuring> /menu.jsp </result> </action> </package> </struts> </struts> </struts> struts> </struts> </struts> struts> </struts> </struts> </stolzs> </struts> </struts> </struts> </stolzs> </struts> </struts> </struts>
3.. Baumknotenmodell (Getter, Setter wird weggelassen)
öffentliches Klassenmenü {private int id; privater Stringtext; privates boolescher Blatt; private String -Cls; Private List <Meens> Kinder;} 4. Aktion
Paket com.lab; import Java.util.ArrayList; Import Java.util.List; import net.sf.json.jsonArray; public class -Menü {private String menustring; Private List <Meen> Menüs; public String execute () {menus = new ArrayList <su> (); Menü Benz = neues Menü (); Benz.setText ("Benz"); Benz.setcls ("Ordner"); Benz.setleaf (falsch); Benz.Setid (10); Menüs.add (Benz); LIST <MENU> BENZList = New ArrayList <emuit> (); Benz.Setchildren (Benzlist); Menümenü; Menü = neues Menü (); Menü.SetText ("S600"); Menü.SetCls ("Datei"); Menü.Setleaf (true); Menü.SetId (11); Benzlist.Add (Menü); Menü = neues Menü (); Menü.SetText ("SLK200"); Menü.SetCls ("Datei"); Menü.Setleaf (true); Menü.SetId (12); Benzlist.Add (Menü); Menü BMW = neues Menü (); bmw.settext ("bmw"); bmw.setcls ("Ordner"); bmw.setleaf (falsch); bmw.setid (20); Menü.Add (BMW); LIST <MENU> BMWLIST = New ArrayList <em Menü> (); bmw.setchildren (bmwlist); Menü = neues Menü (); Menü.SetText ("325i"); Menü.SetCls ("Datei"); Menü.Setleaf (true); Menü.SetId (21); bmwlist.add (Menü); Menü = neues Menü (); Menü.SetText ("x5"); Menü.SetCls ("Datei"); Menü.Setleaf (true); Menü.SetId (22); bmwlist.add (Menü); JsonArray jsonObject = jsonArray.fromObject (Menüs); try {menustring = jsonObject.toString (); } catch (Ausnahme E) {MenuRing = "SS"; } return "Erfolg"; } public String getMenustring () {return menustring; } public void setMenustring (String Menustring) {this.menustring = menustring; }} 5. Menü.jsp
< %@ taglib prefix = "s" uri = "/struts-tags" %> <s: Eigenschaft value = "menustring" Escape = "False"/>
6. HTML -Seite und JS
Ich verwende im ExtJS -Beispiel Recorder.html und Recorder.js und änderte die Datenurl der Treeloader in Recorder.js: Menüs.Action.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 Stile für die Beispiele-> <link rel = "stylesheet" type = "text/css" href = "extjs/ressourcen/css/example.css"/> </head> <body> <script type = "text/javaScript" src = "../ Beispiele"> </script> <! Beispiel zeigt den grundlegenden Drag & Drop -Knoten in einem Baum. In dieser Implementierung gibt es keine Einschränkungen und alles kann überall fallen gelassen werden, außer dass sie an mit den Dateien markierten Knoten markiert sind. <br> </p> <p> Ziehen Sie die Kante des Baumes entlang, um das automatische Scrollen bei der Ausführung eines Drag -and -Drops auszulösen. Siehe <a href = "reorder.js"> recorder.js </a>.
JS:
/ * * Ext JS Library 2.0.1 * Copyright (C) 2006-2008, Ext JS, LLC. * [email protected] * * http://extjs.com/license */ext.onready (function () {// ShortHand var tree = ext. DataUrl: 'http: // localhost: 8080/lab/menus.action'})});
7. Der in Listendaten analysierte Code lautet wie folgt:
JSON -Daten in ExtJs
var combostore = new ext.data.store ({proxy: new ext.data.httpproxy ({url: 'admingroup', // Hier ist die Strümpfe -Anforderung an Aktionsmethode: 'Post' // Anforderung Methode}), Leser: New Ext.data.jsonReader ({// TotalPropery: 'Total Property: Total Property: Idlements', //// // TotalProperty: Idlements 'Total Records:' Idlements ', //// // TotalProperty: Total Property: Total Property. id: 'rollenId'}, ['rollen', 'rolename'] // Zwei angezeigte Felder)});
JSON -Dateninhalt
{"items": [{"Passwort": "Ahui", "AdminID": 1, "Rolle": {"rolename": "Systemadministrator", "Rollen": 2, "Sequenz": "2", "Administrator": null, "logoutmark": "no"}, "adminname": "ahui", "logout": "logout": "": "fogout": "": "» «: {"password":"xiao","adminId":2,"role":{"roleName":"system administrator","roleId":2,"sequence":"2","admin":null,"logoutMark":"No"},"adminName":"xiao","logout":"Yes"},"results":13}
Im Folgenden finden Sie den Aktionscode in Struts2, der die Exthelper -Werkzeugklasse enthält, die zwei Formate enthält: XML und JSON.
public String findAll () löst Ausnahme aus {httpServletRequest request = servletActionContext.getRequest (); HttpServletResponse response = servletActionContext.getResponse (); Listlist = GroupService.getGroup (); // Aufrufen der Methode im Dienst, um alle Datenstring JSON = exthelper.getJsonfromlist (Liste); // List in JSON-Formatdaten-Antwort zu konvertieren. Wenn die Daten nicht übertragen werden, wird die Antwort bestraft. System.out.println (JSON); null zurückkehren; }Es gibt viele Möglichkeiten, JSON zu analysieren. Wie man bequem ist, ist es also. Das eigene Paket von JSON kann auch konvertiert werden. Wenn Sie jedoch Struts2 im Projekt verwenden, ist es bequemer, die von Struts2 bereitgestellte Methode zu verwenden.