Récemment, j'ai essayé d'utiliser des extjs pour montrer un menu en forme d'arbre. Cela a vraiment fallu beaucoup d'efforts. Les éléments de menu du menu de type arborescence doivent être chargés dynamiquement, tandis que la version actuelle d'EXTJS ne prend en charge que les données de format JSON. Après avoir vérifié certaines informations, j'ai décidé d'utiliser JSON-Plugin de Struts2. Tout d'abord, j'en ai fait un selon l'exemple, mais le résultat a été qu'il n'a pas réussi. Un seul nœud racine généré dans JS est apparu sur l'interface, et les données générées à partir de l'arrière-plan n'ont pas pu être chargées. Après la recherche, il a été constaté qu'il y avait un problème avec le format de données. Les données générées à l'aide de JSON-Plugin sont les suivantes:
{"CLS": "Folder", "Id": 10, "Leaf": False, "Enfants": [{"CLS": "File", "Id": 11, "Leaf": True, "Enfants": NULL , "Texte": "S600"}, {"CLS": "File", "Id": 12, "Leaf": true, "Enfants": Null, "Text": "SLK200"}], "Text": "Benz"}} Le format de données requis par EXTJS est le suivant:
[{"CLS": "Folder", "Id": 10, "Leaf": False, "Enfants": [{"CLS": "File", "Id": 11, "Leaf": True, "Enfants": NULL , "Texte": "S600"}, {"CLS": "File", "Id": 12, "Leaf": true, "Enfants": Null, "Text": "SLK200"}], "Text": "Benz"}] La différence est très petite, il n'y a donc que deux supports carrés sur la différence la plus externe. Cependant, sans ces deux crochets, en JSON, le sens est très différent. Le premier représente un objet, tandis que le second représente un tableau. Les données requises par l'arborescence Dataloder dans les extjs doivent être un tableau. Et un tel format de données est automatiquement généré par JSON-Plugin et ne peut pas être modifié. Donc, j'ai fini par abandonner JSON -Plugin et j'ai plutôt utilisé JSON-Lib pour résoudre ce problème.
1. Téléchargez Json-lib, http://json-lib.sourceforge.net/
2. Liste des fichiers JAR dans le répertoire Lib:
Commons Beanutils-1.7.0.jar
Commons-Collections-3.2.jar
Commons-digeter-1.6.jar
Commons-Lang-2.3.jar
Commons-Logging-1.1.jar
dom4j-1.6.1.jar
ezmorph-1.0.4.jar
freariker-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
Configurez d'abord 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: ScheMalation = "http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> bienvenue-File-List> <Lelow-File> index.jsp </venduciel> <filter-name> struts2 </ filter-name> <filter-class> org.apache.struts2.dispatcher.filterdispatcher </filter-class> </ filter> <filter-mapping> <filter-name> stuts2 </ filter-name> <url-sattern> / * </rl-protn>
Ensuite, il y a des 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"> <strutts> <constante nom = "Struts.Devmode" name = "strut.i18n.encoding" value = "utf-8" /> <package name = "personne" étend = "struts-default"> <action name = "menus" metheth = "execute"> <sult> /menu.jsp </cult> </ action> </ package> </ struts>
3. Modèle de nœud d'arbre (Getter, Setter est omis)
Menu de classe publique {private int id; texte de chaîne privé; feuille booléenne privée; CLS de chaînes privées; Liste privée <ennu> Enfants;} 4. Action
package com.lab; import java.util.arraylist; import java.util.list; import net.sf.json.jsonArray; public class menuaction {private String Menustring; Menus de liste privée <enu>; public String execute () {Menus = new ArrayList <ennu> (); Menu benz = new menu (); Benz.setText ("Benz"); benz.setcls ("dossier"); benz.setleaf (false); benz.setid (10); menus.add (benz); List <ennu> benzlist = new ArrayList <ennu> (); Benz.Setchildren (Benzlist); Menu menu; menu = nouveau menu (); menu.setText ("S600"); menu.setcls ("fichier"); menu.setleaf (true); menu.setid (11); benzlist.add (menu); menu = nouveau menu (); menu.setText ("SLK200"); menu.setcls ("fichier"); menu.setleaf (true); menu.setid (12); benzlist.add (menu); Menu bmw = new menu (); BMW.SeTText ("BMW"); bmw.setcls ("dossier"); bmw.setleaf (false); bmw.setid (20); menu.add (BMW); List <ennu> bmwlist = new ArrayList <ennu> (); BMW.Setchildren (BMWList); menu = nouveau menu (); menu.setText ("325i"); menu.setcls ("fichier"); menu.setleaf (true); menu.setid (21); BMWList.add (menu); menu = nouveau menu (); menu.setText ("x5"); menu.setcls ("fichier"); menu.setleaf (true); menu.setid (22); BMWList.add (menu); JSONArray JSONObject = JSONArray.fromObject (menus); essayez {menustring = jsonObject.toString (); } catch (exception e) {menustring = "ss"; } return "succès"; } public String getMenustring () {return Menustring; } public void setMenustring (String Menustring) {this.Menustring = Menustring; }} 5. menu.jsp
<% @ taglib prefix = "s" uri = "/ struts-tags"%> <s: propriété value = "menustring" Escape = "false" />
6. Page HTML et JS
J'utilise reorder.html et reorder.js dans l'exemple EXTJS, et j'ai changé le dataurl de Treeloader dans Reordre.js: menus.action
<Html> <A-head> <meta http-equiv = "content-type" contenu = "text / html; charset = iso-8859-1"> <itle> réorganiser Treepanel </ title> <link rel = "Stylesheet" type = "text / csss" href = "extjs / ressources / css / ext-tout -> <script type = "text / javascript" src = "extjs / adapter / ext / ext-base.js"> </ script> <! - endlibs -> <script type = "text / javascrip Les exemples -> <link rel = "stylesheet" type = "text / css" href = "extjs / ressources / css / example.css" /> </ head> <pody> <script type = "text / javascript" src = "../ examples.js"> </ script> <! glisser et déposez le nœud se déplaçant dans un arbre. Dans cette implémentation, il n'y a pas de restrictions et tout peut être supprimé n'importe où, sauf en ajoutant aux nœuds marqués la feuille (les fichiers). <br> </p> <p> Faites glisser le long du bord de l'arbre pour déclencher le défilement automatique tout en effectuant un glisser-déposer. </p> <p> Afin de démontrer les points d'insertion de glisser-déposer, le tri était <b> pas </b> activé. </p> <p> Les données de cet arbre sont asynchrones chargées d'un json Treeloder. Voir <a href = "reorder.js"> reorder.js </a>. </p> <div id = "arbre-div" style = "overflow: auto; hauteur: 300px; width: 250px; border: 1px solide # c3daf9;"> </div> </ body> </html>
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 arbre = ext.tree; var arbre = new Tree.Treepanel ({el: 'Tree-Div', Autoscroll: true, animate: true, aledd: true, contenerscroll: true, chargeur: New Tree.treoader ({ait: TRUE, CONTEDITEDCROLL: true, chargeur: New Tree.treoader ({ot DataUrl: 'http: // localhost: 8080 / lab / menus.action'})});
7. Le code analysé dans les données de liste est le suivant:
Données JSON dans les extjs
var combostore = new ext.data.store ({proxy: new ext.data.httproxy ({url: 'admingroup', // voici la méthode de la demande d'action de la demande d'action: 'Post' // de la demande}), lecteur: les résultats ext.data.jsonread ({// Total recordsproperty: 'résultats', // id: 'roleid'}, ['roleid', 'rolename'] // deux champs affichés)});
Contenu des données JSON
{"items": [{"mot de passe": "AHUI", "adminid": 1, "rôle": {"roleName": "System Administrator", "RoleID": 2, "Sequence": "2", "admin": null, "logoutmark": "non"}, "adminname": "AHUI", "Logout": "NO"}, ", {"mot de passe": "xiao", "adminid": 2, "role": {"rolename": "System Administrator", "RoleId": 2, "Sequence": "2", "admin": null, "Logoutmark": "non"}, "Adminname": "Xiao", "Logout": "Oui"}, "Résultats": 13}
Vous trouverez ci-dessous le code d'action dans Struts2 résume la classe d'outils Exthelper, qui contient deux formats: XML et JSON.
Public String findall () lève l'exception {httpServleRequest request = servletActionContext.getRequest (); HttpServletResponse Response = servletActionContext.getResponse (); List list = groupService.getGroup (); // Appel de la méthode du service pour interroger toutes les chaînes de données json = exthelper.getjsonfromlist (list); // convertit list en json format data réponse.setContentType ("text / json; charset = utf-8"); // définir le codage des caractères affiché dans la réception. Si les données ne sont pas transférées, il y aura une réponse brouillée.getWriter (). Write (JSON); System.out.println (JSON); retourner null; }Il existe de nombreuses façons d'analyser JSON, alors comment être pratique est. Le propre package de JSON peut également être converti, mais si vous utilisez Struts2 dans le projet, il est plus pratique d'utiliser directement la méthode fournie par Struts2.