Bacaan terkait:
Mengorganisir Catatan Studi JQGrid di Java - Lanjutan Bab (I)
Artikel ini secara resmi mulai berinteraksi dengan latar belakang (bahasa Java), dan platform yang digunakan adalah
JDK: Java 1.8.0_71
Myeclisp 2015 Stable 2.0
Apache Tomcat-8.0.30
MySQL 5.7
Navicat untuk MySQL 11.2.5 (Alat Manajemen Database MySQL)
1. Bagian Basis Data
1. Buat database
Buat database menggunakan Navicat untuk MySQL (tidak diperkenalkan menggunakan alat lain atau menggunakan baris perintah secara langsung)
2.
2. Buat tabel
Klik dua kali untuk membuka langkah sebelumnya untuk membuat database - Tabel Klik Kanan - Pilih Tabel Baru
Saat Anda membuat bidang berikut, Anda akan meminta untuk memasukkan nama tabel.
2. Bagian Prosedur
1. Buat proyek baru
Buat baru menggunakan myeclipse - proyek web
Masukkan nama proyek untuk memilih Java dan Tomcat yang menjalankan proyek. Klik Berikutnya hingga halaman berikut Klik kotak centang di bawah ini untuk secara otomatis menghasilkan file web.xml.
Buat struktur paket berikut dan buat kelas VO baru (properti sesuai dengan bidang database satu per satu)
demo.java
Paket com.xeonmic.vo; Demo kelas publik {private int id; nama string pribadi; tipe int private; private ganda pay; teks string pribadi; demo publik () {// toddo publicored constructor stub} public demo (int iD, name; type = type = this.pays; type = this.id-this. getId () {return id;} public void setid (int id) {this.id = id;} public string getName () {return name;} public void setName (string name) {this.name = name;} public int getType () {return type;} public void seteType (int typey) {this.type getType () {return type; setPay (ganda pay) {this.pay = pay;} public string getText () {return text;} public void setText (string text) {this.text = text;}@overridepublic string toString () {{{{{Id = " + ID +", name = " + name +", type = "," {{{ID = " + ID +", name = " + name +", Type = "," + ", name =" + name = " + name =" + name + name + name + name + name + name + name + name + name + name + name + name = "ID"2. Impor Paket JAR Koneksi Database dan File JSON
Paket JAR Koneksi Basis Data dapat ditemukan di direktori berikut dari direktori instalasi MySQL
Selain itu, paket JAR yang diperlukan untuk JSON telah diunggah ke Baidu Cloud (http://pan.baidu.com/s/1detgjrv) dan disalin dan ditempelkan ke direktori webroot/web-inf/lib.
Lalu pilih semua klik kanan untuk menambahkan ke jalur build
3. Implementasi dasar Model Desain DAO
Rujuk ke "Java Web Development Classic Basics" di sini, kami tidak akan menjelaskan kode sumber dan kemudian menulis artikel terpisah untuk secara khusus membicarakan bagian pengetahuan dasar ini.
―3.1. DatabaseConnection.java
package com.xeonmic.dbc;import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException;public class DatabaseConnection {private static final String DBDRIVER="org.gjt.mm.mysql.Driver";private static final String DBURL = "JDBC: mysql: // localhost: 3306/jqgriddemo"; private static final string dbUser = "root"; string final statis private dbpassword = "1234"; dbron -null; null; public databasonnection () {try {class.forncon (dbronnecon, null; publiconConnection () {try {class.forncon (dbronnicon; data -nol public. Dbuser, dbpassword);} catch (classnotfoundException e) {// todo secara otomatis menghasilkan blok tangkapan e.printstacktrace ();} catch (sqlexception e) {// Todo yang dihasilkan secara otomatis. this.conn;} public void close () {if (this.conn! = null) {coba {this.conn.close ();} catch (sqlexception e) {// todo yang dihasilkan secara otomatis blok tangkap e.printstacktrace ();}}}}―3.2. Demodao.java
package com.xeonmic.dao;import java.util.List;import com.xeonmic.vo.demo;public interface DemoDAO {//Add method public boolean doCreate(demo demo);//Query method public List<demo> doSearch(String keys);//Delete method public boolean doDelete(int id);//Modify method public boolean doChange(demo demo);}--3.3. Demodaoimpl.java
Paket com.xeonmic.dao.impl; impor java.sql.connection; impor java.sql.preparedstatement; impor java.sql.resultset; import java.sql.sqlexception; impor java.util.arraylist; impor java.sqllexception; coma. com.xeonmic.vo.demo;public class DemoDAOImpl implements DemoDAO {private Connection conn = null;private PreparedStatement pstmt = null;public DemoDAOImpl(Connection conn){this.conn=conn;}@Overridepublic boolean doCreate(demo demo) {boolean flag = false;String sql = "INSERT INTO nilai t_demo (type, pay, name, text) (?,?,?,?) "; coba {this.pstmt = this.conn.prepareStateMent (sql); this.pstmt.setint (1, demo.getType ()); this.pstmt.setDouble (2, demo.getpy ()); this.pstmt.setDoUble (2, Demo.getpay ()); this.pstmt.setDouble (2, Demo.getpay (); this. demo.getName ()); this.pstmt.setstring (4, demo.getText ()); if (this.pstmt.executeUpdate ()> 0) {flag = true;} this.pstmt.close ();} Catch (sqlexception e) {// too-gener {iRepo (); Bendera;}@Daftar Overridepublic <demo> dosearch (tombol string) {// TODO Metode yang dihasilkan otomatis Stubif (tombol == null) {keys = "";} string sql = "SELECT ID, nama, type, Text dari t_demo"+Keys; list <Demo> all = new array <raysrist <raysrist <) (DEMO (DEMO (DEMO (DEMO (DEMO (DEMO. this.pstmt = this.conn.prepareStatement (sql); hasil rs = this.pstmt.executeQuery (); demo demo = null; while (rs.next ()) {demo = baru 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 secara otomatis menghasilkan blok tangkapan E.PrintStackTrace ();} return all;}@overridepublic boolean dodelete (int id) {boolean flag = false; string sql = "hapus dari t_demo di mana id =?"; cobalah {this.pstm = "hapus dari t_demo di mana id ="; coba {this.pstm = "hapus dari t_demo di mana id ="; coba {this this.conn.prepareStatement (sql); this.pstmt.setint (1, id); if (this.pstmt.executeUpdate ()> 0) {flag = true;} this.pstmt.close (); overcrace (sqlexception e) {// TODOED (); boolean dochange (demo demo) {boolean flag = false; string sql = "update t_demo set type =?, pay =?, name =?, text =? Di mana id =?"; coba {this.pstmt = this.conn.preparestatement (sql); this.pstmt.setint (5, 5, 5, 5, 5, 5, 5, 5, 5,) (sql); this.pstmt.pstmt.set (5, 5) demo.getType ()); this.pstmt.setDouble (2, demo.getPay ()); this.pstmt.setstring (3, demo.getname ()); this.pstmt.setstring (4, demo.getText ()); if (this.pstmt.executeCuteUpD () (); true;} this.pstmt.close ();} catch (sqlexception e) {// TODO secara otomatis menghasilkan blok tangkapan e.printstacktrace ();} return flag;}}―3.5. Factory.java
Paket com.xeonmic.factory; import com.xeonmic.dao.demodao; import com.xeonmic.dao.proxy.demodaoproxy; pabrik kelas publik {public static demodao getDemodaoinstance () {return new demodaoproxy ();--3.6. Demotest.java (melakukan tes sederhana dari metode sebelumnya)
Paket com.xeonmic.test; import java.util.linkedlist; import java.util.list; import com.xeonmic.factory.factory; import com.xeonmic.vo.demo; Demotest Public {public static void main (string [] args) {demo Demo1 = demo (); demo1.setname ("name"); demo1.setpay (0.98); demo1.setType (1); demo1.setText ("text"); docreate (demo1); dosearch (null); if (dosearch (null)! = null &&! Dosearch (null).). doSearch("").get(0);demo1.setText("Change Text");doChange(demo1);doSearch("WHERE id = "+demo1.getId());doDelete(demo1.getId());doSearch(null);}}public static List<demo> doSearch(String keys) {List<demo> allDemos = new LinkedList <demo> (); allDemos = factory.getDemodaoinstance (). DoSearch (keys); untuk (demo demo: allDemos) {System.out.println (demo.toString ());} return allDemos;} public static void dOCreate (demo demo) {if (factory.getDemodainstance (). DOCREATE (demo) {ificor.out.printl ("embo (" {{{{factory. " Gagal ");}} public static void dochange (demo demo) {if (factory.getDemodaoinStance (). dochange (demo)) {system.out.println (" modifikasi berhasil ");} else {System.println (" Modifikasi Gagal ");}}} public Static (Factory.getDemodaoinStance (). Dodelete (id)) {System.out.println ("Hapus berhasil");} else {System.out.println ("Delete Failure");}}/** Hasil output berhasil ditambahkan ID terpilih, nama, tipe, bayar, teks dari t_ text=Text]SELECT id,name,type,pay,text FROM t_demo demo [id=1, name=Name, type=1, pay=0.98, text=Text]SELECT id,name,type,pay,text FROM t_demo demo [id=1, name=Name, type=1, pay=0.98, text=Text]SELECT id,name,type,pay,text FROM t_demo demo [id=1, name=Name, type=1, bayar = 0,98, teks = teks] ID modifikasi seterect, nama, ketik, bayar, teks dari t_demo di mana id = 1demo [id = 1, name = name, type = 1, pay = 0,98, teks = ubah teks] hapus berhasil pilih id, nama, type, pay, teks dari t_demo * *//4. Bagian JSP Halaman dan Servlet (Penting)
―4.1. index.jsp (ganti konten tag HTML di index.html ke dalam tag HTML dan memodifikasi konten HTML di index.jsp dan buat modifikasi berikut ke JS)
<%@ page language = "java" import = "java.util.*" pageEncoding = "UTF-8"%> <%string path = request.getContextPath (); string basepath = request.getscheme ()+": //"+request.getServername ()+":"+request.getserverport ()+PATPERPORT.POCPY ";"; "+": "+"+"+"; "+"; "+"; "+"; "+"; "+"; "+"; "publporpy ();"+";"+";"+";" publport ";"); "+"; "+"; docty/doctypath (): "+request. "-// w3c // dtd html 4.01 transisi // en"> <html> <head> <title> demo </ title> <link rel = "stylesheet" type = "text/css" href = "css/jQuery-ui.min.css"/<link = "css/jQuery" ced "TEKS =" CREET "TEKS =" TEKS = "CSS ="/CSS = "/CSS =" CSS = "CSS =" CSS/JQUERE "/CSS/CSS/CSS" href = "css/jQuery-ui.theme.min.css"/> <tautan rel = "stylesheet" type = "text/css" href = "css/ui.jqgrid-boottrap-ui.css"/> <link rel = "styles" type- "csss" csss "css. /></head><body><div id="main"><!-- where jqGrid is located--><table id="grid-table"></table><!--jqGrid Browse Navigation Bar--><div id="grid-pager"></div></div><script src="js/jquery-1.11.0.min.js" type="text/javascript" charset = "UTF-8"> </script> <skrip src = "js/i18n/grid.locale-cn.js" type = "text/javascript" charset = "utf-8"> </skrip <script src = "js/jQuery.jqgrid.min.js" type = "script =" js/jQuery.jqgrid.min.js "type =" script = "TECP/JSCRIK" type = "Text/JavaScript"> // Ketika datatype adalah "Lokal", Anda perlu mengisi var grid_selector = "#grid-table"; var pager_selector = "#grid-pager"; $ (dokumen) .ready (function () {$ ("#grid-table"). jqgrid ({//function () {$ ("#grid-table"). jqgrid ({//function () {$ ("#grid-table"). jqgrid ({//function () {$ () retrieval:"<%=basePath%>"+"demoServlet", //Servlet URLLediturl used for adding, modifying, and deleting: "<%=basePath%>"+"demochangeServlet",//data: grid_data, //When datatype is "local", you need to fill in datatype:"json", //Data source, local data (local, json, JSONP, XML, dll.) Tinggi: 150, // Tinggi, Tinggi meja. Dapat berupa nilai, persentase atau 'auto'mType: "get", // metode pengiriman colnames: [' out-out order number ',' out-out type ',' total jumlah ',' pemohon (unit) ',' note '], colmodel: [{name:' id ', index:' id ', // index. Parameter interaksinya dengan latar belakang adalah Sidxkey: true, // ketika tidak ada ID dalam data yang dikembalikan dari sisi server, gunakan ini sebagai satu -satunya RowID dan hanya menggunakan satu kolom untuk melakukan pengaturan ini. If more than one is set, only the first one is selected, and the others are ignored width: 100,editable: false,editoptions: {size: "20",maxlength: "30"}}, {name: 'type',index: 'type',width: 200, //Width editable: true, //Is editable edittype: "select", //Types that can be edited. Nilai Opsional: Teks, TextArea, Pilih, kotak centang, kata sandi, tombol, gambar dan file. {size: "20", maxlength: "30"}}, {name: 'text', index: 'text', Width: 250, sortable: false, edited: true, editype: "textarea", Editoptions: {rows: "2", cols: "10"}},], viewrecords: true recor: 2 ", cols:" 10 "}},], viewrecords: true reck: the truigation: apakah navigasi: apakah navigasi: apakah nomor /navigasi:" 10 "}}}}}} navigasi: navigasi:" 10, // Tampilkan jumlah catatan per halaman rowlist: [10, 20, 30], // Array elemen yang digunakan untuk mengubah jumlah baris untuk menampilkan kotak daftar drop-down. pager: pager_selector, // bilah navigasi penelusuran di mana halaman dan tombol berada adalah altrows: true, // ditetapkan sebagai tabel baris bergantian, default adalah false // toppager: true, // apakah bilah navigasi browsing yang ditampilkan, benar -benar. Bar Navigasi Penjelajahan adalah Multiselect: Benar, // Apakah Bilah Navigasi Penjelajahan Dipilih oleh CTRL Keys Multiboxonly: Benar, // Apakah kotak centang dielapkan dengan Subgrid: True, // Sortname: 'ID', // Metode Penyortiran Default (Pesanan Ascending, Urutan Desc Desc Desc): "ID '," //Auto-width});//Browse navigation bar to add function part code $(grid_selector).navGrid(pager_selector, {search: true, //Retrieve add: true, //Add (Offices can be displayed only when editable is true) edit: true, //Modify (Offices can be displayed only when editable is true) del: true, //Delete refresh: true //Refresh}, {}, // Opsi edit {}, // Tambahkan opsi {}, // Hapus opsi {Multiplesearch: true} // Opsi pencarian - Tentukan beberapa pencarian);}); </script> </body> </html>―4.2. Demoservlet.java
Paket com.xeonmic.action; impor java.io.ioexception; impor java.util.linkedlist; import java.util.list; import javax.servlet.servletException; import javax.servlet.http.httpservlet; impor javax.servlet.http.htpservlet; impor javax.servlet javax.servlet.http.httpservletResponse; impor net.sf.json.jsonarray; impor net.sf.json.jsonobject; impor com.xeonmic.factory.factory; impor demoserves. serialVersionUID = 1L;/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8"); // Jika pengkodean tidak diatur di sini, akan ada respons terkunci. response.setheader ("cache-control", "no-cache"); int rows = integer.valueof (request.getParameter ("baris")); // Jumlah catatan yang ditampilkan di setiap halaman int halaman = integer.valueof (request.getParameter ("halaman")); //The current page number String sord = request.getParameter("sord");//Sorting method String sidx = request.getParameter("sidx");//Sorting column name Boolean search =(request.getParameter("_search").equals("true"))?true:false;//Is it used to query request List<demo> allList = new LinkedList<demo>();//Return result atur string keys = ""; // Kondisi kueri String if (cari) {keys = "where"; string filter = request.getParameter ("filter"); // Kondisi spesifik System.out.println (filter); // Format data yang masuk mirip dengan ini: "{" groupop ":" dan "," aturan ": [{" field ":" id "," op ":" eq "," data ":" 1 "}, {" field ":" type "," op ":" ew "," data ":" 2 "}}" JsonObject JsonObject = JsonObject.from (From (From "dan string (JsonObject JsonObject = JsonObject.from (from (" edan ("JsonObpject = JsonObject = JsonObject. (dan/atau) if (jsonobject.getString ("groupop")! = null &&! " jsonobject.getjsonArray ("aturan"); // ketenangan setiap kondisi untuk (int z = 0; z <rulsjson.size (); z ++) {objek t = aturanjson.get (z); JsonObject ruleJson = jsonObject.fromObject (t); field string = aturanJson.getString ("field"); string op = aturanon.getString ("op"); string data = ruleJson.getString ("data"); string string = ""; // digunakan untuk menyimpan satu pernyataan sql sqlyal ("data"). string = "= '"+data+"'"; break; case "ne": // string tidak sama = "<> '"+data+"'"; break; case "li": // kurang dari string = "<'"+data+"'"; break; case "le": // lebih dari atau sama dengan string = "<= '"+data+"" ""; "; break; case" ge ": // lebih besar dari atau sama dengan string ="> = '"+data+"' "; break; case" bw ": // antar ... {if (data.split (", "). length == 2) {string =" antara '"+data." ") '"+Data+"' "; // Tangani saat kesalahan data}} break; case" bn ": // tidak antara ... {if (data.split (", "). length == 2) {string =" bukan antara '"+data. "; // Tangani saat kesalahan data}} break; case" ew ": // akhiri dengan ... string =" like '%"+data+"' "; break; case" en ": // tidak diakhiri dengan ... string =" tidak suka '%"+data+" "; break; case" cn ": // contains string =" like'%"+" not like "; break" cn ": // contains string =" like 'dATA "+DATA+" "; '%"+data+"%' "; break; case" di ": // di {string =" in ("; string [] datas = data.split (", "); untuk (int i = 0; i <data.length; i ++) {string+= "'"+data [i]+"'"; if (i! = datas.length-1) {string+= ",";} else {string+= ")";}}} break; case "ni":/tidak di {string = "not in ("; string [] dATAS = DATAS. i ++) {string+= "'"+data [i]+"'"; if (i! = datas.length-1) {string+= ",";} else {string+= ")";}}} break; default: op = null; System.out.println ("OP Simbol kesalahan"); // OP Simbol api oP api api {if if api. (z == aturanjson.size ()-1) {keys+= ""+field+""+string+"";} else {keys+= ""+field+""+string+""+groupop+"";}}}} // ascending dan descending SQL Konversi SQL if (sidx! = null & null & null "." {System.out.println (sidx); keys += "order oleh" +sidx; System.out.println ("sord =" +sord); if (! Sord.equals ("asc")) {keys += "desc";}} alllist = factory.getDemodaointance (). Total = (alllist.size ()%baris == 0)? (alllist.size ()/baris): ((alllist.size ()/baris): ((alllist.size ()/baris) +1); int j = 0; int m = (halaman-1)*baris; int n = (halaman-1)*rows+rows+morarr; baris Jonarr; roWS; int n = (page-1)*rows+rows+moTron; baris; baris; J <alllist.size () && j <n; total);jjson.accumulate("records", allList.size());jjson.accumulate("rows", jArray);System.out.println(jjson.toString());response.getWriter().write(jjson.toString());}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpservletResponse respons)*/void dopost yang dilindungi (permintaan httpservletrequest, respons httpservletresponse) melempar servletException, ioException {// TODO Metode yang dihasilkan secara otomatis Stubthis.doget (permintaan, respons);}}--4.3. Demochangeservlet.java
Paket com.xeonmic.action; impor java.io.ioexception; impor javax.servlet.servletException; import javax.servlet.http.httpservlet; import javax.servlet.http.htpservletrequest; impor javax.servlet.htp.htpservletrequest; impor javax.servlet.htp.htpservletrequest; impor javax.servlet com.xeonmic.factory.factory; import com.xeonmic.vo.demo; kelas publik demochangeservlet memperluas httpservlet {/****/private static final long serialversionuid = 1l;/*** metode doget dari servlet. <br> ** Metode ini dipanggil ketika formulir memiliki metode nilai tag sama untuk mendapatkan.* @param Permintaan permintaan dikirim oleh klien ke server* @param respons respons dikirimkan oleh server ke klien* @throws servletException jika terjadi kesalahan, httpservlexception jika terjadi kesalahan, httpservon, httpservexception, httpservexception jika terjadi kesalahan*/httponsception jika httpservexception, httpservexception, httpservon, httpservexception jika terjadi kesalahan*/httpservexception, httpservon, httpservexception, httpservon, httpservexception jika httpserveon, httpservexception, httpservexception jika terjadi kesalahan public IoException {boolean flag = false; string opera = request.getParameter ("oper"); switch (opera) {case "del": {string [] ids = request.getParameter ("id"). Split (","); untuk (int i = 0; i <ids.length; i ++) {int id iD =Integer.valueOf(ids[i]);flag=Factory.getDemoDAOInstance().doDelete(id);}} break;case "add":{int type = Integer.valueOf(request.getParameter("type"));Double pay = Double.valueOf(request.getParameter("pay"));String name = request.getParameter ("name"); string text = request.getParameter ("text"); demo demo = demo baru (-1, tipe, bayar, nama, teks); flag = factory.getDemodaoinstance (). Dokreate (demo); } break; case "edit": {int id = integer.valueof (request.getParameter ("id")); int type = integer.valueof (request.getParameter ("type")); ganda gaji = ganda. demo = demo baru (id, jenis, bayar, nama, teks); flag = factory.getDemodaoinstance (). dochange (demo); } break; default: break;} system.out.println (flag);}/*** Metode dopost dari servlet. <br>** This method is called when a form has its tag value method equals to post.* * @param request the request send by the client to the server* @param response the response send by the server to the client* @throws ServletException if an error occurred* @throws IOException if an error occurred*/public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, ioException {this.doget (request, response);}}―4.4.web.xml
<? Xml Version = "1.0" encoding = "UTF-8"?> <Web-app xmlns: xsi = "http://www.w3.org/2001/xmlschema-instance" xmlns = "http://xmlnsmlnsp.org/org/xlns =" http://xmlnsmlnsp.org/org/xx = XSI: schemalocation = "http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/xml/xml/xml/nee/nee/JEE/JEE/JEE/XML/XML/XML/XML/XML/XML/XML/XML/XML/XML/XML/XML/XML/XML/XML/XML/XML/xml id = "webapp_id" version = "3.1"> <play-name> jqGrid </play-name> <servlet> <servlet-name> demoserVlet </servlet-name> <servlet-class> com.xeonmic.action.demoServlet </classerv Misalkan </servlet-name> <servlet-class> com.xeonmic.action.demochangeServlet </servlet-class> </servlet> <servlet-papping> <servlet-name> demoserVlet </servlet-name> <rerl-pattern>/demoservlet </rerl-pattern> </servlet-pemetaan g> <servlet-mapping> <servlet-name> DemochangeserVlet </servlet-name> <RURL-pola>/DemochangeServlet </rerl-pattern> </servlet-papping> <dreendy-filt-file- index. htm </celcome-file> <creendak-file> index.jsp </celcome-file> <creendak-file> default.html </celcome-file> <creendak-file> default.htm </celcome-file> <creendak-file> default.jsp </celcome-filtm
Pada titik ini, fungsi tabel tunggal JQGRID telah sepenuhnya diimplementasikan. Tolong beri tahu saya jika ada masalah desain dalam contoh. Artikel berikutnya akan mulai menyelesaikan implementasi desain tabel master dan slave. Harap perhatikan situs web skrip langsung!