Recentemente, tentei usar extjs para mostrar um menu semelhante a uma árvore. Realmente sofreu muito esforço. Os itens de menu do menu semelhante a árvore precisam ser carregados dinamicamente, enquanto a versão atual do EXTJS suporta apenas dados de formato JSON. Depois de verificar algumas informações, decidi usar o JSON-PLUGIN da STRUTS2. Primeiro, fiz um de acordo com o exemplo, mas o resultado foi que não foi bem -sucedido. Apenas um nó raiz gerado no JS apareceu na interface, e os dados gerados a partir do plano de fundo não puderam ser carregados. Após a pesquisa, verificou -se que havia um problema com o formato de dados. Os dados gerados usando JSON-PLUGIN são os seguintes:
{"cls": "pasta", "id": 10, "folha": false, "filhos": [{"cls": "arquivo", "id": 11, "folha": verdadeiro, "filhos": nulo , "text": "s600"}, {"cls": "arquivo", "id": 12, "folha": verdadeiro, "filhos": nulo, "text": "slk200"}], "text": "benz"} O formato de dados exigido pelo EXTJS é o seguinte:
[{"cls": "pasta", "id": 10, "folha": false, "filhos": [{"cls": "arquivo", "id": 11, "folha": verdadeiro, "filhos": nulo , "text": "s600"}, {"cls": "arquivo", "id": 12, "folha": verdadeiro, "filhos": nulo, "text": "slk200"}], "text": "benz"}]] A diferença é muito pequena, portanto, existem apenas dois suportes quadrados na diferença mais externa. No entanto, sem esses dois colchetes, em JSON, o significado é muito diferente. O primeiro representa um objeto, enquanto o último representa uma matriz. Os dados exigidos pelo dataloader da árvore no ExtJs devem ser uma matriz. E esse formato de dados é gerado automaticamente pelo JSON-PLUGIN e não pode ser alterado. Então, acabei desistindo do JSON -Plugin e, em vez disso, usei o JSON -Lib para resolver esse problema.
1. Baixe JSON-Lib, http://json-lib.sourceforge.net/
2. Lista de arquivos JAR no diretório 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
Primeiro configure web.xml
<? xml versão = "1.0" coding = "utf-8"?> <web-app version = "2.4" xmlns = "http://java.sun.com/xml/ns/j2ee" xmlns: xsi = "http:/wwwwwwwwww.w3.org/200: xsi =" http:/wwwwwwwwww.w3.org/200: xsi ... xsi: schemalocation = "http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <lorde-list> <lorda-file> </l-wild-file> <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>
Então há struts.xml
<? xml versão = "1.0" coding = "utf-8"?> <! Doctype suporta public "-// Apache Software Foundation // DTD Struts Configuration 2.0 // pt" "http://struts.apache.org/dtds/stuts-2.0.ddddddds> <Constant name = "struts.i18n.encoding" value = "utf-8"/> <name pacote = "pessoa" estende = "struts-defafult"> <ação name = "menus" method = "execute"> <costuts> /menu.jsp </resultado> </action> </package> </struts>
3. Modelo de nó de árvore (getter, setter é omitido)
Menu da classe pública {private int id; texto privado de string; folha booleana privada; String privado cls; Lista privada <Menu> crianças;} 4. Ação
pacote com.lab; importar java.util.ArrayList; importar java.util.list; importar net.sf.json.jsonArray; public class MenuAction {private string Menustring; Lista privada <pune> menus; public string execute () {menus = new ArrayList <pune> (); Menu benz = novo menu (); benz.settext ("benz"); benz.setCls ("pasta"); benz.setLeaf (falso); benz.setId (10); menus.add (Benz); List <pune> benzList = new ArrayList <pune> (); Benz.Setchildren (BenzList); Menu menu; menu = novo menu (); MENU.SETTEXT ("S600"); MENU.SETCLS ("FILE"); menu.setLeaf (true); MENU.SETID (11); benzlist.add (menu); menu = novo menu (); MENU.SETTEXT ("SLK200"); MENU.SETCLS ("FILE"); menu.setLeaf (true); MENU.SETID (12); benzlist.add (menu); Menu bmw = novo menu (); bmw.settext ("bmw"); bmw.setcls ("pasta"); bmw.setleaf (false); bmw.setId (20); menu.add (BMW); List <pune> bmwlist = new ArrayList <pune> (); bmw.setchildren (bmwlist); menu = novo menu (); MENU.SETTEXT ("325I"); MENU.SETCLS ("FILE"); menu.setLeaf (true); MENU.SETID (21); bmwlist.add (menu); menu = novo menu (); MENU.SETTEXT ("X5"); MENU.SETCLS ("FILE"); menu.setLeaf (true); MENU.SETID (22); bmwlist.add (menu); JsonArray JsonObject = JsonArray.FromObject (menus); tente {Menustring = jsonObject.ToString (); } catch (Exceção e) {Menustring = "SS"; } retornar "sucesso"; } public string getMenustring () {return Menustring; } public void setMenustring (String Menustring) {this.menustring = Menustring; }} 5. MENU.JSP
< %@ taglib prefix = "s" uri = "/struts-tags" %> <s: value da propriedade = "Menustring" Escape = "false"/>
6. página html e js
Estou usando reordenar.html e reordenar.js no exemplo do ExtJS, e mudei o DATAURL de TreeLoader em reordenar.js: 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/adaptador/ext/ext-bashe.js"> </script> <!-endlibs-> <script type = "text/javascript" src = "extjs/extl.js"> </script> <script " src = "reordenar.js"> </script> <!-Estilos comuns para os exemplos-> <link rel = "stylesheet" type = "text/css" href = "extjs/resources/css/exemplo.css"/> </chead> <body> <script type = "text/javascript" srcss ".. -> <H1> arraste e solte pedidos em um nó treepanel </h1> <p> Este exemplo mostra o nó de arrasto e soltar básico movendo -se em uma árvore. Nesta implementação, não há restrições e qualquer coisa pode ser descartada em qualquer lugar, exceto anexando a folhas marcadas com nós (os arquivos). <br> </p> <p> arraste ao longo da borda da árvore para desencadear rolagem automática enquanto executa um arrasto e soltar. Veja <a href = "reordenar.js"> reordenar.js </a>.
JS:
/ * * Ext JS Library 2.0.1 * Copyright (c) 2006-2008, Ext JS, LLC. * [email protected] * * http://extsjs.com/license */ext.onready (function () {// shorthand var árvore = ext.tree; var árvore = new Tree.TreePanel ({el: 'Tree-div', AutoScroll: ANIMA: ANIME Dataurl: 'http: // localhost: 8080/lab/menus.action'})});
7. O código analisado nos dados da lista é o seguinte:
Dados JSON em extjs
var combusttore = new ext.data.store ({proxy: new ext.data.httpproxy ({url: 'AdmingRoup', // aqui está o método de ação para ação: 'Post' // Solictty), Reader: New Ext.Data.JSonReader ({/ total '// TotalpTr. id: 'roleid'}, ['roleid', 'rolename'] // dois campos exibidos)});
Conteúdo de dados JSON
{"items":[{"password":"ahui","adminId":1,"role":{"roleName":"System Administrator","roleId":2,"sequence":"2","admin":null,"logoutMark":"No"},"adminName":"ahui","logout":"No"}, {"password":"xiao","adminId":2,"role":{"roleName":"System Administrator","roleId":2,"sequence":"2","admin":null,"logoutMark":"No"},"adminName":"xiao","logout":"Yes"},"results":13}
Abaixo está o código de ação no STRUTS2 encapsula a classe Exthelper Tool, que contém dois formatos: XML e JSON.
public string findall () lança exceção {httpServletRequest request = servletActionContext.getRequest (); HttpServletResponse Response = servletActionContext.getResponse (); Lista Lista = GroupService.getGroup (); // chamando o método no serviço para consultar todos os dados string json = exthelper.getjsonfromlist (list); // Converta a lista em formato json resposta de dados.setContentType ("text/json; charset = utf-8"); // Defina o caractere codificado exibido na recepção. Se os dados não forem transferidos, haverá respostas distorcidas.GetWriter (). Write (JSON); System.out.println (JSON); retornar nulo; }Existem muitas maneiras de analisar o JSON, então como ser conveniente. O pacote do próprio JSON também pode ser convertido, mas se você usar o STRUTS2 no projeto, é mais conveniente usar o método fornecido diretamente pelo Struts2.