لقد تعلمت مؤخرًا Easyi ووجدت أنها مفيدة للغاية والواجهة جميلة. اكتب تجربتك التعليمية هنا. تكتب هذه المدونة SSH و EASYI لتنفيذ عرض ترقيم ترميم DATAGRID. سيتم كتابة وظائف أخرى مثل إضافة ، تعديل ، حذف ، حذف الدُفعات ، وما إلى ذلك.
أولاً ، دعونا نلقي نظرة على التأثير لتحقيقه: عندما يتم عرض 5 أسطر من البيانات لكل صفحة:
عندما يتم عرض 10 أسطر من البيانات لكل صفحة ، يكون التأثير كما يلي:
خطوات محددة:
1. قم بتنزيل Easyi وبناء بيئة.
2. بناء مشروع SSH ، ويظهر هيكل دليل المشروع بأكمله في الشكل:
3. إنشاء طالب جدول في قاعدة بيانات Oracle. وأدخل الصفوف الستة التالية من البيانات. نظرًا لم يتم تنفيذ عملية الإضافة بعد ، أضف بيانات إلى جدول قاعدة البيانات أولاً. القيمة الافتراضية هي 5 بيانات لكل سطر ، لذا يرجى إدخال ما لا يقل عن 6 أسطر من البيانات لتسهيل اختبار الترحيل.
4. web.xml التكوين
<؟ XSI: schemalocation = "http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">! <ilter-class> org.apache.struts2.dispatcher.ng.filter.strutspreparexecutefilter </filter-class> </filter> <filter mapping> <filter-name> struts2 </fistral-name> <Cankerer-Class> org.springframework.web.context.contextLoaderListener </stanterer-class> </leaderer> <!-وضع الموقع الفعلي لـ ApplicationContext.xml-> <context-param> <Param-Name> contextConflocation </param-name> </context-param> </web-app>
5. تكوين ApplicationContext.xml
<؟ xmlns: context = "http://www.springframework.org/schema/context" XSI: Schemalocation = "http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5 http://www.springframework.org/schema/context/spring-context-2.5.xsd http://www.springframework.org/schema/aop/spring-aop-2.5 Resource = "ApplicationContext_bean.xml"/> <import Resource = "ApplicationContext_DB.xml"/> </bans>
6. قم بإنشاء طالب فئة النموذج
حزمة com.model ؛ طالب الفئة العامة {string studentId ؛ // اسم سلسلة المفاتيح الأساسي ؛ // اسم سلسلة الجنس ؛ // age string الجنس ؛ // age public string getStudentId () {return studentId ؛ } public void setStudentId (String studentId) {this.studentId = studentId ؛ } السلسلة العامة getName () {return name ؛ } public void setName (اسم السلسلة) {this.name = name ؛ } السلسلة العامة getGender () {return الجنس ؛ } public void setgender (سلسلة الجنس) {this.gender = الجنس ؛ } السلسلة العامة getage () {عودة العائد ؛ } public void setage (string age) {this.age = age ؛ }} 7. إنشاء ملف التعيين المقابل student.hbm.xml وفقًا لـ student.java
<؟ -> <hibernate mapping> <class name = "com.model.student" table = "student"> <id name = "studentId" type = "java.lang.string"> <column name = "studentId" /> <generator /> </id> <property name = "name" type = "java.lang.string" type = "java.lang.string"> <column name = "Gender"/> </property> <property name = "Age" type = "java.lang.string"> <column name = "Age"/> </sprement> </class> </hibernate mapping>
8. اكتب واجهة الطلاب
package com.service ؛ import java.util.list ؛ public interface studentervice {public list getStudentList (صفحة السلسلة ، صفوف السلسلة) يلقي استثناء ؛ // 9. اكتب واجهة تنفيذ فئة الطلاب
package com.ServiceImpl ؛ import java.util.list ؛ import org.hibernate.sessionfactory ؛ import com.service.studentservice ؛ public class studenterviceImpl parerements {private sessionfactoryfactory ؛ // جلب البيانات وفقًا للصفحة ، واحصل على بيانات لعدة صفوف لكل صفحة قائمة عامة getStudentList (صفحة السلسلة ، صفوف السلسلة) {// تعيين القيمة عندما تكون القيمة الافتراضية int currentpage = Integer.Parseint ((page == null || page == "0")؟ "1": page) ؛ "0")؟ قائمة العودة }. } sessionfactory getSessionFactory () {return SessionFactory ؛ } public void setSessionFactory (SessionFactory SessionFactory) {this.sessionFactory = SessionFactory ؛ }} 10. قم بتكوين ملف التكوين للاتصال بـ Database ApplicationContext_DB.XML
<؟ xmlns: context = "http://www.springframework.org/schema/context" XSI: Schemalocation = "http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5 http://www.springframework.org/schema/context/spring-context-2.5.xsd http://www.springframework.org/schema/aop/spring-aop-2.5.xsd المصدر مع Bean-> <bean id = "datasource" تدمير method = "close"> <!-تحديد برنامج تشغيل قاعدة البيانات-> <property name = "driverclass"> <value> oracle.jdbc.driver.oracledriver </value> </sorterperation> <! <value> jdbc: oracle: thin:@localhost: 1521: orcl </value> </sopperation> <!-حدد اسم المستخدم لقاعدة البيانات-> <property name = "user"> <value> lhq </value> </propert name = "minpoolsize"> <value> </value> </sorterperal> <property name = "maxpoolsize"> <value> 40 </value> </propert </swerperal> <property name = "initialPoolSize"> <value> 2 </value> </property> <property name = "idleconnecteTestPeriod"> <value> 1800 </value> </property> property name = "uccucireRetryThempts"> <salue> name = "testConnectionOnCheckout"> <value> خطأ </value> </property> </bean> <!-تحديد hibernate sessionfactory-> <bean id = "sessionfactory"> <!-يجب أن يتم تحديد SessionFactory في sessionfern!- -> <name property = "hibernateProperties"> <bors> <props key = "hibernate.dialect"> org.hibernate.dialect.oracle10gdialect </prop> </props> </property> <!-تحديد ملف التعيين لـ pojo-> </list> </property> </boan> <!-تكوين اعتراض المعاملات-> <bean id = "TransactionManager"> <property name = "sessionfactory" ref = "sessionfactory"/> </bean> <tx: mething id = "txAdvice" antament-manager = "chargetmanager" فقط الطرق التي تبدأ بحفظ ، حذف ، وتحديث يمكن تنفيذها-> <tx: method name = "delete*" spection = "required" /> <tx: method name = "update*" expression = "required" /> <tx: method name = "*" spection = "support" read-enly = "true". <aop: pointcut id = "interceptorpointcuts" expression = "execution (*com.ServiceImpl ..*.*.
11. اكتب الطالب. جافا نوع في طبقة التحكم
package com.action ؛ import java.util.list ؛ import javax.servlet.http.httpservletrequest ؛ import javax.servlet.http.httpservletresponse ؛ import net.sf.json.jsonoBject ؛ import org.log4j.logger ؛ import orgache.stractact2 com.service.studentservice ؛ public class studentAction {static logger log = logger.getLogger (studentAction.class) ؛ خاص jsonobject jsonobj ؛ صفوف السلسلة الخاصة ؛ // عدد السجلات المعروضة في كل صفحة صفحة سلسلة خاصة ؛ // ما هي الصفحة التي تُعرفها بالطلاب الخاصين الحاليين ؛ // سلسلة حقن التبعية // الاستعلام عن جميع معلومات الطالب السلسلة العامة getAllStudent () يلقي استثناء {log.info ("الاستعلام عن جميع معلومات الطالب") ؛ قائمة قائمة = student_services.getStudentList (الصفحة ، الصفوف) ؛ this.tobejson (قائمة ، student_services.getStudentTotal ()) ؛ العودة لاغية. }. httpservletrequest request = servleTactionContext.getRequest () ؛ JSonObject jobj = new jsonobject () ؛ // new a json jobj.accumulate ("total" ، total) ؛ // يمثل المجموع مقدار البيانات الموجودة في Total Jobj.Accumulate ("الصفوف" ، القائمة) ؛ // ROW هي البيانات التي تمثل الصفحة المعروضة. Response.getWriter (). الكتابة (JobJ.ToString ()) ؛ // تحويل إلى JSON Format log.info (JobJ.ToString ()) ؛ } public studentervice getStudent_services () {return student_services ؛ } public void setStudent_services (studentservice student_services) {this.student_services = student_services ؛ } public void setjsonobj (jsonobject jsonobj) {this.jsonobj = jsonobj ؛ } public void setRows (string rows) {this.rows = rows ؛ } public void setPage (string page) {this.page = page ؛ }} 12. اكتب ملف تكوين التبعية التبعية في الربيع
<؟ xmlns: context = "http://www.springframework.org/schema/context" XSI: Schemalocation = "http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5 http://www.springframework.org/schema/context/spring-context-2.5.xsd http://www.springframework.org/schema/aop/spring-aop-2.5.xsd -> <bean id = "student_service"> <property name = "sessionfactory"> <ref bean = "sessionfactory"> </frens> </property> </bean> <!-التحكم في طبقة التحكم-> <bean id = "student_action"> <property name = "student_service">
13. اكتب ملف تكوين struts.xml
<؟ معلومات الطالب-> <Action name = "getAllStudentAction" = "getAllStudent"> <result type = "json"> </sults> </action> </package> </struts>
14. اكتب JSP ---- index.jsp
أقل "http://www.w3. src = "<٪ = path ٪>/js/easyui/jquery -1.8.0.min.js" charset = "utf-8"> </script> <!-تقديم jQuery_easyui-> <script type = "text/javaScript" src = "<٪ = path ٪>/eashui/easyui. charset = "utf-8"> </script> <!-تقديم jQuery_easyui-> <script type = "text/javaScript" src = "<٪ = path ٪>/js/easyui/jquery.syui.min.js type = "text/javaScript" src = "<٪ = path ٪>/js/easyui/accale/easyui-lang-zh_cn.js" charset = "utf-8"> </script> <!-إدخال تنسيق CSS الافتراضي easyui-blue-> <link rel = "stylesh reled/" href = "<٪ = path ٪>/js/easyui/temes/default/easyui.css"/> <!-إدخال easyui صغير الأيقونة-> <link rel = "stylesheet" type = "text/css" href = "<٪ = path ٪>/easyui/extre/icon.css {$ ('#myDataGrid'). dataGrid ({title: 'dataGrid مثيل' ، iconcls: 'icon-ook' ، العرض: 600 ، pagesize: 5 ، // الصفحة الافتراضية المحددة هي 5 صفوف من البيانات لكل pagelist: [5 ، 10 ، 15 ، 20] عرض خلفية الصف. قابلة للطي: صحيح ، // إظهار شريط أدوات زر قابلة للطي: "#tb" ، // يجب استخدام هذا عند إضافة وحذف وتعديل عنوان URL للأزرار: // sortname: 'xh' ، // ما هو العمود المستخدم للفرز عند تهيئة جدول البيانات // sortorder: 'desc' ، // تحديد ترتيب الفرز ، والذي يمكن أن يكون "ASC" أو "desc" (ترتيب إيجابي أو عكسي). Remotesort: false ، frozencolumns: [[{field: 'ck' ، checkbox: true}]] ، pagination: true ، // pagination rownumbers: true // line number}) ؛ }) ؛ </script> </head> <body> <h2> <b> مثيل DataGrid لـ easyi </b> </h2> <table id = "myDataGrid"> <thead> <tr> <th data-options = "field: 'studentId' ، width: 100 ، align: 'center'" اختيارات البيانات = "الحقل:" الاسم "، العرض: 100 ، محاذاة:" المركز "> الاسم </th> <th-options =" الحقل: "الجنس" ، العرض: 100 ، المحاذاة: "المركز" </body> </html>15. ابدأ البرنامج وأدخل http: // localhost: 8080/easyui/index.jsp للاختبار.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.