Leituras relacionadas:
Organização do JQGrid Study Notes in Java - Capítulo Avançado (i)
Este artigo começa oficialmente a interagir com o plano de fundo (idioma java), e a plataforma usada é
JDK: Java 1.8.0_71
Myeclisp 2015 Stable 2.0
Apache Tomcat-8.0.30
MySQL 5.7
Navicat para MySQL 11.2.5 (ferramenta de gerenciamento de banco de dados MySQL)
1. Parte do banco de dados
1. Crie um banco de dados
Crie um banco de dados usando o Navicat para MySQL (não introduzido usando outras ferramentas ou usando a linha de comando diretamente)
2.
2. Crie uma tabela
Clique duas vezes para abrir a etapa anterior para criar um banco de dados - clique com o botão direito do mouse - selecione nova tabela
Ao criar os seguintes campos, você solicitará inserir o nome da tabela.
2. Parte do procedimento
1. Crie um novo projeto
Crie novo usando o Myeclipse - Web Project
Digite o nome do projeto para selecionar Java e Tomcat executando o projeto. Clique em Avançar até que a página seguinte clique na caixa de seleção abaixo para gerar automaticamente o arquivo web.xml.
Crie a seguinte estrutura de pacote e crie uma nova classe Vo (as propriedades correspondem aos campos de banco de dados um por um)
Demo.java
pacote com.Xeonmic.vo; public classe Demo {private int id; nome da sequência privada; private Int Type; privado Pay Double Pay; Private String Text; public Demo () {// TODO Construtor de auto-gerado automaticamente stub} public Demo (int id, Int Type, Double Pay, String Name, Text) {this.id = id; this.name = Name = Name; text;} public int getId () {return id;} public void setId (int id) {this.id = id;} public string getName () {retorna name;} public void setName (string name) {tys.name = name;} public interi getType () {return type;} public »sTETTYPE (} typen) {return pay;} public void setPay (pay duplo) {this.pay = pay;} public string getText () {return text;} public void setText (string text) {this.text = text;}@substituto string tostring (), ")," + " +", tostring ",", tipo ", tosTring", tostring, ", tipo", tostring ", tostring,", tipo ", tostring", tostring ", tostring", tostring ", tostring", "thext = text; text;}@@@@@@namespublic string tostring () {return") + texto + "]";}}2. Importar o pacote JAR de conexão com o banco de dados e o arquivo JSON
O pacote JAR de conexão do banco de dados pode ser encontrado no seguinte diretório do diretório de instalação do MySQL
Além disso, o pacote JAR necessário para JSON foi enviado para o Baidu Cloud (http://pan.baidu.com/s/1detgjrv) e copiado e colado no diretório Webroot/Web-Inf/Lib.
Em seguida, selecione tudo o que é clique com o direito de adicionar ao caminho de construção
3. Implementação básica em camadas do modelo de design Dao
Consulte o "Java Web Development Classic Basics" aqui, não descreveremos o código -fonte e depois escreveremos um artigo separado para falar especificamente sobre essa parte do conhecimento básico.
―3.1. DatabaseConnection.java
pacote com.xeonmic.dbc; importar java.sql.connection; importar java.sql.driverManager; importar java.sql.sqLexception; public class DatabaseConnection {private Static Final String dbdriver = "org.gjt.m.mysql.driver; Dburl = "jdbc: mysql: // localhost: 3306/jqGridDemo"; private estático string final dbuser = "root"; private static final string dbpassword = "1234"; conexão privada conexão = null; public databaseConnection () {tentn.gtle.Forname (dbriver); Dbuser, dbPassword);} Catch (classNotFoundException e) {// TODO Gerou automaticamente o bloco de captura E.PrintStackTrace ();} Catch (sqLexception e) {// TODO Generated Catch Block E.PrintStack (); this.conn;} public void close () {if (this.conn! = null) {try {this.conn.close ();} catch (sqLexception e) {// TODO Gerou automaticamente o bloco de captura 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 demonstração);}―3.3. Demodaoimpl.java
pacote com.Xeonmic.dao.impl; importar java.sql.connection; importar java.sql.preparedStatement; importar java.sql.restulset; import java.sql.sqLexception; import java.util.arraylist; com.Xeonmic.vo.demo; public class deModaoImpl implementa demodao {conexão privada conn = null; privado preparado estatamento pstmt = null; public demodaoimpl (conexão conn) {this.conn = con; T_DEMO (TIPO, PAGAR, NOME, TEXT) VALORES (?,?,? ,?) "; Tente {this.pstmt = this.conn.preparestatement (sql); this.pstmt.setTInt (1 Demo.getType (); this.pstmt.setDouble (2, Demo.getPay (); Demo.getName ()); this.pstmt.SetString (4, Demo.getText ()); if (this.pstmt.executeUpdate ()> 0) {flag = true;} this.pstmt.close ();} catch (sqLexception e) {// Todo Auto flag;}@SubsteridePublic List <Memo> Dosearch (String Keys) {// TODO Method Auto-Gerated Stubif (keys == null) {keys = "";} string sql = "Select ID, Nome, Tipo, Pay, Text From T_DEMO"+Teclas {this.pstmt = this.conn.preparestatement (SQL); ResultSet rs = this.pstmt.executeQuery (); demonstração de demonstração = nulo; Demo (Rs.getInt ("ID"), Rs.getInt ("Type"), Rs.getDouble ("Pay"), Rs.getString ("Nome"), Rs.getString ("Text")); all.add (demonstração);} this.pstmt.close (); } Catch (sqLexception e) {// TODO gerou automaticamente o bloco de captura E.PrintStackTrace ();} Retornar tudo;}@substituir DODELETE booleano de substituição (int id) {bandeira booleana = false; string sql = "Delete de t_demo onde id =? this.conn.preparestatement (sql); this.pstmt.setInt (1, id); if (this.pstmt.executeUpdate ()> 0) {flag = true;} this.pstmt.close ();} catch (sqLexception e) {// para retornar automaticamente. boolean dochange (demonstração de demonstração) {bandeira booleana = false; string sql = "atualize t_demo set type =?, pay =?, nome =?, text =? where id =?"; tente {this.pstmt = this.conn.preparestement (sql); this.pstmt.setInt (5, 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.executeUpdate()>0){flag = true;} this.pstmt.close ();} catch (sqLexception e) {// TODO Gerou automaticamente o bloco de captura E.printStackTrace ();} Return sinalizador;}}―3.5. Factory.java
pacote com.Xeonmic.Factory; importar com.xeonmic.dao.demodao; importação com.xeonmic.dao.proxy.demodaoproxy; public class Factory {public static Demodao getDemodaoiStance () {Return New DemodaoProxy ();}}}}}}}―3.6. DemoTest.java (conduza um teste simples do método anterior)
pacote com.Xeonmic.test; importar java.util.LinkedList; importar java.util.list; importar com.xeonmic.factory.factory; importar com.xeonmic.vo.Demo; public class Demotest {public static void main (string [] args) {Deno1 = Demo (); Demo1.setName ("Nome"); Demo1.setPay (0,98); Demo1.setType (1); Demo1.Settext ("Text"); DocReate (Demo1); Dosearch (null); if (Dosearch (null)! dosearch (""). get (0); Demo1.Settext ("Alterar texto"); Dochange (Demo1); dosearch ("onde id ="+Demo1.getId ()); DODELETE (Demo1.getid ()); Dosearch (null);}} Lista de estática <Memo> Dosearch (string (key) (strums); LinkedList <Memo> (); AllDemos = Factory.getDemodaoiStance (). Dosearch (chaves); para (Demo Demo: AllDemos) {System.out.println (Demo.toString ());} Retornar allDemos;} public static void docriate (DemoMo) {if (factory.getDemodaoiStance (). falhou ");}} public static void DoChange (demonstração de demonstração) {if (factory.getDemodaoiStance (). Dochange (Demo)) {System.out.println (" Modificação foi bem -sucedida ");} else {System.out.println (" Int falhou (");}}); (Factory.getDemodaoiStance (). DODELETE (ID)) {System.out.println ("Excluir com sucesso");} else {System.out.println ("Delete FAILD");}}}}/** O resultado da saída é adicionado com sucesso, nome, nome, tipo, texto de T_Dem texto text = texto] Selecione ID, nome, tipo, pagamento, texto de T_DEMO Demo [id = 1, nome = nome, tipo = 1, pay = 0,98, texto = texto] Selecione Id, Nome, Tipo, Pagar, Texto de T_Demo Demo [ID = 1, Nome = Tipo, Tipo, 1 pay = 0,98, texto = texto] ID da modificação da sede, nome, tipo, pagamento, texto de t_demo onde id = 1demo [id = 1, nome = nome, tipo, tipo = 1, pay = 0,98, texto = alteração text] Exclua com sucesso selecione ID, nome, tipo, pagamento, texto de t_demo * *///4. Página JSP e seção de servlet (importante)
―4.1. index.jsp (substitua o conteúdo das tags html em index.html em tags html e modifique o conteúdo de html no index.jsp e faça as seguintes modificações em JS)
<%@ página de página = "java" import = "java.util.*" PageEncoding = "utf-8"%> <%string path = request.getContextPath (); string basepath = request.getscheme ()+": //"+request.getSername ()+":"+request.g); "-// w3c // dtd html 4.01 transitório // pt"> <html> <head> <titter> demonstra </title> <link rel = "stylesheet" type = "text/css" href = "css/jQuery-ui.min.css"/> <link Rel = "STYNELTR =" Linksheshesheshesheshesheshesheshesheshesheshesheshes (jQuery-ui ". href = "css/jQuery-ui.theme.min.css"/> <link rel = "stylesheet" type = "text/css" href = "css/ui.jqgrid-bootstrap-ui.css"/> link = "Stylesheet" type = "text/cs/cs" HEXT/CSs " /> </ad Head> <body> <div id = "main"> <!-onde jqGrid está localizado-> <tabela id = "grade-table"> </tabela> <!-JQGrid Browse Bras de navegação-> <div id = "Grid-pager"> </niv> </divhript Src = "js/jQueryMery.10 charset = "utf-8"> </script> <script src = "js/i18n/grid.locale-cn.js" type = "text/javascript" charset = "utf-8"> </script> <script src = "js/jQuery.jqGrid.js.js" typen = "js/jQuery.jqgrid.js" charset = "utf-8"> </script> <script type = "text/javascript"> // Quando o tipo de dados é "local", você precisa preencher var grid_selector = "#grid-table"; var pager_selector = "#grid-pager"; $ (document). Recuperação: "<%= Basepath%>"+"DemosServlet", // servlet urllediturl usado para adicionar, modificar e deletar: "<%= basepath%>"+"DemocangeServlet", // Dados: Grid_data, // Datatype "/Local", você precisa preencher no dados do DATTYPY: xml, etc.) Altura: 150, // Altura, altura da tabela. Pode ser um valor, porcentagem ou 'Auto'mType: "Get", // Método de envio Colnames: [' Número da ordem de saída ',' tipo de saída ',' valor total ',' aplicante (unidade) ',' note '], colmodel: [{name:' id ', Índice:' id ', // index. O parâmetro de sua interação com o plano de fundo é Sidxkey: true, // Quando não houver ID nos dados retornados do lado do servidor, use -o como o único rowid e use apenas uma coluna para fazer essa configuração. Se mais de um está definido, apenas o primeiro é selecionado e os outros são ignorados na largura: 100, editável: false, editoptions: {size: "20", maxlength: "30"}}, {nome: 'tipo', index: 'tipo', largura: 200, // largura e editável: verdadeiro, // é editypypy: " Valores opcionais: texto, textarea, selecione, caixa de seleção, senha, botão, imagem e file.seditOptions: {value: "1: compre e digite; 2: retorne para inserir"}}, {name: 'page', index: 'page', width: 60, sorttype: "", editável: true},, {name '', name: {name: sorth: 60, sorttype: "", ", editável: true},, {nome ', name: name: {name: sorth: 60, sorttype:" ", editativo: true},, {name', name: name: sorty, ',', ',' ',' ',', '', '', ',', '', ',' ',' ', o nome do {size: "20",maxlength: "30"}}, {name: 'text',index: 'text',width: 250,sortable: false,editable: true,edittype: "textarea",editoptions: {rows: "2",cols: "10"}}, ],viewrecords: true, //Whether to display the total number of records in the browsing navigation bar rowNum: 10, // Exibe o número de registros por lista de rowlist de página: [10, 20, 30], // Matriz de elementos usados para alterar o número de linhas para exibir a caixa de listagem suspensa. pager: pager_selector, //The browsing navigation bar where the page and buttons are located is altRows: true, //Set as alternating row table, default is false//toppager: true, //Whether the browsing navigation bar is displayed on it multiselect: true, //Whether the browsing navigation bar is multiselect: true, //Whether the browsing navigation bar is multiselect: true, //Whether the browsing navigation bar is multiselect: true, //Whether the browsing navigation bar is multiselected by Ctrl keys multiboxonly: true, //Whether the check box is multiselected by subGrid: true, //sortname:'id',//Default sorting method (asc ascending order, desc descending order) caption: "Purchase return order list", //Table name autowidth: true //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}, {}, // Editar opções {}, // Adicionar opções {}, // Excluir opções {multiplesearch: true} // opções de pesquisa - define pesquisas múltiplas);}); </script> </body> </html>―4.2. Demoservlet.java
package com.xeonmic.action;import java.io.IOException;import java.util.LinkedList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.httpServletResponse; importação net.sf.json.jsonArray; importação net.sf.json.jsonObject; import com.xeonmic.factory.Factory; Serialversionuid = 1L;/*** @see httpServlet#Doget (solicitação httpSertLeQuest, httpServletResponse Response)*/vazio protegido (httpServletReQuest, solicitação, retenção de servirext); // Se a codificação não estiver definida aqui, haverá resposta iluminada.setContentType ("text/html; charset = utf-8"); Response.setheader ("Cache-Control", "No-Cache"); int linhas = inteiro.valueof (request.getParameter ("linhas")); // o número de registros exibidos em cada página int página = integer.valueof (request.getParameter ("página")); // o número atual de página string sord = request.getParameter ("sord"); // Método de classificação String sidx = request.getParameter ("sidx"); // classificação do nome da coluna boolean = (request.getParEdList ("_ Search"). Equals ("true")? True: false; // é usado para a queda de sibilos "). Resultado Definir string keys = ""; // String de condição de consulta if (search) {keys = "where"; string filters = request.getParameter ("filtros"); // Condições específicas System.out.println (filtros); // O formato dos dados de entrada é semelhante a este: "{" GRUPOP ":" e "," Regras ": [{" campo ":" id "," op ":" eq "," dados ":" 1 "}, {" field ":" type "," op ":" ew "," dados ":" 2 "}]}" jsonObject = jsonObject = jsonObject.FomBject ("2"}}} "jsonObject = jsonObject = jsonObject.FomBject"; (e/ou) if (jsonObject.getString ("GroupOp")! = null &&! "". Equals (jsonObject.getString ("GroupOp"))) {if (jsonObject.getString ("GroupOp"). Equals ("ou")) {GroupOp = "ou";}} JsonArray. jsonObject.getjsonArray ("Regras"); // Tranquilidade cada condição para (int z = 0; z <regrasjson.size (); z ++) {objeto t = regrasjson.get (z); JsonObject regrajson = jsonObject.FromObject (t); string field = regejson.getString ("campo"); string op = regrajson.getString ("op"); string data = regrajson.getString ("Data"); String String = "; string = "= '"+dados+"'"; quebra; case "ne": // desigual string = "<> '"+dados+"'"; quebre; case "li": // menos que string = "<'"+dados+"'"; quebra; case "le": // menos que ou igual a string = "<= '"+""> "; quebra"; "; quebrar; case" ge ": // maior ou igual a string ="> = '"+dados+"' "; quebrar; case" bw ": // entre ... {if (data.split (", "). length == 2) {string =" entre '"+data.split (", ") [0]+"' e '" '"+dados+"' "; // manipula quando os erros de dados}} quebram; case" bn ": // não entre ... {if (data.split (", "). length == 2) {string =" não entre '"+data.split (" ") [0]+"' e "") "; // manipula quando os dados de dados}} quebram; case" ew ": // termina com ... string =" como '%"+dados+"' "; quebrar; case" en ": // não termina com ... string =" não como '%"+dados+"' "; '%"+dados+"%' "; quebra; caso" em ": // em {string =" in ("; string [] datas = data.split (", "); para (int i = 0; i <datas.length; i ++) {string+= "'"+datas [i]+"'"; if (i! i ++) {string+= "'"+datas [i]+"'"; if (i! = datas.length-1) {string+= ",";} else {string+= ")";}}} quebra; padrão: op = op = null; system.out.println ("op símbolo erro") // spiMBRON); (Z == regrasjson.size ()-1) {Keys+= ""+Field+""+String+"";} else {Keys+= = ""+Field+""+String+""+GroupOp+"";}}}}} // Ascendente e descendente da Conversion If (Sidx! = Null&! {System.out.println (sidx); keys += "Ordem por" +sidx; system.out.println ("sord =" +sord); if (! Sord.equals ("asc")) {keys += "desc";}}} alllist = fatorMeMemodainStance (). total = (allList.size ()%linhas == 0)? (allList.size ()/linhas): ((allList.size ()/linhas): ((allList.size ()/linhas) +1); int j = 0; int m = (Page-1)**linhas; Int = (Page-1)**ROWS+ROWS+ j <allList.size () && j <n; total); jjson.acmulate ("registros", alllist.size ()); jjson.acumulate ("linhas", jarray); system.out.println (jjson.toString ()); ResponseT.getWriter (). Resposta HttpServletResponse)*/Protegido void DoPost (solicitação HttpServletRequest, HTTPServletResponse Response) lança servletexception, ioexception {// TODO Método Gonerado Stubthis.Doget (Solicitação);}}}―4.3. democangeServlet.java
package com.xeonmic.action;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.Xeonmic.Factory.Factory; importar com.Xeonmic.vo.demo; classe pública DemocangeServlet estende httpServlet {/****/private estático final serialversionUid = 1L;/*** O método doget do servlet. <br>** This method is called when a form has its tag value method equals to get.* * @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 doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, Ioexception {bandeira booleana = false; string opera = request.getParameter ("oper"); switch (oper) {case "del": {string [] ids = request.getParameter ("id"). Split (","); para (int i = 0; i <ids.length; = Integer.ValueOf (ids [i]); flag = factory.getDemodaoiStance (). DODELETE (ID);}} Break; case "add": {int type = Integer.valueOf (request.getParameter ("type"); request.getParameter ("text"); demonstração de demonstração = nova demonstração (-1, tipo, pagamento, nome, texto); flag = factory.getDemodaonstance (). docriate (demonstração); } quebra; case "edit": {int id = integer.valueof (request.getParameter ("id")); int tipo = inteiro.Valueof (request.getParameter ("type")); string (string); demonstração (id, tipo, pagamento, nome, texto); flag = factory.getDemodaoiStance (). Dochange (Demo); } Break; padrão: Break;} System.out.println (Flag);}/*** O método dopost do 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 (solicitação, resposta);}}―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/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id = "webapp_id" versão = "3.1"> <lame-name> jqGrid </sisplay-name> <Verlet> <Verlet-name> DemosServlet </servlet-name> <sutlet-class> com.xeonmic.action.demoservlet </sirlet-class> </sert> <ervlet> <ervlet> ímoch Let </servlet-name> <Verlet-class> com.xeonmic.action.democangeServlet </servlet-class> </servlet> <vagp-mapping> <sutlet-name> Demoservlet </Servlet-Name> <url-Pattern>/DemoServlet </url-tattern> g> <Vertlet-mapping> <dom-name> DemocangeServlet </servlet-name> <rictattern>/DemocangeServlet </url-tattern> </servlet-mapping> <lorde --fil-list> <ldenm-File> index.html </-Welcome> <ldenfile> ÍNDICE. htm </-Welcome-File> <lorde-File> Index.jsp </weld-File> <lorde-File> default.html </weld-File> <lorde-File> default.htm </limk-File> <lorde-File> inad-infault.jsp </-Welcome-File> </Welcome-File>
Neste ponto, a função JQGrid única de tabela foi totalmente implementada. Informe -me se houver algum problema de design no exemplo. O próximo artigo começará a resolver a implementação do design da tabela Master e Slave. Por favor, preste atenção ao site direto do script!