Baru-baru ini saya mencoba menggunakan EXTJS untuk menampilkan menu seperti pohon. Butuh banyak upaya. Item menu dari menu seperti pohon perlu dimuat secara dinamis, sedangkan versi EXTJS saat ini hanya mendukung data format JSON. Setelah memeriksa beberapa informasi, saya memutuskan untuk menggunakan JSON-plugin Struts2. Pertama, saya membuat satu sesuai dengan contoh, tetapi hasilnya adalah tidak berhasil. Hanya satu simpul root yang dihasilkan dalam JS yang muncul di antarmuka, dan data yang dihasilkan dari latar belakang tidak dapat dimuat. Setelah penelitian, ditemukan bahwa ada masalah dengan format data. Data yang dihasilkan menggunakan JSON-plugin adalah sebagai berikut:
{"cls": "folder", "id": 10, "leaf": false, "children": [{"cls": "file", "id": 11, "Leaf": true, "anak -anak": null , "teks": "s600"}, {"cls": "file", "id": 12, "leaf": true, "anak -anak": null, "teks": "slk200"}], "teks": "benz"} Format data yang diperlukan oleh EXTJS adalah sebagai berikut:
[{"cls": "folder", "id": 10, "leaf": false, "children": [{"cls": "file", "id": 11, "leaf": true, "anak -anak": null , "teks": "s600"}, {"cls": "file", "id": 12, "leaf": true, "anak -anak": null, "teks": "slk200"}], "teks": "benz"}]] Perbedaannya sangat kecil, jadi hanya ada dua kurung persegi pada perbedaan paling luar. Namun, tanpa dua kurung persegi ini, di JSON, artinya sangat berbeda. Yang pertama mewakili suatu objek, sedangkan yang terakhir mewakili array. Data yang dibutuhkan oleh pohon dataloader di extjs harus berupa array. Dan format data seperti itu secara otomatis dihasilkan oleh JSON-plugin dan tidak dapat diubah. Jadi, saya akhirnya melepaskan JSON -Plugin dan malah menggunakan JSON -LIB untuk menyelesaikan masalah ini.
1. Unduh json-lib, http://json-lib.sourceforge.net/
2. Daftar file JAR di direktori 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.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
Pertama kali konfigurasikan web.xml
<? Xml Version = "1.0" encoding = "UTF-8"?> <Web-app Versi = "2.4" xmlns = "http://java.sun.com/xml/ns/j2ee" xmlns: xsi = "http:/www.w33.org/2001 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.jsp</welcome-file> </welcome-file-list> <filter> <filter-name> struts2 </tiler-name> <nilter-class> org.apache.struts2.dispatcher.filterdispatcher </tiler-class> </tiler> <nilter-Mapping> <nilter-name> </filter-name> <rerl-pattern>/*</url-Pattern> </filter-mapping>
Lalu ada 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"> <teguts> <putruts = "constant =" construts. "constant =" construts. "constant =" struts. "construts." construts. "struts." name = "struts.i18n.encoding" value = "utf-8"/> <package name = "person" extends = "struts-default"> <action name = "menu" method = "execute"> <rult> /menu.jsp </result> </cich> </package> </struts>
3. Model Node Pohon (Getter, Setter dihilangkan)
menu kelas publik {private int id; teks string pribadi; daun boolean pribadi; cls string pribadi; Daftar Pribadi <u menu> anak -anak;} 4. Aksi
Paket com.lab; import java.util.arraylist; import java.util.list; import net.sf.json.jsonarray; menuaksi kelas publik {private string mensowning; Daftar Pribadi <u menu> Menu; Public String execute () {menu = ArrayList baru <u menu> (); Menu benz = menu baru (); benz.setText ("benz"); benz.setcls ("folder"); benz.setleaf (false); benz.setid (10); menu.add (benz); Daftar <u menu> benzlist = new ArrayList <u menu> (); Benz.setchildren (Benzlist); Menu menu; menu = menu baru (); menu.setText ("S600"); menu.setCls ("file"); menu.setleaf (true); menu.setid (11); benzlist.add (menu); menu = menu baru (); menu.setText ("SLK200"); menu.setCls ("file"); menu.setleaf (true); menu.setid (12); benzlist.add (menu); Menu bmw = menu baru (); bmw.settext ("bmw"); bmw.setcls ("folder"); bmw.setleaf (false); bmw.setid (20); menu.add (BMW); Daftar <u menu> bmwlist = ArrayList baru <u menu> (); bmw.setchildren (bmwlist); menu = menu baru (); menu.setText ("325i"); menu.setCls ("file"); menu.setleaf (true); menu.setid (21); bmwlist.add (menu); menu = menu baru (); menu.setText ("x5"); menu.setCls ("file"); menu.setleaf (true); menu.setid (22); bmwlist.add (menu); Jsonarray jsonobject = jsonarray.fromObject (menu); coba {men, jsonobject.toString (); } catch (Exception e) {Men, "ss"; } mengembalikan "kesuksesan"; } public string getMenustring () {return Men,; } public void setMenustring (string menuSowning) {this.menustring = menuusting; }} 5. menu.jsp
< %@ taglib prefix = "s" uri = "/struts-tags" %> <s: nilai properti = "mensustring" Escape = "false"/>
6. HTML Page dan JS
Saya menggunakan reorder.html dan reorder.js dalam contoh extjs, dan mengubah dataurl treeloader di reorder.js: menu.action
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = iso-8859-1"> <itement> ulang treepanel </itement> <tautan rel = "stylesheet" type = "text/css" href = "extjs/sumber daya/css/css/css/css" href = "extjs/sumber daya/css/css/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 type="text/javascript" src="reorder.js"></script><!-- Common Styles for the examples --><link rel="stylesheet" type="text/css" href="extjs/resources/css/example.css" /></head><body><script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES --><h1>Drag and Drop ordering in a TreePanel</h1><p>This example shows basic drag dan jatuhkan simpul yang bergerak di pohon. Dalam implementasi ini tidak ada batasan dan apa pun dapat dijatuhkan di mana saja kecuali menambahkan node yang ditandai daun (file). <br> </p> <p> Seret di sepanjang tepi pohon untuk memicu pengguliran otomatis sambil melakukan drag and drop. </p> <p> Untuk menunjukkan titik seret dan drop, penyortiran, tidak diaktifkan. See <a href="reorder.js">reorder.js</a>.</p><div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div></body></html>
JS:
/ * * Ext JS Library 2.0.1 * Hak Cipta (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, enableDD:true, containerScroll: true, loader: new Tree.TreeLoader({ DataUrl 'http: // localhost: 8080/lab/menu.action'})});
7. Kode diuraikan ke dalam data daftar adalah sebagai berikut:
data json di extjs
var combostore = ext.data.store baru ({proxy: new ext.data.httpproxy ({url: 'Admingroup', // Berikut adalah Metode Permintaan Struts to Action: 'Post' // Metode Total}), pembaca: ext.data.jsonReader 'yang baru ({{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{o. / ID: 'RoleId'}, ['RoleId', 'Rolename'] // Dua bidang yang ditampilkan)});
Konten Data JSON
{"item": [{"kata sandi": "ahui", "adminid": 1, "role": {"rolename": "administrator sistem", "roleId": 2, "sequence": "2", "admin": null, "logoutmark": "tidak"}, "adminName": "Ahui", "Logout": "no"}, ""}, "},"}, "no"}, "no logoutmark", " {"Kata Sandi": "Xiao", "AdminId": 2, "Role": {"Rolename": "Administrator Sistem", "RoleID": 2, "Sequence": "2", "Admin": null, "Logoutmark": "Tidak"}, "AdminName": "Xiao", "Logout": "}}}}}}}:"
Di bawah ini adalah kode tindakan di Struts2 merangkum kelas alat Exthelper, yang berisi dua format: XML dan JSON.
string publik findAll () melempar Exception {httpservletRequest request = servletActionContext.getRequest (); HttpservletResponse response = servletActionContext.getResponse (); Daftar daftar = groupservice.getGroup (); // Memanggil metode dalam layanan untuk menanyakan semua string data json = exthelper.getjsonFromlist (daftar); // konversi daftar ke format JSON format data response.setContentType ("Text/JSON; Charset = UTF-8"); // Atur karakter penyandian yang ditampilkan di meja depan. Jika data tidak ditransfer, akan ada respons yang kacau.getWriter (). Write (JSON); System.out.println (JSON); kembali nol; }Ada banyak cara untuk mengurai JSON, jadi bagaimana menjadi nyaman. Paket JSON sendiri juga dapat dikonversi, tetapi jika Anda menggunakan Struts2 dalam proyek, lebih nyaman untuk menggunakan metode yang disediakan oleh Struts2 secara langsung.