لقد حاولت مؤخرًا استخدام ExtJs لإظهار قائمة تشبه الأشجار. استغرق الأمر الكثير من الجهد. يجب تحميل عناصر القائمة من القائمة التي تشبه الأشجار ديناميكيًا ، في حين أن الإصدار الحالي من ExtJS يدعم فقط بيانات تنسيق JSON. بعد التحقق من بعض المعلومات ، قررت استخدام json-plugin من Struts2. أولاً ، صنعت واحدة وفقًا للمثال ، لكن النتيجة كانت غير ناجحة. ظهرت عقدة جذر واحدة تم إنشاؤها في JS على الواجهة ، ولا يمكن تحميل البيانات التي تم إنشاؤها من الخلفية. بعد البحث ، وجد أن هناك مشكلة في تنسيق البيانات. البيانات التي تم إنشاؤها باستخدام JSON-Plugin هي كما يلي:
{"CLS": "Folder" ، "id": 10 ، "Leaf": false ، "children": [{"cls": "file" ، "id": 11 ، "leaf: true ، ، "Text": "S600"} ، {"cls": "file" ، "id": 12 ، تنسيق البيانات المطلوب من قبل ExtJS هو كما يلي:
[{"CLS": "Folder" ، "ID": 10 ، "Leaf": false ، "children": [{"cls": ، "النص": "S600"} ، {"cls": "file" ، "id": 12 ، "leaf: true ،" children ":" null ، "text": "slk200}] ،" text ": الفرق صغير جدًا ، لذلك لا يوجد سوى قوسين مربعين على الاختلاف الخارجي. ومع ذلك ، بدون هاتين الأقواس المربعة ، في JSON ، فإن المعنى مختلف تمامًا. السابق يمثل كائنًا ، بينما يمثل الأخير صفيفًا. يجب أن تكون البيانات المطلوبة من قبل Tree Dataloader في ExtJs صفيفًا. ويتم إنشاء تنسيق البيانات هذا تلقائيًا بواسطة JSON-Plugin ولا يمكن تغييره. لذلك ، انتهى بي الأمر بالتخلي عن Json -plugin واستخدمت بدلاً من ذلك JSON -LIB لحل هذه المشكلة.
1. تنزيل json-lib ، http://json-lib.sourceforge.net/
2. قائمة ملفات جرة في دليل LIB:
العموم bynutils -1.7.0.jar
العموم-Collections -3.2.jar
العموم-ديجستر -6.JAR
العموم-لانج -2.3.jar
العموم-الانحدار -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
<؟ XSI: schemalocation = "http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"> <Filter-Name> Struts2 </filter-name> <ilter-class> org.apache.struts2
ثم هناك دعامة. xml
<؟ name = "struts.i18n.encoding" value = "utf-8"/> <package name = "person" extends = "struts-default"> <action name = "menus" method = "execute"> <stred> /menu.jsp </result> </action> </package>
3. نموذج عقدة الشجرة (getter ، تم حذف Setter)
قائمة الفئة العامة {private int id ؛ نص سلسلة خاصة ؛ ورقة منطقية خاصة سلسلة خاصة CLS ؛ القائمة الخاصة <Mene> الأطفال ؛} 4. العمل
package com.lab ؛ import java.util.arrayList ؛ import java.util.list ؛ import net.sf.json.jsonarray ؛ public class menualaction {private string menustring ؛ قائمة خاصة <menu> قوائم ؛ السلسلة العامة execute () {menus = new ArrayList <Main> () ؛ قائمة benz = new menu () ؛ Benz.Settext ("Benz") ؛ benz.setcls ("المجلد") ؛ benz.setleaf (false) ؛ Benz.setid (10) ؛ Menus.Add (Benz) ؛ قائمة <MANT> BENZLIST = NEW ARRAYLIST <MANT> () ؛ Benz.Setchildren (Benzlist) ؛ قائمة القائمة ؛ القائمة = قائمة جديدة () ؛ menu.settext ("S600") ؛ menu.setCls ("file") ؛ menu.setleaf (صواب) ؛ menu.setId (11) ؛ benzlist.add (قائمة) ؛ القائمة = قائمة جديدة () ؛ menu.settext ("SLK200") ؛ menu.setCls ("file") ؛ menu.setleaf (صواب) ؛ menu.setid (12) ؛ benzlist.add (قائمة) ؛ قائمة BMW = New Menu () ؛ BMW.Settext ("BMW") ؛ bmw.setcls ("المجلد") ؛ bmw.setleaf (false) ؛ bmw.setid (20) ؛ Menu.add (BMW) ؛ قائمة <MANT> BMWLIST = جديد ArrayList <MANT> () ؛ BMW.Setchildren (BMWLIST) ؛ القائمة = قائمة جديدة () ؛ menu.settext ("325i") ؛ menu.setCls ("file") ؛ menu.setleaf (صواب) ؛ menu.setId (21) ؛ bmwlist.add (قائمة) ؛ القائمة = قائمة جديدة () ؛ menu.settext ("x5") ؛ menu.setCls ("file") ؛ menu.setleaf (صواب) ؛ menu.setId (22) ؛ bmwlist.add (قائمة) ؛ jsonarray jsonobject = jsonarray.fromObject (قوائم) ؛ حاول {menustring = jsonobject.toString () ؛ } catch (استثناء e) {menustring = "ss" ؛ } إرجاع "النجاح" ؛ } السلسلة العامة getMenustring () {return menustring ؛ } public void setMenustring (String menustring) {this.menustring = menustring ؛ }} 5. menu.jsp
<٪@ taglib prefix = "s" uri = "/struts-tags" ٪> <s: property value = "menustring" excart = "false"/>
6. صفحة HTML و 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"> <title> إعادة ترتيب treepanel </title> <link rel = "stylesheet" type = "text/css" href = "extjs/csss libs-> <script type = "text/javaScript" src = "extjs/adapter/ext/ext-base.js"> </script> <!-endlibs-> <script type = "text/javaScript" src = "extjs/ext-all.js src = "reorder.js"> </script> <!-الأنماط الشائعة للأمثلة-> <link rel = "stylesheet" type = "text/css" href = "extjs/resources/css/example. -> <H1> اسحب وإسقاط الطلب في TreePanel </h1> <p> يعرض هذا المثال عقدة السحب والإفلات الأساسية تتحرك في شجرة. في هذا التنفيذ ، لا توجد قيود ويمكن إسقاط أي شيء في أي مكان باستثناء الإلحاق بالعقد العليا لورقة (الملفات). <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 solid #c3daf9 ؛"> </div> </html>
JS:
/ * * ext JS Library 2.0.1 * حقوق الطبع والنشر (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 ، enitory: true ، true ، containscroll: true ، Dataurl: "http: // localhost: 8080
7. الكود المحسّن في بيانات القائمة هو كما يلي:
بيانات json في extjs
var compostore = new ext.data.store ({proxy: new ext.data.httproxy ({url: 'admingroup' ، // هنا هو طلب struts إلى طريقة الإجراء: 'post' // request method}) ، reader: new ext.jsonreader ({// totalProper ID: 'ROLOD'} ، ['ROLEID' ، 'ROLENAME'] // معروضة حقلان)}) ؛
محتوى بيانات JSON
{"العناصر": [{"كلمة المرور": "Ahui" ، "AdminIr": 1 ، "الدور": {"Rolename": "مسؤول النظام" ، "roliD": 2 ، "sequence": "2" ، "admin": "null" ، "logoutmark": "no" ، "Adminname:" Ahui "، {"Password": "Xiao" ، "AdminiR": 2 ، "الدور": {"rolename": "مسؤول النظام" ، "roliD": 2 ، "sequence": "2" ، "admin": "null" ، "logoutmark": "no" ، "adminname":
فيما يلي رمز الإجراء في Struts2 يلفت فئة أدوات exthelper ، والتي تحتوي على تنسيقين: XML و JSON.
string public findall () يلقي استثناء {httpservletrequest request = servleTactionContext.getRequest () ؛ httpservletresponse استجابة = servleTactionContext.getResponse () ؛ قائمة القائمة = getService.getGroup () ؛ // استدعاء الطريقة في الخدمة للاستعلام عن جميع سلسلة البيانات json = exthelper.getjsonfromlist (list) ؛ // تحويل القائمة إلى json تنسيق data response.setContentType ("text/json ؛ charset = utf-8") إذا لم يتم نقل البيانات ، فسيكون هناك استجابة مشوهة. System.out.println (JSON) ؛ العودة لاغية. }هناك العديد من الطرق لتحليل JSON ، لذلك كيف تكون مريحة هو. يمكن أيضًا تحويل حزمة JSON الخاصة ، ولكن إذا كنت تستخدم Struts2 في المشروع ، فسيكون استخدام الطريقة التي توفرها STRUTS2 مباشرة.