القراءات ذات الصلة:
ملاحظات دراسة JQGrid في Java - الفصل المتقدم (I)
تبدأ هذه المقالة رسميًا في التفاعل مع الخلفية (لغة Java) ، والمنصة المستخدمة
JDK: Java 1.8.0_71
myeclisp 2015 مستقر 2.0
Apache Tomcat-8.0.30
MySQL 5.7
Navicat for MySQL 11.2.5 (أداة إدارة قاعدة بيانات MySQL)
1. جزء قاعدة البيانات
1. إنشاء قاعدة بيانات
قم بإنشاء قاعدة بيانات باستخدام Navicat لـ MySQL (لم يتم تقديمها باستخدام أدوات أخرى أو استخدام سطر الأوامر مباشرة)
2.
2. إنشاء جدول
انقر نقرًا مزدوجًا لفتح الخطوة السابقة لإنشاء قاعدة بيانات - انقر بزر الماوس الأيمن - تحديد جدول جديد
عند إنشاء الحقول التالية ، ستطالب بإدخال اسم الجدول.
2. جزء الإجراء
1. إنشاء مشروع جديد
إنشاء جديد باستخدام Myeclipse - مشروع الويب
أدخل اسم المشروع لتحديد Java و Tomcat الذي يدير المشروع. انقر فوق التالي حتى الصفحة التالية ، انقر فوق خانة الاختيار أدناه لإنشاء ملف web.xml تلقائيًا.
قم بإنشاء بنية الحزمة التالية وإنشاء فئة VO جديدة (تتوافق الخصائص مع حقول قاعدة البيانات واحدة تلو الأخرى)
DEMO.JAVA
package com.xeonmic.vo ؛ demo public class {private int id ؛ اسم السلسلة الخاصة ؛ نوع int الخاص ؛ Private Double Pay ؛ نص سلسلة خاصة ؛ Demo public () {// todo todo constructor stub adcl} public demo (this ؛ this. int getId () {return id ؛} public void setId (int id) {this.id = id ؛} السلسلة العامة getName () {return name ؛} public void setName (اسم السلسلة) {this.name = name ؛ pay ؛} public void setPay (double pay) {this.pay = pay ؛} السلسلة العامة getText () {return text ؛} public void setText (text string) {this.text = text ؛ "]" ؛}}2. استيراد حزمة جرة اتصال قاعدة البيانات وملف JSON
يمكن العثور على حزمة جرة اتصال قاعدة البيانات في الدليل التالي لدليل تثبيت MySQL
بالإضافة إلى ذلك ، تم تحميل حزمة JAR المطلوبة لـ JSON إلى Baidu Cloud (http://pan.baidu.com/s/1detgjrv) وتم نسخها ولصقها في دليل WebRoot/Web-inf/lib.
ثم حدد كل انقر بزر الماوس الأيمن لإضافة إلى مسار الإنشاء
3. تنفيذ الطبقات الأساسية لنموذج تصميم DAO
ارجع إلى "Java Web Development Classic Basics" هنا ، ولن نصف الرمز المصدر ، ثم نكتب مقالة منفصلة للحديث على وجه التحديد عن هذا الجزء من المعرفة الأساسية.
―3.1. databaseConnection.java
حزمة com.xeonmic.dbc ؛ استيراد java.sql.connection ؛ استيراد java.sql.drivermanager ؛ استيراد java.sql.sqlexception ؛ databaseConnection الفئة العامة dburl = "jdbc: mysql: // localhost: 3306/jqgriddemo" ؛ private static final string dbuser = "root" dbuser ، dbpassword) ؛} catch (classnotfoundException e) {// todo تم إنشاء كتلة catch e.printstacktrace () ؛ this.conn ؛} void public close () {if (this.conn! = null) {try {this.conn.close () ؛} catch (sqlexception e) {// toDo تم إنشاء كتلة catch e.printstacktrace () ؛}}} تلقائيًا―3.2. Demodao.java
package com.xeonmic.dao ؛ استيراد java.util.list ؛ استيراد com.xeonmic.vo.demo ؛ الواجهة العامة demodao {// إضافة طريقة منطقية عامة docreate (demo demo) ؛ العرض التوضيحي) ؛}―3.3. Demodaoimpl.java
package com.xeonmic.dao.impl ؛ استيراد java.sql.connection ؛ استيراد java.sql.prepedstatement ؛ استيراد java.sql.resultset ؛ import java.sql.sqlexception ؛ import java.util.arraylist ؛ com.xeonmic.vo.demo ؛ public class demodaoimpl تنفذ demodao {private connection conn = null ؛ private reparedStatement pstmt = null ؛ public demodaoimpl (connection conn) {this.conn = conn ؛ t_demo (النوع ، الدفع ، الاسم ، النص) القيم (؟ ،؟ ،؟ ،؟ ،؟) demo.getName ()) ؛ this.pstmt.SetString (4 ، demo.getText ()) ؛ if (this.pstmt.executeupdate ()> 0) {flag = true ؛} this.pstmt.close () ؛ flag ؛}@outpridepublic list <memo> dosearch (مفاتيح السلسلة) {// todo method method method stubif (keys == null) {keys = "؛ this.pstmt = this.conn.preparestatement (sql) ؛ resultset rs = this.pstmt.executequery () ؛ demo demo = null ؛ بينما (rs.next ()) {demo = جديد DEMO (RS.GetInt ("id") ، rs.getint ("type") ، rs.getDouble ("pay") ، rs.getString ("name") ، rs.getString ("text")) ؛ all.add (demo) ؛} this.pstmt.close () ؛ } catch (sqlexception e) {// todo تم إنشاء كتلة catch تلقائيًا this.conn.preparestatement (sql) ؛ this.pstmt.setInt (1 ، id) ؛ if (this.pstmt.executeupdate ()> 0) {flag = true ؛} this.pstmt.close () ؛ boolean doChange (Demo Demo) {boolean flag = false ؛ string sql = "update t_demo set type = ، pay =؟ ، name = ، text =؟ where id =؟" demo.gettype ()) ؛ this.pstmt.setDouble (2 ، demo.getpay ()) ؛ this.pstmt.SetString (3 ، demo.getName ()) true ؛} this.pstmt.close () ؛} catch (sqlexception e) {// todo تم إنشاء كتلة catch e.printstacktrace () ؛} الإرجاع تلقائيًا ؛―3.5. المصنع
package com.xeonmic.factory ؛ import com.xeonmic.dao.demodao ؛ import com.xeonmic.dao.proxy.demodaoproxy ؛ public class factory {public demodao getdemodainstance () {return demodaoproxy () ؛}}}}―3.6. demotest.java (إجراء اختبار بسيط للطريقة السابقة)
package com.xeonmic.test ؛ استيراد java.util.linkedList ؛ استيراد java.util.list ؛ استيراد com.xeonmic.factory.factory ؛ استيراد com.xeonmic.vo.demo Demo () ؛ demo1.setName ("name") ؛ Demo1.setPay (0.98) ؛ Demo1.settype (1) ؛ demo1.settext ("text") ؛ doceate (demo1) ؛ dosearch (null) ؛ if (dosearch (null)! dosearch (""). get (0) ؛ demo1.settext ("تغيير النص") ؛ doChange (demo1) ؛ dosearch ("where id ="+demo1.getId ()) ؛ dodelete (demo1.getId ()) ؛ dosearch (null) ؛}} القائمة الثابتة العامة <demo LinkedList <memo> () ؛ alldemos = factory.getDemodaoinStance (). dosearch (مفاتيح) ؛ لـ (Demo Demo: alldemos) {system.out.println (demo.toString ()) ؛} إرجاع alldemos ؛} الفراغ الثابت العام docreate (demo demo) {if (add adderdemodainstance (). فشل ") ؛}} static static void dochange (Demo Demo) {if (factory.getDemodaOinStance (). dochange (demo)) {system.out.println (" تعديل كان ناجحًا ") ؛} آخر (factory.getDemodaOinStance (). dodelete (id)) {system.out.println ("حذف بنجاح") ؛} آخر {system.out.println ("delete faille text = text] حدد المعرف ، الاسم ، النوع ، الدفع ، النص من t_demo demo [id = 1 ، name = name ، type = 1 ، pay = 0.98 ، text = text] حدد معرف ، الاسم ، النوع ، دفع ، نص من t_demo demo [id = 1 ، name = 1 ، pay = 0.98 ، text = text] name ، type ، pay ، add ، add pay = 0.98 ، text = text] معرف تعديل seterect ، الاسم ، النوع ، الدفع ، النص من t_demo حيث المعرف = 1demo [معرف = 1 ، الاسم = 1 ، النوع ، الدفع = 0.98 ، نص = تغيير النص] حذف معرف ، الاسم ، النوع ، الدفع من t_demo *////4. صفحة JSP وقسم Servlet (مهم)
―4.1. index.jsp (استبدل محتوى علامات HTML في index.html في علامات html وتعديل محتوى HTML في index.jsp وقم بإجراء التعديلات التالية على JS)
<٪@ page language = "java" import = "java.util.*" pageencoding = "utf-8" ٪> <٪ string path = request.getContextPath () ؛ String basePath = request.getScheme ()+": //" request.getServerName ()+"+request.getserport () "-// w3c // dtd html 4.01 Transitional // en"> <html> <head> <title> demo </title> <link rel = "stylesheet" type = "text/css" href = "css/jquery-ui.min.cs"/> link rel = href = "css/jquery-ui.theme.min.css"/> <link rel = "stylesheet" type = "text/css" href = "css/ui.jqgrid-bootstrap-ui /> </head> <body> <div id = "main"> <!-حيث يوجد jqGrid-> <table id = "grid table"> </table> <!-jqgrid browse scirigation bar-> <div id = "grid-pager"> </viv> </div> <sript src = "js/jquery-1.11.1.0.0.0.0.min.js" charset = "utf-8"> </script> <script src = "js/i18n/grid.locale-cn.js" type = "text/javascript" charset = "utf-8"> </script> <script src = "js/jquery.jqgrid.min.js charset = "utf-8"> </script> <script type = "text/javaScript"> // عندما تكون نوع البيانات "محليًا" ، فأنت بحاجة إلى ملء var grid_selector = "#grid-table" ؛ var pager_selector = "#grid-pager" يستخدم للاسترجاع: "<٪ = basepath ٪>"+"demoservlet" ، // servlet urlleDiturl المستخدمة في إضافة وتعديل وحذف: JSONP ، XML ، إلخ) الارتفاع: 150 ، // الارتفاع ، ارتفاع الجدول. يمكن أن تكون قيمة أو نسبة مئوية أو "Auto'Mtype:" Get "، // Method Summision Colnames: ['Out-Out Order Number' ، 'Out-Out type' ، 'ottor extreal' ، 'Apprust (unit)' ، 'note'] ، colmodel: [{name: 'id' ، index: 'id' ، // index. المعلمة من تفاعلها مع الخلفية هي Sidxkey: True ، // عندما لا يكون هناك معرف في البيانات التي يتم إرجاعها من جانب الخادم ، استخدم هذا باعتباره RowId الوحيد واستخدم عمودًا واحدًا فقط للقيام بهذا الإعداد. إذا تم تعيين أكثر من واحد ، يتم تحديد أول واحد فقط ، ويتم تجاهل الآخرين عرض: 100 ، قابلة للتحرير: خطأ ، تحرير: {الحجم: "20" ، MaxLength: "30"}} ، القيم الاختيارية: النص ، textarea ، حدد ، مربع الاختيار ، كلمة المرور ، الزر ، الصورة ، الصورة والملف. {Size: "20" ، MaxLength: "30"}} ، {name: 'text' ، index: 'text' ، width: 250 ، false: false ، exember: true ، edittype: ROWNUM: 10 ، // عرض عدد السجلات لكل قائمة صفحات: [10 ، 20 ، 30] ، // مجموعة من العناصر المستخدمة لتغيير عدد الصفوف لعرض مربع القائمة المنسدلة. Pager: pager_selector ، // شريط التنقل في التصفح حيث توجد الصفحة والأزرار هي altrows: true ، // تعيين كجدول صف بالتناوب ، الافتراضي خاطئ // toppager: صحيح ، // // ما إذا كان شريط التصفح يتم عرضه على ما إذا كان شريط التصفح multiSelect: شريط التنقل في التصفح متعددة المرابح: صحيح ، // ما إذا كان شريط التنقل في التصفح متعددة المراكز بواسطة مفاتيح Ctrl Multiboxonly: True ، // ما إذا كانت خانة الاختيار متعددة الاختيار من قبل Subgrid: True ، // sortname: 'id' // Auto-Width}) ؛ // Browse Sevigation Bar لإضافة رمز جزء الوظيفة $ (Grid_selector) .NavGrid (pager_selector ، {search: true ، // استرداد إضافة: true ،. {} ، // edit Options {} ، // إضافة خيارات {} ، // حذف الخيارات {multiplesearch: true} // خيارات البحث - تحديد البحث المتعدد) ؛}) ؛ </script> </body> </html>―4.2. DemoServlet.java
package com.xeonmic.action ؛ استيراد java.io.ioException ؛ استيراد java.util.linkedList ؛ استيراد java.util.list ؛ import javax.servlet.servletexception ؛ import javax.servlet.http.httpservlet ؛ import javax.servlet.http.htttplet javax.servlet.http.httpservletresponse ؛ استيراد net.sf.json.jsonarray ؛ استيراد net.sf.json.jsonoBject ؛ استيراد com.xeonmic.factory.factory ؛ استيراد com.xeonmic.vo.demo ؛ SerialVersionuid = 1l ؛/*** see @httpservlet#doget (httpservletrequest request ، httpservletresponse)*/protected void doget (httpservletrequest request ، httpservledresponse) reshows servlexception ، ioexception {request.setcharactere. // إذا لم يتم تعيين الترميز هنا ، فسيكون هناك استجابة مشتركة. استجابة. int rows = integer.valueof (request.getParameter ("rows")) ؛ // عدد السجلات المعروضة في كل صفحة int int = integer.valueof (request.getParameter ("page")) ؛ . مفاتيح = "" ؛ // سلسلة حالة الاستعلام if (Search) {keys = "where" ؛ string filters = request.getParameter ("filters") ؛ // ظروف محددة system.out.println (مرشحات) ؛ // يشبه تنسيق البيانات الواردة هذا: "{" groupop ":" و "Rules": [{"field": "id" ، "op": "eq" ، "data": "1"} ، {"field": "type" ، "op": (و/أو) if (jsonobject.getString ("groupop")! = null &&! "." jsonobject.getjsonarray ("القواعد") ؛ // الهدوء لكل شرط لـ (int z = 0 ؛ z <rulesjson.size () ؛ Z ++) {Object t = dultjson.get (z) ؛ jsonobject reasejson = jsonobject.fromObject (t) ؛ حقل السلسلة = reasejson.getString ("الحقل") ؛ السلسلة op = rulejson.getString ("OP") ؛ String Data = rulejson.getString ("البيانات") ؛ String string = "" ؛ = "+data+" "" ؛ break ؛ case "ne": // unequal string = "<>" "+data+" '" "ge": // أكبر من أو تساوي string = "> =" "+data+" '"؛ break ؛ case" bw ": // بين ... {if (data.split (" ، ") "+data+" "" ؛ // التعامل مع أخطاء البيانات}}} "؛ // التعامل مع أخطاء البيانات}} "٪"+data+"٪" "؛ break ؛ case" in ": // in {string =" in ( أنا <datas.length ؛ i ++) {string+= "'"+datas [i]+"'" ؛ if (i! = datas.length-1) {string+= "،" ، "؛} else {string+=") "؛ i ++) {string+= "''"+datas [i]+"'" ؛ if (i! = datas.length-1) {string+= "،" ؛} else {string+= ") ؛}}}} (z == dultjson.size ()-1) {keys+= ""+field+""+string+"؛} آخر {keys+=" "+field+" "+string+" "+groupop+" " {system.out.println (sidx) ؛ keys += "order by" +sidx ؛ system.out.println ("sord =" +sord) ؛ if (! sord.equals ("asc")) {keys += "desc" ؛} ollist = factory.getDemodaoTance (). dosearch (keys) ؛ TOTAL = (alllist.size () ٪ rows == 0)؟ (alllist.size ()/rows): ((alllist.size ()/rows): (alllist.size ()/rows) +1) ؛ int j = 0 ؛ int m = (page-1)*int n = (page-1)*rows ؛ J <alllist.size () && j <n ؛ المجموع) ؛ jjson.accumulate ("السجلات" ، alllist.size ()) ؛ jjson.accumulate ("صفوف" ، jarray) استجابة httpservletresponse)*//void dopost المحمي (طلب httpservletrequest ، استجابة httpservletresponse) يلقي servletexception ، ioException {// todo method method method tuto stubthis.doget (request ، response) ؛}}―4.3. Demochangeservlet.java
package com.xeonmic.action ؛ import java.io.ioException ؛ import javax.servlet.servletexception ؛ import javax.servlet.http.httpservlet ؛ import javax.servlet.http.httpservletrequest com.xeonmic.factory.factory ؛ استيراد com.xeonmic.vo.demo ؛ الطبقة العامة demochangeservlet يمتد httpservlet {/****/private static final long serialversionuid = 1l ؛/*** طريقة dog من servlet. <br> ** يتم استدعاء هذه الطريقة عندما يكون للنموذج طريقة قيمة العلامة الخاصة به تساوي الحصول على.** اطلب طلب إرسال الطلب من قبل العميل إلى الخادم* @param استجابة إرسالها بواسطة الخادم إلى العميل* throws servleTexcept {boolean flag = false ؛ string opera = request.getParameter ("oper") ؛ switch (oper) {case "del": {string [] ids = request.getParameter ( = integer.valueof (ids [i]) ؛ flag = factory.getDemodaoinStance (). dodelete (id) ؛}} request.getParameter ("name") ؛ string text = request.getParameter ("text") ؛ Demo Demo = New Demo (-1 ، type ، pay ، name ، text) ؛ flag = factory.getDemodaOinStance (). decreate (Demo) ؛ } break. العرض التوضيحي = العرض التوضيحي الجديد (المعرف ، النوع ، الدفع ، الاسم ، النص) ؛ العلم = Factory.getDemodaoInstance (). } break ؛ افتراضي: break ؛} system.out.println (flag) ؛}/*** طريقة dopost للخدمة. <br> ** يتم استدعاء هذه الطريقة عندما يكون للنموذج طريقة قيمة العلامات الخاصة به تساوي النشر. ioException {this.doget (طلب ، استجابة) ؛}}―4.4.web.xml
<؟ XSI: schemalocation = "http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns id = "webapp_id" version = "3.1"> <splay-name> jqgrid </display-name> <vishlet> <Sradlet-Name> demoservlet </servlet-name> <Servlet-class> com.xeonmic.action.demoservlet </servlet-class> </servlet> <sterled-name> demochangeserv دع </servlet-name> <Servlet-class> com.xeonmic.action.demochangeservlet </revlet-class> </rectlet> <stervlet mapping> <stervlet-name> demoServlet </radlet-name> <Url-pattern>/demoservlet </url-pattern> </servlet mappapp G> <Servlet-mapping> <Sradlet-Name> demochangeservlet </servlet-name> <url-pattern>/demochangeservlet </url-pattern> </servlet mapping> <lisp-file-list> <lispile-file> index.html </elverfile-file> <حب htm </ishifile-file> <lispile-file> index.jsp </iship-file> <lisp-file> default.html </ishified-file> <lispile-file> default.htm </iship-file> <selop-file> default.jsp </elverfile-file> </iship-file-list> </web-app>
في هذه المرحلة ، تم تنفيذ وظيفة الجدول الفردي JQGrid بالكامل. واسمحوا لي أن أعرف ما إذا كانت هناك أي مشاكل في التصميم في المثال. ستبدأ المقالة التالية في حل تنفيذ تصميم جدول الماجستير والعبد. يرجى الانتباه إلى موقع البرنامج النصي المباشر!