เมื่อเร็ว ๆ นี้ฉันลองใช้ ExtJS เพื่อแสดงเมนูเหมือนต้นไม้ ต้องใช้ความพยายามอย่างมาก รายการเมนูของเมนูเหมือนต้นไม้จำเป็นต้องโหลดแบบไดนามิกในขณะที่ ExtJS เวอร์ชันปัจจุบันรองรับข้อมูลรูปแบบ JSON เท่านั้น หลังจากตรวจสอบข้อมูลบางอย่างฉันตัดสินใจใช้ JSON-Plugin ของ Struts2 ก่อนอื่นฉันทำตามตัวอย่าง แต่ผลลัพธ์ก็คือมันไม่ประสบความสำเร็จ โหนดรูทเดียวที่สร้างขึ้นใน JS ปรากฏบนอินเทอร์เฟซและข้อมูลที่สร้างจากพื้นหลังไม่สามารถโหลดได้ หลังจากการวิจัยพบว่ามีปัญหากับรูปแบบข้อมูล ข้อมูลที่สร้างขึ้นโดยใช้ JSON-Plugin มีดังนี้:
{"cls": "โฟลเดอร์", "id": 10, "leaf": false, "children": [{"cls": "file", "id": 11, "leaf": true, "เด็ก" , "text": "s600"}, {"cls": "ไฟล์", "id": 12, "leaf": true, "เด็ก ๆ ": null, "text": "slk200"}], "text": "benz"} รูปแบบข้อมูลที่ต้องการโดย extjs มีดังนี้:
[{"cls": "โฟลเดอร์", "id": 10, "leaf": false, "children": [{"cls": "ไฟล์", "id": 11, "leaf": true, "เด็ก": null , "text": "s600"}, {"cls": "ไฟล์", "id": 12, "leaf": true, "เด็ก ๆ ": null, "text": "slk200"}], "text": "benz"}] ความแตกต่างมีขนาดเล็กมากดังนั้นจึงมีวงเล็บสี่เหลี่ยมจัตุรัสเพียงสองตัวที่ด้านนอกสุด อย่างไรก็ตามหากไม่มีวงเล็บสองตารางนี้ใน JSON ความหมายนั้นแตกต่างกันมาก อดีตหมายถึงวัตถุในขณะที่หลังแสดงถึงอาร์เรย์ ข้อมูลที่ต้องการโดย Tree Dataloader ใน extjs จะต้องเป็นอาร์เรย์ และรูปแบบข้อมูลดังกล่าวจะถูกสร้างขึ้นโดยอัตโนมัติโดย 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
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 เวอร์ชัน = "1.0" การเข้ารหัส = "utf-8"?> <web-app version = "2.4" xmlns = "http://java.sun.com/xml/ns/j2ee" xmlns: xsi = "http://ww.w3.org/2001/2001/2001/200 XSI: schemalocation = "http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" <Tilter-Name> struts2 </tilter-name> <filter-class> org.apache.struts2.dispatcher.filterDispatcher </filter-class> </lilter> <ฟิลเตอร์-แมป> <filter-name> struts2 </filter-name>
จากนั้นก็มี struts.xml
<? xml version = "1.0" การเข้ารหัส = "utf-8"?> <! doctype struts สาธารณะ "-// apache ซอฟต์แวร์ Foundation // dtd struts การกำหนดค่า 2.0 // en" "http://struts.apache.org/dtds/struts-2.0.dtd" name = "struts.i18n.encoding" value = "utf-8"/> <package name = "person" ขยาย = "struts-default"> <action name = "Menus" Method = "Execute"
3. โมเดลโหนดต้นไม้ (Getter, Setter ถูกละเว้น)
เมนูชั้นเรียนสาธารณะ {ID INT ส่วนตัว; ข้อความสตริงส่วนตัว ใบบูลีนส่วนตัว; สตริงส่วนตัว CLS; รายการส่วนตัว <เมนู> เด็ก;} 4. การกระทำ
แพ็คเกจ com.lab; นำเข้า java.util.arraylist; นำเข้า java.util.list; Import Net.sf.json.jsonarray; MenuAction คลาสสาธารณะ {Menustring String ส่วนตัว; รายการส่วนตัว <เมนู> เมนู; สตริงสาธารณะ Execute () {menus = new ArrayList <Menu> (); เมนู benz = เมนูใหม่ (); Benz.settext ("Benz"); benz.setCls ("โฟลเดอร์"); benz.setleaf (เท็จ); benz.setid (10); เมนู ADD (เบนซ์); รายการ <เมนู> benzlist = arraylist ใหม่ <men> (); Benz.setchildren (Benzlist); เมนูเมนู; เมนู = เมนูใหม่ (); menu.settext ("S600"); menu.setCls ("ไฟล์"); menu.setleaf (จริง); menu.setid (11); benzlist.add (เมนู); เมนู = เมนูใหม่ (); menu.settext ("SLK200"); menu.setCls ("ไฟล์"); menu.setleaf (จริง); menu.setid (12); benzlist.add (เมนู); เมนู BMW = เมนูใหม่ (); bmw.settext ("BMW"); bmw.setcls ("โฟลเดอร์"); bmw.setleaf (เท็จ); bmw.setid (20); เมนู ADD (BMW); รายการ <เมนู> bmwlist = new ArrayList <เมนู> (); bmw.setchildren (bmwlist); เมนู = เมนูใหม่ (); menu.settext ("325i"); menu.setCls ("ไฟล์"); menu.setleaf (จริง); menu.setid (21); bmwlist.add (เมนู); เมนู = เมนูใหม่ (); menu.settext ("x5"); menu.setCls ("ไฟล์"); menu.setleaf (จริง); menu.setid (22); bmwlist.add (เมนู); jsonArray jsonObject = jsonArray.FromObject (เมนู); ลอง {menustring = jsonobject.toString (); } catch (exception e) {menustring = "ss"; } return "ความสำเร็จ"; } สตริงสาธารณะ getMenustring () {กลับ menustring; } โมฆะสาธารณะ setMenustring (String menustring) {this.menustring = menustring; - 5. เมนู. jsp
< %@ taglib prefix = "s" uri = "/struts-tags" %> <s: ค่าคุณสมบัติ = "menustring" escape = "false"/>>>>
6. หน้า HTML และ JS
ฉันใช้ reorder.html และ reorder.js ในตัวอย่าง extjs และเปลี่ยน dataurl ของ treeloader ใน reorder.js: menus.action
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = iso-8859-1"> <title> reorder reordanel </title> <link rel = "stylesheet" type = "css" href = "extjs/css/css libs-> <script type = "text/javascript" src = "extjs/adapter/ext/ext/ext-base.js"> </script> <!-endlibs-> <script type = "text/javascript" src = "extjs/ext-all.js"> </script> สไตล์สำหรับตัวอย่าง-> <link rel = "stylesheet" type = "text/css" href = "extjs/resources/css/example.css"/> </head> <body> <script type = "javascript" src = " ตัวอย่างแสดงการลากและวางโหนดพื้นฐานที่เคลื่อนที่ในต้นไม้ ในการใช้งานนี้ไม่มีข้อ จำกัด และสิ่งใดที่สามารถลดลงได้ทุกที่ยกเว้นการต่อท้ายกับโหนดที่ทำเครื่องหมาย Leaf (ไฟล์) <br> </p> <p> ลากไปตามขอบของต้นไม้เพื่อกระตุ้นการเลื่อนอัตโนมัติในขณะที่ทำการลากและวาง </p> <p> เพื่อแสดงให้เห็นถึงการลากและวางจุดแทรกการเรียงลำดับ <b> ไม่ได้เปิดใช้งาน </b> ดู <a href = "reorder.js"> reorder.js </a>. </p> <div id = "tree-div" style = "overflow: auto; ความสูง: 300px; ความกว้าง: 250px; ชายแดน: 1px แข็ง #c3daf9;">
JS:
/ * * Ext JS Library 2.0.1 * ลิขสิทธิ์ (C) 2006-2008, Ext JS, LLC * [email protected] * * http://extjs.com/license */ext.onready (ฟังก์ชั่น () {// ชวเลข var tree = ext.tree; tree var = ต้นไม้ใหม่ treepanel ({el: 'tree-div', autoScroll: จริง Dataurl: 'http: // localhost: 8080/lab/menus.action'})});
7. รหัสแยกวิเคราะห์ข้อมูลเป็นดังนี้:
ข้อมูล JSON ใน extjs
var combostore = new ext.data.store ({proxy: ใหม่ ext.data.httpproxy ({url: 'admingRoup', // นี่คือการร้องขอ struts to Action Method: 'post' // วิธีการร้องขอ}), Reader: new ext.data.jsonreader ID คอลเลกชัน: 'roleid'}, ['roleid', 'rolename'] // สองฟิลด์แสดง)});
เนื้อหาข้อมูล JSON
{"รายการ": [{"รหัสผ่าน": "ahui", "adminid": 1, "บทบาท": {"rolename": "ผู้ดูแลระบบระบบ", "roard": 2, "sequence": "2", "admin": null, "logoutmark": "ไม่"} {"รหัสผ่าน": "Xiao", "adminId": 2, "บทบาท": {"rolename": "ผู้ดูแลระบบ", "Roleid": 2, "sequence": "2", "admin": null, "logoutmark": "no"}
ด้านล่างคือรหัสการกระทำใน struts2 ห่อหุ้มคลาสเครื่องมือ exthelper ซึ่งมีสองรูปแบบ: XML และ JSON
สตริงสาธารณะ findall () พ่นข้อยกเว้น {httpservletRequest Request = servletactionContext.getRequest (); httpservletResponse response = servletactionContext.getResponse (); list list = groupservice.getGroup (); // การเรียกวิธีการในการบริการเพื่อสอบถามสตริงข้อมูลทั้งหมด json = exthelper.getjsonFromList (รายการ); // แปลงรายการเป็นรูปแบบการตอบสนองข้อมูล JSON.setContentType ("ข้อความ/json; charset = utf-8"); // ตั้งค่าการเข้ารหัสอักขระที่แสดงในแผนกต้อนรับส่วนหน้า หากข้อมูลไม่ได้ถูกถ่ายโอนจะมีการตอบสนองที่อ่านไม่ออก getWriter (). เขียน (JSON); System.out.println (JSON); คืนค่า null; -มีหลายวิธีในการแยกวิเคราะห์ JSON ดังนั้นวิธีที่จะสะดวก แพ็คเกจของ JSON ยังสามารถแปลงได้ แต่ถ้าคุณใช้ Struts2 ในโครงการมันจะสะดวกกว่าที่จะใช้วิธีการที่จัดทำโดย Struts2 โดยตรง