最近、extjsを使用して木のようなメニューを表示しました。本当に多くの努力が必要でした。ツリーのようなメニューのメニュー項目は動的にロードする必要がありますが、現在のバージョンのextJSはJSON形式のデータのみをサポートしています。情報を確認した後、Struts2のJSON-Pluginを使用することにしました。最初に、例に従ってそれを作成しましたが、結果は失敗したことでした。 JSで生成された1つのルートノードのみがインターフェイスに表示され、バックグラウンドから生成されたデータはロードできませんでした。調査の後、データ形式に問題があることがわかりました。 JSON-Pluginを使用して生成されたデータは次のとおりです。
{"cls"： "folder"、 "id"：10、 "leaf"：false、 "children"：[{"cls"： "file"、 "id"：11、 "leaf"：true、 "children"：null 、 "Text"： "s600"}、{"cls"： "file"、 "id"：12、 "leaf"：true、 "children"：null、 "text"： "slk200"}]、 "text"： "benz"} extJSが必要とするデータ形式は次のとおりです。
[{"cls"： "folder"、 "id"：10、 "leaf"：false、 "children"：[{"cls"： "file"、 "id"：11、 "leaf"：true、 "children"：null 、 "Text"： "S600"}、{"cls"： "file"、 "id"：12、 "leaf"：true、 "children"：null、 "text"： "slk200"}]、 "text"： "benz"}]]違いは非常に小さいため、最も外側の違いには2つの正方形の括弧しかありません。ただし、これらの2つの正方形の括弧がなければ、JSONでは、意味は非常に異なります。前者はオブジェクトを表し、後者は配列を表します。 extjsのツリーデータローダーが必要とするデータは、配列でなければなりません。このようなデータ形式はJSON-Pluginによって自動的に生成され、変更できません。それで、私はJSON -Pluginをあきらめ、代わりにJSON -LIBを使用してこの問題を解決しました。
1。JSON-LIB、http：//json-lib.sourceforge.net/をダウンロード
2。LIBディレクトリ内のJARファイルのリスト：
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
最初にweb.xmlを構成します
<？xml version = "1.0" encoding = "utf-8"？> <web-appバージョン= "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"> <welcome-file-list> <welcome-file> index.jss <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-perths
次に、struts.xmlがあります
<？xml version = "1.0" encoding = "utf-8"？> <！doctype struts public " - // apacheソフトウェア財団// dtd struts configuration 2.0 // en" "http://struts.apache.org/dtds/struts-2.0.dtd" name = "struts.i18n.encoding" value = "utf-8"/> <package name = "person" extends = "struts-default"> <action name = "menus" method = "execute"> <result> /menu.jsp </result> </action> </package> </struts> </struts>
3。ツリーノードモデル（ゲッター、セッターは省略されています）
パブリッククラスメニュー{private int id;プライベート文字列テキスト;プライベートブールリーフ;プライベート文字列cls;プライベートリスト<メニュー>子供;} 4。アクション
パッケージcom.lab; import java.util.arraylist; Import java.util.list; import net.sf.json.jsonarray; public class menuaction {private string menustring;プライベートリスト<メニュー>メニュー; public string execute（）{menus = new ArrayList <menu>（）;メニューBenz = new Menu（）; benz.settext（ "benz"）; benz.setcls（ "フォルダー"）; Benz.setLeaf（false）; benz.setid（10）; menus.add（benz）;リスト<メニュー> benzList = new ArrayList <menu>（）; Benz.setchildren（Benzlist）;メニューメニュー;メニュー= new Menu（）; menu.settext（ "s600"）; menu.setcls（ "file"）; menu.setLeaf（true）; menu.setId（11）; benzlist.add（メニュー）;メニュー= new Menu（）; menu.settext（ "slk200"）; menu.setcls（ "file"）; menu.setLeaf（true）; menu.setId（12）; benzlist.add（メニュー）;メニューbmw = new Menu（）; bmw.settext（ "bmw"）; bmw.setcls（ "フォルダー"）; bmw.setLeaf（false）; bmw.setid（20）;メニュー.Add（BMW）;リスト<メニュー> bmwlist = new ArrayList <menu>（）; bmw.setchildren（bmwlist）;メニュー= new Menu（）; menu.settext（ "325i"）; menu.setcls（ "file"）; menu.setLeaf（true）; menu.setId（21）; bmwlist.add（メニュー）;メニュー= new Menu（）; 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 menustring）{this.menustring = menustring; }} 5。menu.jsp
<％@ taglib prefix = "s" uri = "/struts-tags"％> <s：プロパティvalue = "メニュート" ESAST = "false"/>
6。HTMLページとJS
redor.htmlとredorder.jsをextjsの例で使用しており、reorder.js：menus.actionでtreeeloaderのdataurlを変更しました。
<html> <head> <メタhttp-equiv = "content-type" content = "text/html; charset = iso-8859-1"> <title> redorder treepanel </title> <link rel = "styleSheet" type = "text/css" href = " libs-> <script type = "text/javascript" src = "extjs/adapter/ext/ext-base.js"> </script> <！ - endlibs-> <script type = "text/javascript" src = "extjs/ext-all.js"> </script = "text/javascript"> </javascript "> </javascript">例のスタイル - > <link rel = "rel =" styleSheet "typeLesheet" typesheet "text/css" href = "extjs/resources/css/exampumentss"/> </head> <body> <script = "text/javascript" src = "../ exampumpes.js" "> </script> <hh1 <h1 </h1 </h1 </h1 <penping> <hh1 <pepping> <hh1 <pentein>例は、ツリーを移動する基本的なドラッグアンドドロップノードを示しています。この実装では、制限はなく、ノードにマークされた葉（ファイル）に追加される以外には、どこにもドロップできます。 <br> </p> <p>ツリーの端に沿ってドラッグアンドドロップの実行中に自動スクロールをトリガーしてトリガーします。</p> <p>ドラッグアンドドロップの挿入ポイントを示すために、ソートは</b> </b>有効でした。 <a href = "Reorder.js"> Reorder.js </a>
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 treepanel（{el： 'tree-div'、autoscroll：true、animate：true、enabled：true、contationcroll：new groll：new tree：true、loader：true、loader：true、loader：true、loader：true、loader） dataurl： 'http：// localhost：8080/menus'}）;
7.リストデータに解析されたコードは次のとおりです。
extjsのJSONデータ
var bulbostore = new ext.data.store（{proxy：new ext.data.httpproxy（{url： 'admingroup'、//ここでは、アクションへの支援要求： 'post' // request method}）、reader：new ext.data.jsonreader（// total Records total property： ID： 'rofid'}、['roleid'、 'rolename'] // 2つのフィールドが表示されます）}）;
JSONデータコンテンツ
{"items"：[{"password"： "ahui"、 "adminid"：1、 "role"：{"rolename"： "system administrator"、 "rofid"：2、 "sequence"： "2"、 "admin"：null、 "logoutmark"： "no"}、 "adminname"： "ahui"、 "ahui"： "ahui"： " {"password"： "xiao"、 "adminid"：2、 "role"：{"rolename"： "system administrator"、 "roleid"：2、 "sequence"： "2"、 "admin"：null、 "no"}}、 "adminname"： "xiao"、 "yos"： "yes"： "s3}
以下は、struts2のアクションコードです。XMLとJSONの2つの形式を含むExthelperツールクラスをカプセル化します。
public string findall（）throws exception {httpservletrequest request = servletactionContext.getRequest（）; httpservletResponse応答= servletactionContext.getResponse（）;リストlist = groupservice.getGroup（）; //すべてのデータ文字列json = exthelper.getjsonfromList（list）; // json形式のデータresponse.setcontenttype（ "text/json; charset = utf-8"）; //フロントデスクに表示された文字エンコーディングを設定します。データが転送されない場合、response.getWriter（）。write（json）があります。 System.out.println（json）; nullを返します。 }JSONを解析するには多くの方法があるので、どのように便利になるかがあります。 JSON独自のパッケージも変換することができますが、プロジェクトでStruts2を使用する場合、Struts2が提供する方法を直接使用する方が便利です。