関連する読み物：
JavaでJQGridの研究ノートを編成 - 高度な章（i）
この記事は正式に背景（Java言語）と対話し始め、使用されるプラットフォームは
JDK：Java 1.8.0_71
MyEclisp 2015 Stable 2.0
Apache Tomcat-8.0.30
mysql 5.7
mysql 11.2.5用のnavicat（mysqlデータベース管理ツール）
1.データベースパーツ
1.データベースを作成します
MySQL用のNAVICATを使用してデータベースを作成します（他のツールを使用して導入されていない、またはコマンドラインを直接使用していません）
2。
2。テーブルを作成します
ダブルクリックして前のステップを開き、データベースを作成します - テーブルを右クリック - 新しいテーブルを選択します
次のフィールドを作成すると、テーブル名を入力するように求められます。
2。手順パート
1.新しいプロジェクトを作成します
MyeClipse -webプロジェクトを使用して新しい作成を作成します
プロジェクト名を入力して、プロジェクトを実行しているJavaとTomcatを選択します。次のページまで[次へ]をクリックして、下のチェックボックスをクリックして、web.xmlファイルを自動的に生成します。
次のパッケージ構造を作成し、新しいVOクラスを作成します（プロパティはデータベースフィールドに1つずつ対応します）
demo.java
パッケージcom.xeonmic.vo; public class demo {private int id; private int id; private string name; private int type; private double pay; private demo（）{// todo auto-enerated constructor stub} public demo（int id、int、int、int、double pay、string name、string text）{this.id = id; this = pay; thim; thimtepe; thimtepe; thimtepe text;} public int getid（）{return id;} public void setid（int id）{this.id = id;} public string getname（）{return name（）{return name;} public void setname（this.name）{this.name = name;} public int getType（）{return getType;} public void type（int type）{get; type; {return pay;} public void setPay（double pay）{this.pay = pay;} public string gettext（）{return text;} public void settext（string text）{this.text = text;}@overridepublic string toString（）{return "demo [id =" + id + " + text + "]";}}2。データベース接続のJARパッケージとJSONファイルをインポートします
データベース接続JARパッケージは、MySQLインストールディレクトリの次のディレクトリにあります
さらに、JSONに必要なJARパッケージは、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; import java.sql.connection; Import java.sql.drivermanager; Import java.sql.sqlexception; public fany string dbdriver = "org.gjt.mm.mysql" dburl = "jdbc：mysql：// localhost：3306/jqgriddemo"; private static final string dbuser = "root"; private static final string dbpassword = "1234"; private connection conn = null; public databaseconnection（）{try {class.forname（dbdriver）; drivermanager.getConnection（dburl、dbuser、dbpassword）;} catch（classnotfoundexception e）{// todo catch block e.printstacktrace（）;} catch（）{// todo dodo catch block e.printstacktrace resurcefully "））;} public connection getConnection（）{return this.conn;} public void close（）{if（this.conn！= null）{try {this.conn.close（）;} catch（sqlecception e）{// todo dodo catch catch block e.printstacktrace（）;}}}}}}}- 3.2。 demodao.java
パッケージcom.xeonmic.dao;インポートjava.util.list;インポートcom.xeonmic.vo.demo; public interface demodao {// public boolean ducreate（demo demo）; // query method public list <demo> dosearch（string keys）; dochange（デモデモ）;}- 3.3。 demodaoimpl.java
パッケージcom.xeonmic.dao.impl; Import java.sql.connection; Import java.sql.preparedStatement; Import java.sql.Resultset; Import Java.sql.sqlexception; Import java.util.ArrayList; Import Java.util.util.list.list.xeonmimimimimimimimimimimimimimimimimimimimieonmiemienmimimimのインポート; com.xeonmic.vo.demo; public class demodaoimplはdemodao {private connection conn = null; private redpedStatement pstmt = null; public demodaoimpl（this.conn）{this.conn;}@overridepublic boolean docreate（demo demo = boolean flag = "inscistenting inters inters inters inters interin t_demo（type、pay、name、text）values（？、？、？、？） "; try {this.pstmt = this.conn.preparestatement（sql）; this.pstmt.setint（1、demo.gettype（）; this.pstmt.setdouble（2、demo.getay（）; demo.getName（））; this.pstmt.setString（4、demo.getText（））; if（this.pstmt.executeupdate（）> 0）{flag = true;} this.pstmt.close（）;} catch（） flag;}@overridepublic list <demo> dosearch（string keys）{// dodo auto-funated method stubif（keys == null）{keys = "";} string sql = "id、name、type、pay、text from t_demo"+keys; list <demo> all = new arraylist <demo>; {this.pstmt = this.conn.preparestatement（sql）; resultset rs = this.pstmt.executequery（）; demo demo = null; while（rs.next（））{demo = new 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自動的に生成されたキャッチブロックe.printstacktrace（）;} return all;}@overridepublic boolean dodelete（int id）{boolean flag = false; string sql = "t_demo where id =？ this.conn.preparestatement（sql）; this.pstmt.setint（1、id）; if（this.pstmt.executeupdate（）> 0）{flag = true;} this.pstmt.close（）;} catch（sqlexception e）{// dotuntact catch catch clock e.printstacktrace（） boolean dochange（demo demo）{boolean flag = false; string sql = "update t_demo set type =？、pay =？、name =？、text =？chere id =？"; try {this.pstmt = this.conn.preparestatement（sql）; this.pstmt.setint（5、demo.getid（）; demo.getType（））; this.pstmt.setDouble（2、demo.getPay（））; this.pstmt.setString（3、demo.getName（））; this.pstmt.setString（4、demo.getText（））; true;} this.pstmt.close（）;} catch（sqlexception e）{// todoはcatch block e.printstacktrace（）;} return flag;}}}を自動的に生成しました。- 3.5。 Factory.java
パッケージcom.xeonmic.factory;インポートcom.xeonmic.dao.demodao; Import com.xeonmic.dao.proxy.demodaoproxy; public demodao getdemodaoinstance（）{{return new demodaoproxy（）;- 3.6。 demotest.java（前の方法の簡単なテストを実施）
パッケージcom.xeonmic.test; Import java.util.linkedlist; import java.util.list; import com.xeonmic.factory.factory; import com.xeonmic.vo.demo; public class demotest {public static boid main（string [] args）{demo demo1 = new new new 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（））; dedelete（demo1.getid（））; dosearch（null）;}}公開統計リスト<デモ> demo> linkedlist <demo>（）; alldemos = factory.getdemodaoinstance（）。dosearch（keys）; for（demo demo：alldemos）{system.out.println（demo.tostring（））;} return alldemos;} public static void docreate（demo demo）{if（factory.getdemodaoinstance（）。 {system.out.println（ "add failed"）;}} public static void dochange（demo demo）{if（factory.getdemodaoinstance（）。dochange（demo））{system.out.println（ "修正は成功しました"）; dodelete（int id）{if（factory.getdemodaoinstance（）。dodelete（id））{system.out.println（ "delete restyfully"）;} else {system.out.println（ "delete failed"）;}}}}}/** section select id、tipe select id、tipe、tipe、tip name = name、type = 1、pay = 0.98、text = text] 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 = text = 1、pay = 0.98、name、pay id、teping、teping = tep、tep、tep、text = text = text = 1、tex [id = 1、name = name、type = 1、pay = 0.98、text = text] seterect修正ID、name、type、pay、text from t_demo where id = 1demo [id = 1、name = name = 1、pay = 0.98、text = text text delete delete delete selectly id、type、pay from t_demo * * * * */4。JSPページとサーブレットセクション（重要）
- 4.1。 index.jsp（index.htmlのHTMLタグのコンテンツをHTMLタグに置き換え、index.jspのHTMLのコンテンツを変更し、JSに次の変更を加えます））
<％@ page Language = "Java" Import = "Java.util。*" PageEncoding = "Utf-8"％> <％string path = request.getContextpath（）; string basepath = request.getscheme（）+"：//"+request.getServername（）+"："+request.getServerport（ " - // W3C // DTD HTML 4.01 Transitional // En"> <HTML> <Head> <title> demo </title> <link rel = "styleSheet" type = "text/css" href = " href = "css/jquery-ui.theme.min.css"/> <link rel = "styleSheet" type = "text/css" href = "css/ui.jqgrid-bootstrap-ui.css"/>> <link rel = "styleheet" Type = "text/css" href = "cscss /> </head> <body> <div id = "main"> <！ - jqgridの配置 - > <table id = "grid-table"> </table> <！ - jqgrid browse navigation bar-> <div id = "grid-pager"> </div> </div> <src = "js/jquery-1.11.0.min.js" "Type =" Type charset = "utf-8"> </scrip> <script src = "js/i18n/grid.locale-cn.js" type = "text/javascript" charset = "utf-8"> </scrip> <スクリプトsrc = "js/jquery.jqgrid.min.js type = "text/javascript"> //データタイプが「ローカル "の場合、var grid_selector ="＃grid-table "; var pager_selector ="＃grid-pager "; $（document）.read（function（）{$（"＃grid-table "）。jqgrid（{{$（"＃grid-table "）。検索： "<％= basepath％>"+"demoservlet"、// servlet urllediturlの追加、変更、削除に使用されるサーブレットurllediturl： "<％= basepath％>"+"demochangeservlet"、// data：grid_data、// datatypeがローカルである場合、local json： "json" JSONP、XMLなど）高さ：150、//高さ、テーブルの高さ。値、パーセンテージ、または 'auto'mtype： "get"、//送信メソッドcolnames：[' out out order number '、' out out type '、' total on '、' applicant（unit） '、' note ']、colmodel：[{name：' id '、index：' id ''、// index。背景との相互作用のパラメーターはsidxkey：true、//サーバー側から返されるデータにIDがない場合、これを唯一のrowidとして使用し、1つの列のみを使用してこの設定を行います。複数が設定されている場合、最初のもののみが選択され、他のものは幅：100、編集可能：editoptions：{size： "20"、maxlength： "30"}}、{name： 'type'、index： 'type'、width：200、width editable：true、// edittype： " Optional values: text, textarea, select, checkbox, password, button, image and file.seditoptions: {value: "1: Purchase and enter; 2: Return to enter"}}, {name: 'pay',index: 'pay',width: 60,sorttype: "double",editable: true}, {name: 'name',index: 'name',width: 150,editable: true,editoptions: {size： "20"、maxlength： "30"}}、{name： 'text'、index： 'text'、width：250、sortable：false、editable：true、edittype： "textarea"、editoptions：{rows： "2"、cols： "10"}}}}、 rownum：10、//ページあたりのレコード数を表示するローリスト：[10、20、30]、//行数を変更してドロップダウンリストボックスを表示するために使用される要素の配列。 Pager：pager_selector、//ページとボタンが配置されているブラウジングナビゲーションバーはaltrowsです：true、// default is false //トッパー：true、//ブラウジングナビゲーションバーがマルチセレクトに表示されるかどうか：true ：/ブラウジングナビゲーションバーはマルチセレクトです：true、// // auto-width}）; //ナビゲーションバーを閲覧してパーツコード$（grid_selector）.navgrid（pager_selector、{search：true、// add：true：true、（editableがtrueの場合にのみオフィスを表示できます）編集：true、// modify（ediable：true：true frue // del // del // {}、//オプションを編集{}、// Options {}、// delete options {multipleSearch：true} //検索オプション - 複数検索を定義）; </script> </body> </html>- 4.2。 demoservlet.java
パッケージcom.xeonmic.action; import java.io.ioexception; import java.util.linkedlist; import java.util.list; import javax.servlet.servletexception; import javax.servlet.servlet.http.httpservlet; javax.servlet.http.httpservletresponse; Import net.sf.jsonArray; Import net.sf.json.jsonobject; Import com.xeonmic.vo.demo;/*** servlet expliant*/public class demoservlete expliant expliant com.xeonmic.vo.demo;/*** com.xeonmic.vo.demo; serialversionuid = 1l;/*** @see httpservlet＃doget（httpservletrequest request、httpservletresponse応答） //ここにエンコードが設定されていない場合、response.setContentType（ "Text/HTML; charset = utf-8"）; Response.setheader（ "Cache-Control"、 "no-cache"）; int rows = integer.valueof（request.getParameter（ "rows"））; //各ページに表示されるレコードの数int page = integer.valueof（request.getParameter（ "page"））; //現在のページ番号文字列sord = request.getParameter（ "sord"）; //メソッドのソート文字列sidx = request.getparameter（ "sidx"）; //列名boolean search =（request.getParameter（ "_ search"）。 linkedlist <demo>（）; // return resurt set string string keys = ""; // query条件文字列if（search）{keys = "where"; string filters = request.getParameter（ "filters"）; //特定の条件system.out.println（フィルター）; //着信データの形式はこれに似ています。 "{" Groupop "：" "and"、 "rules"：[{"field"： "id"、 "op"： "eq"、 "data"： "1"}、{"field"： "type"、 "op"： "ew"、 "data"： "2"}]} "jsonobject jsonobject. jsonobject。 （および/または）if（jsonobject.getString（ "groupop"）！= null &&！ ""。equals（jsonobject.getString（ "groupop"）））{if（jsonobject.getString（ "groupop"） jsonobject.getjsonarray（ "ルール"）; //静けさ（int z = 0; z <roolsjson.size（）; z ++）{オブジェクトt = rulesjson.get（z）; jsonobject rulejson = jsonobject.fromobject（t）; string field = rulejson.getString（ "field"）; string op = rulejson.getString（ "op"）; string data = rulejson.getString（ "data"）; string string = "" ;/ string = "= '"+data+"'"; break; case "ne"：// unequal string = "<> '"+data+"'"; case "li"：//文字列未満= "<'"+data+"'"; case "; case"; case "; "; break; case" ge "：// string ="> = '"+data+"' "; break; case" bw "：// bether ... if（data.split（"、 "）。 '"+data+"' "; //データエラーの場合}} break; case" bn "：// not bether ... if（data.split（"、 "）。length == 2）{string =" between '"+data.split（"、 "）[0]+"' 'および' "+datasplit（"）["" "; //データエラーの場合}} break; case" ew "：// end with ... string =" like '％ "+data+"' "; case" en "：//は... string =" like 'cent "+data+"' "; break; case" cn "：// contains string =" like '％ " '％ "+data+"％' "; break; case" in "：// in {string =" in（ "; string [] datas = data.split（"、 "）; for（int i = 0; i <datas.length; i ++）{string+= "'"+datas [i]+"'"; if（i！= datas.length-1）{string+= "、";} els {string+= "）";}}} break; i ++）{string+= "'"+datas [i]+"'"; if（i！= datas.length-1）{string+= "、";} else {string+= "）";}}}}}}} null; system.out.println（ "op symbole error"）; // opシンボルエラー} if（op！= null} （z == roolsjson.size（） - 1）{keys+= ""+field+""+string+"";} else {keys+= ""+""+""+groupop+"";}}} // ascending and Sql statement conversion if（sidx！= null &&！ "））） {system.out.println（sidx）; keys += "order by" +sidx; system.out.println（ "sord =" +sord）; if（！sord.equals（ "asc"））{keys += "desc";}} alllist = factory.getdemodaoinstance Total =（alllist.size（）％rows == 0） j <alllist.size（）&& j ++）{jsonobject.fromobjed（alllist.get（j））;合計）; jjson.accumulate（ "records"、alllist.size（））; jjson.accumulate（ "rows"、jarray）; system.out.println（jjson.tostring（））; respons.getWriter（）。 httpservletResponse応答）*/保護されたvoid dopost（httpservletrequest request、httpservletresponse応答）Servletexception、ioexception {// todo auto-fienated method stubthis.doget（リクエスト、応答）;}}}- 4.3。 demochangeservlet.java
パッケージcom.xeonmic.action; import java.io.ioexception; Import javax.servlet.servletexception; import javax.servlet.http.httpservlet; Import javax.servlet.http.httpservletrequest; Import javax.http.httpservletesposs; com.xeonmic.factory.factory; Import com.xeonmic.vo.demo; public class demochangeservletはhttpservlet {/****/private static final long serialversionuid = 1l;/***サーブレットのdogetメソッドを拡張します。 <br> **このメソッドは、フォームのタグ値メソッドが取得することに等しい場合に呼び出されます。** @paramクライアントのリクエストクライアントがサーバーに送信する要求* @param応答サーバーがクライアントにサーバーに送信する応答* @throws servletexception* @throws exceptionが発生した場合* throws ioexcept {boolean flag = false; string opera = request.getParameter（ "oper"）; switch（oper）{case "del"：{string [] ids = request.getParameter（ "id"）。 = integer.valueof（ids [i]）; flag = factory.getdemodaoinstance（）。dodelete（id）;}} break; case "add"：{int type = integer.valueof（request.get.getparameter（ "type"）; request.getParameter（ "text"）; demo demo = new demo（-1、type、pay、name、text）; Flag = factory.getDemodaoInstance（）。docreate（demo）; } break; case "edit"：{int id = integer.valueof（request.getParameter（ "id"））; int integer.valueof（request.getParameter（ "type"））; double pay = double.valueof（request.getParameter（ "pay"）; Demo（id、type、pay、name、text）; flag = factory.getdemodaoinstance（）。dochange（demo）; } break; default：break;} system.out.println（flag）;}/***サーブレットのドポストメソッド。 <br> **このメソッドは、フォームのタグ値メソッドが投稿に等しい場合に呼び出されます。** @paramクライアントのリクエストクライアントがサーバーにリクエストする* @param応答サーバーがクライアントにサーバーに送信する応答* @throws servletexception* @throws andows ioexceptionが発生した場合* 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://xmlns.jcp.org/xml/ns/javaee xsi：schemalocation = "http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/ns/javaee id = "webapp_id" version = "3.1"> <disple-name> jqgrid </display-name> <servlet> <servlet-name> demoservlet </servlet-class> com.xeonmic.action.demoservlet </servet-class> </servlet> <servlet-name> demochangenererv </servlet-name> <servlet-class> com.xeonmic.action.demochangeservlet </servlet-class> </servlet> <servlet-mapping> <servlet-name> demoservlet </servlet-name> <url-pattern>/demoservlet </url-pattern> g> <サーブレットマッピング> <Servlet-name> demochangeservlet </servlet-name> <url-pattern>/demochangeservlet </url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file> index.html </welcome-file> <welcome-file> index。 htm </welcome-file> <welcome-file> index.jsp </welcome-file> <welcome-file> default.html </welcome-file> <welcome-file> default.htm </welcome-file> <welcome-file> <welcome-file> jsp </welcome-file> </welcome-file-list> </web-app>
この時点で、JQGridシングルテーブル関数が完全に実装されています。例にデザインの問題があるかどうかを教えてください。次の記事では、マスターとスレーブテーブルの設計実装を解決し始めます。スクリプト直接ウェブサイトに注意してください！