Recientemente intenté usar EXTJS para mostrar un menú similar a un árbol. Realmente tomó mucho esfuerzo. Los elementos del menú del menú similar a un árbol deben cargarse dinámicamente, mientras que la versión actual de ExtJS solo admite datos de formato JSON. Después de verificar algo de información, decidí usar JSON-Plugin de Struts2. Primero, hice uno según el ejemplo, pero el resultado fue que no tenía éxito. Solo apareció un nodo raíz generado en JS en la interfaz, y los datos generados desde el fondo no se pudieron cargar. Después de la investigación, se descubrió que había un problema con el formato de datos. Los datos generados usando JSON-Plugin son los siguientes:
{"CLS": "Carpeta", "id": 10, "Leaf": False, "Niños": [{"CLS": "File", "Id": 11, "Leaf": True, "Children": Null , "Texto": "S600"}, {"CLS": "File", "Id": 12, "Leaf": True, "Children": Null, "Text": "Slk200"}], "Texto": "Benz"} El formato de datos requerido por ExtJS es el siguiente:
[{"cls": "carpeta", "id": 10, "hoja": falso, "niños": [{"cls": "archivo", "id": 11, "hoja": verdadero, "niños": nulo , "Texto": "S600"}, {"CLS": "File", "Id": 12, "Leaf": True, "Children": Null, "Text": "Slk200"}], "Texto": "Benz"}]] La diferencia es muy pequeña, por lo que solo hay dos soportes cuadrados en la diferencia más externa. Sin embargo, sin estos dos soportes cuadrados, en JSON, el significado es muy diferente. El primero representa un objeto, mientras que el segundo representa una matriz. Los datos requeridos por el Tree DataLoader en extjs deben ser una matriz. Y tal formato de datos es generado automáticamente por JSON-Plugin y no se puede cambiar. Entonces, terminé renunciando a JSON -Plugin y en su lugar usé JSON -LIB para resolver este problema.
1. Descargar json-lib, http://json-lib.sourceforge.net/
2. Lista de archivos JAR en el directorio lib:
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
Primero configurar web.xml
<? xml versión = "1.0" encoding = "utf-8"?> <web-app versión = "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"> <velente--list> <callado> index.jsp </bienvenido-file> </bienvenido--list> <filter> <filter-name> struts2 </filtre-name> <filter-class> org.apache.struts2.dispatcher.filterdispatcher </filter-class> </filter> <filter-mapping> <filter-name> struts2 </filter-name> <url-pattern>/*</ url-pattern> </filter-mapping> </bebap>
Luego está Struts.xml
<? xml versión = "1.0" encoding = "utf-8"?> <! DocType Struts public "-// Apache Software Foundation // Dtd Struts Configuración 2.0 // en" "http://struts.apache.org/dtds/struts-2.0.dtdd"> <truts> <stitant name = "struts.devmode" <constant name = "struts.i18n.encoding" value = "utf-8"/> <paquete name = "persona" extends = "struts-default"> <Action name = "menus" método = "ejecutar"> <sult> /menu.jsp </resultado> </action> </paquete> </struts>
3. Modelo de nodo de árbol (Getter, Setter se omite)
Menú de clase pública {private int id; texto de cadena privada; hoja booleana privada; CLS de cadena privada; Lista privada <menú> niños;} 4. Acción
paquete com.lab; import java.util.arrayList; import java.util.list; import net.sf.json.jsonArray; public class MenuAction {private String Menustring; Lista privada <menú> menús; public String Execute () {Menus = New ArrayList <Menen> (); Menú benz = nuevo menú (); benz.settext ("benz"); benz.setcls ("carpeta"); benz.setleaf (falso); benz.setid (10); menús.add (benz); List <menen> benzlist = new ArrayList <Menu> (); benz.setchildren (benzlist); Menú menú; menú = nuevo menú (); menú.settext ("S600"); menú.setCls ("archivo"); menú.setLeaf (verdadero); menú.SetId (11); benzlist.add (menú); menú = nuevo menú (); menú.settext ("SLK200"); menú.setCls ("archivo"); menú.setLeaf (verdadero); menú.SetId (12); benzlist.add (menú); Menú BMW = nuevo menú (); bmw.settext ("BMW"); bmw.setcls ("carpeta"); bmw.setleaf (falso); bmw.setid (20); menú.Add (BMW); Lista <Sen> bmwList = new ArrayList <Menu> (); bmw.setchildren (bmwlist); menú = nuevo menú (); menú.settext ("325i"); menú.setCls ("archivo"); menú.setLeaf (verdadero); menú.SetId (21); bmwlist.add (menú); menú = nuevo menú (); menú.settext ("x5"); menú.setCls ("archivo"); menú.setLeaf (verdadero); menú.SetId (22); bmwlist.add (menú); JSONArray JsonObject = JSONArray.FromObject (menús); intente {menustring = jsonObject.ToString (); } capt (excepción e) {menustring = "ss"; } return "éxito"; } public String getMenustring () {return Menustring; } public void setmenustring (cadena menustrante) {this.nenustring = menustring; }} 5. Menu.jsp
< %@ taglib prefix = "s" uri = "/struts-tags" %> <s: propiedad value = "menustring" escudo = "false"/>
6. Página HTML y JS
Estoy usando reorder.html y reorder.js en el ejemplo extjs, y cambié el DataUrl de Teeloader en Reorder.js: Menus.Action
<html> <fead> <meta http-equiv = "content-type" content = "text/html; charset = ISO-8859-1"> <title> reorden treePanel </title> <link rel = "stylesheet" type = "text/css" href = "extjs/recursos/csss/ext-all.css" 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"> <s script " Estilos para los ejemplos-> <link rel = "stylesheet" type = "text/css" href = "extjs/recursos/css/ejemplo.css"/> </head> <body> <script type = "text/javascript" src = "../ ejemplos.js"> </script> < TreePanel </h1> <p> Este ejemplo muestra el nodo básico de arrastrar y soltar en un árbol. En esta implementación no hay restricciones y se puede dejar caer nada en cualquier lugar, excepto agregar a los nodos marcados (los archivos). <br> </p> <p> Arrastre a lo largo del borde del árbol para activar el desplazamiento automático mientras realiza una arrastre y caída. </p> <p> Para demostrar los puntos de inserción de arrastre y caída, la clasificación <b> no </b> habilitada. </p> <p> Los datos de este árbol se están cargados asíncronamente con un jon -treeLoader. </p> <p>. Ver <a href = "reorder.js"> reorder.js </a>. </p> <div id = "tree-div" style = "desbordamiento: auto; altura: 300px; ancho: 250px; borde: 1px sólido #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 tree = ext.tree; var tree = new tree.treePanel ({el: 'tree-div', autoscroll: true, animate: true, habilded: true, contenedor: verdad dataUrl: 'http: // localhost: 8080/lab/menus.action'})});
7. El código analizado en los datos de la lista es el siguiente:
Datos JSON en extjs
var combosTore = new Ext.Data.store ({proxy: new Ext.Data.httpProxy ({url: 'admingroup', // Aquí está la solicitud de Struts Solicitud a la acción del método: 'Post' // Método de solicitud}), lector: nuevo ext.data.jsonRer ({// registros totales totales id: 'rolid'}, ['roliD', 'rolename'] // dos campos mostrados)});
Contenido de datos JSON
{"items":[{"password":"ahui","adminId":1,"role":{"roleName":"System Administrator","roleId":2,"sequence":"2","admin":null,"logoutMark":"No"},"adminName":"ahui","logout":"No"}, {"contraseña": "xiao", "administrador": 2, "rol": {"rolename": "administrador del sistema", "roliD": 2, "secuencia": "2", "admin": null, "logOutMark": "no"}, "administrador": "xiao", "logrout": "y" y "resultados": 13}
A continuación se muestra el código de acción en Struts2 encapsula la clase de herramienta Exthelper, que contiene dos formatos: XML y JSON.
public String findall () lanza la excepción {httpservletRequest request = servletactionContext.getRequest (); HttpservletResponse respuesta = servletactionContext.getResponse (); List List = GroegementService.getGroup (); // Llamando al método en servicio para consultar todas las cadenas de datos JSON = ExtHelper.getJsonFromList (List); // Convertir la lista en JSON Format Data Respuesta.SetContentType ("Text/Json; Charset = UTF-8"); // Establezca la codificación de caracteres que se muestra en el escritorio de frente. Si los datos no se transfieren, habrá una respuesta confusa. System.out.println (JSON); regresar nulo; }Hay muchas formas de analizar JSON, así que cómo ser conveniente es. El propio paquete de JSON también se puede convertir, pero si usa Struts2 en el proyecto, es más conveniente usar el método proporcionado por Struts2 directamente.