Недавно я попытался использовать Extjs, чтобы показать деревоподобное меню. Это действительно потребовало много усилий. Меню пункты меню, похожих на дерево, необходимо загрузить динамически, в то время как текущая версия ExtJs поддерживает только данные формата JSON. После проверки некоторой информации я решил использовать JSON-Plugin от Struts2. Во -первых, я сделал один в соответствии с примером, но в результате это было безуспешно. На интерфейсе появился только один корневой узел, сгенерированный в JS, и данные, полученные из фона, не могут быть загружены. После исследования было обнаружено, что была проблема с форматом данных. Данные, сгенерированные с использованием JSON-Plugin, являются следующими:
{"cls": "folder", "id": 10, "Leaf": false, "Дети": [{"cls": "файл", "ID": 11, "Leaf": True, "Дети": NULL , "text": "s600"}, {"cls": "file", "id": 12, "Leaf": true, "дети": null, "text": "slk200"}], "Текст": "benz"} Формат данных, требуемый ExtJS, заключается в следующем:
[{"cls": "folder", "id": 10, "Leaf": false, "дети": [{"cls": "file", "id": 11, "Leaf": true, "дети": null , "text": "s600"}, {"cls": "file", "id": 12, "Leaf": true, "дети": null, "text": "slk200"}], "Текст": "benz"}] Разница очень мала, поэтому на самой внешней разнице есть только две квадратные кронштейны. Однако без этих двух квадратных скобков, в JSON, значение очень отличается. Первый представляет объект, в то время как последний представляет собой массив. Данные, требуемые деревьями DataLoader в ExtJ, должны быть массивом. И такой формат данных автоматически генерируется JSON-Plugin и не может быть изменен. Итак, в итоге я отказался от JSON -Plugin и вместо этого использовал JSON -LIB, чтобы решить эту проблему.
1. Скачать json-lib, http://json-lib.sourceforge.net/
2. Список файлов JAR в каталоге 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
Эзморф-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-apps = "2.4" xmlns = "http://java.sun.com/xml/ns/j2ee" xmlns: xsi = "http://www.w3.org/2001/xmlschema ingstse "/www.w3. xsi: schemalocation = "http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <selcoge-file-list> <welcome-file> index.jsp </werveding file> </wallow-file> </wallow-file> </wallow-file> <//werveding file> </wallow file> </wallow file> </wallow 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> </url-pattern>/*</url-pattern </filter-pappapping> </*</</url-pattern> </*</url-pattern> </url-pattern> </*</*
Тогда есть struts.xml
<? xml version = "1.0" Encoding = "UTF-8"?> <! Doctype Struts Public "-// Apache Software Foundation // DTD Конфигурация Struts 2.0 // en" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <constancant name = "struts". <constant name = "struts.i18n.encoding" value = "utf-8"/> <name = "person" extends = "struts-default"> <name = "menus" method = "execute"> <Slust> /menu.jsp </result> </action> </package> </struts> /men
3. Модель узла дерева (Getter, Setter опущен)
Меню открытого класса {Private Int ID; частный строковый текст; частный логический лист; частная строка Cls; Частный список <меню> дети;} 4. Действие
Пакет com.lab; импортировать java.util.arraylist; import java.util.list; import net.sf.json.jsonarray; Менукция публичного класса {частная строка Menustring; Частный список <меню> меню; public String execute () {menus = new ArrayList <Menu> (); Меню бенз = новое меню (); benz.settext ("benz"); benz.setcls ("папка"); benz.setleaf (false); benz.setid (10); Menus.Add (Benz); Список <Menu> benzlist = new ArrayList <Menu> (); Benz.setchildren (Benzlist); Меню меню; меню = новое меню (); menu.settext ("s600"); menu.setcls ("file"); menu.setleaf (true); menu.setid (11); benzlist.add (меню); меню = новое меню (); menu.settext ("slk200"); menu.setcls ("file"); menu.setleaf (true); menu.setid (12); benzlist.add (меню); Меню BMW = новое меню (); bmw.settext ("bmw"); bmw.setcls ("папка"); bmw.setleaf (false); bmw.setid (20); Menu.Add (BMW); Список <menu> bmwlist = new ArrayList <Menu> (); bmw.setchildren (bmwlist); меню = новое меню (); menu.settext ("325i"); menu.setcls ("file"); menu.setleaf (true); menu.setid (21); bmwlist.add (меню); меню = новое меню (); menu.settext ("x5"); menu.setcls ("file"); menu.setleaf (true); menu.setid (22); bmwlist.add (меню); Jsonarray jsonobject = jsonarray.fromobject (меню); try {menustring = jsonObject.toString (); } catch (Exception e) {menustring = "ss"; } вернуть "успех"; } public String getMenustring () {return menustring; } public void setMenustring (String mendring) {this.menustring = menustring; }} 5. Menu.jsp
< %@ taglib prefix = "s" uri = "/struts-tags" %> <s: свойство значение = "menustring" Escape = "false"/>
6. HTML Page и JS
Я использую reorder.html и reorder.js в примере extjs и изменил данные TreeLoader в Reorder.js: Menus.Action.
<html> <Head> <meta http-equiv = "content-type" content = "text/html; charset = iso-8859-1"> <Teal> Treepanel </title> <link rel = "type =" text/css "href =" extjs/css/ext-all.css "-> <! -> <script type = "text/javascript" src = "extjs/adapter/ext/ext-base.js"> </script> <!-endlibs-> <script type = "text/javascript" src = "extjs/ext-all.js"> </script> <script = "text/javascript" src = "reorder.js"> </script> <!-Общие стили для примеров-> <link rel = "stylessheet" type = "text/css" href = "extjs/resources/css/example.css"/> </head> <body> <script type = "text/javascript" src = "../ ../ ../ .. или". -> <h1> перетаскивать заказ в Treepanel </h1> <p> В этом примере показано основное перетаскивание узла, движущееся в дереве. В этой реализации нет никаких ограничений, и все может быть отброшено где угодно, кроме как добавить в узлы, помеченные листьями (файлы). <br> </p> <p> Перетащите по краю дерева, чтобы запустить автоматическую прокрутку при выполнении перетаскивания. См. <A href = "Reorder.js"> Reorder.js </a>. </P> <div Id = "tree-div" style = "overflow: auto; height: 300px; ширина: 250px; граница: 1px solid #c3daf9;"> </div> </body> </html>
JS:
/ * * EXT JS Библиотека 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, inimate: true, Enensured: True, ContacterScroll: TrueAd. DataRl: http: // localhost: 8080/lab/menus.action '})});
7. Код, пропокат в данные списка, выглядит следующим образом:
Данные JSON в extjs
var combostore = new Ext.Data.Store ({proxy: new Ext.Data.httpproxy ({url: 'admingroup', // вот метод запроса на хриплы на действие: id: 'roleid'}, ['roleid', 'rolename'] // отображаются два поля)});
Содержание данных JSON
{«элементы»: [{«пароль»: «ахуи», «adminid»: 1, «роль»: {«rolename»: «Системный администратор», «Roleid»: 2, «последовательность»: «2», «Админ»: NULL, «Logoutmark»: «Нет»}, «adminname»: «ahui», «нет»: «Нет», «нет»}, «adminname»: «ahui», «нет»: {«Пароль»: «Xiao», «AdminId»: 2, «Роль»: {«Rolename»: «Системный администратор», «Roleid»: 2, «последовательность»: «2», «Администратор»: NULL, «LogoutMart»: «Нет»}, «AdminName»: «XIAO», «Отчет»: «Да»}, «Результаты»:
Ниже приведен код действия в Struts2 инкапсулирует класс инструментов Exthelper, который содержит два формата: XML и JSON.
public String findall () бросает exection {httpservletrequest request = servletactoncontext.getRequest (); Httpservletresponse response = servletactionContext.getResponse (); Список списка = Groupservice.getGroup (); // Вызов метода в обслуживании, чтобы запросить все строки данных json = exthelper.getjsonfromlist (list); // конвертировать список в json формат данных. Если данные не переданы, будет искаженная реакция. GetWriter (). Write (json); System.out.println (json); вернуть ноль; }Есть много способов проанализировать JSON, так как быть удобным. Собственный пакет JSON также может быть преобразован, но если вы используете Struts2 в проекте, более удобно использовать метод, предоставленный Struts2 напрямую.