Detaillierte Erklärung der JQuery-Datagrid-Abfrage

Inhaltsverzeichnis

Fügen Sie dem Tree-Element Code hinzu;

1. Hinterlegen Sie die entsprechende Informationsseite rechts (userManage.jsp)
2. Klicken Sie auf das Menü links, um die entsprechende Seite anzuzeigen
3. Anzeigeschnittstelle

2. Daten erstellen (Datenbankdaten verwenden)

1. Entität, DAO, Web
2. Seitennummerierung hinzufügen
3. Kapselung von wiederholtem Code (Kettenprogrammierung)
4. Abfragebedingungen hinzufügen

Zusammenfassen

Fügen Sie dem Tree-Element Code hinzu;

1. Klicken Sie auf das Menü links. Die Registerkarte rechts zeigt relevante Informationen (tote Daten) an.

1. Hinterlegen Sie die entsprechende Informationsseite rechts (userManage.jsp)

①. Verwenden Sie Javascript zum Laden der Daten.

<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/book.js"></script>

②, Versteckte Domäne (geben Sie book.jsp den vollständigen Pfadnamen)

<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">

<%@ Seitensprache="java" Inhaltstyp="text/html; Zeichensatz=UTF-8"
    Seitenkodierung="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=UTF-8">
<title>Seite „Bücher speichern“</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>   
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/book.js"></script>
</Kopf>
<Text>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<Tabelle id="dg"></Tabelle> 
</body>
</html>

2. Klicken Sie auf das Menü links, um die entsprechende Seite anzuzeigen

①, datagrid_data1.json (Daten)

{"Gesamt":28,"Zeilen":[
	{"productid":"FI-SW-01","productname":"Koi","unitcost":10,00,"status":"P","listprice":36,50,"attr1":"Groß","itemid":"EST-1"},
	{"productid":"K9-DL-01","productname":"Dalmatiner","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Gefleckte erwachsene Hündin","itemid":"EST-10"},
	{"productid":"RP-SN-01","productname":"Klapperschlange","unitcost":12.00,"status":"P","listprice":38.50,"attr1":"Giftlos","itemid":"EST-11"},
	{"productid":"RP-SN-01","productname":"Klapperschlange","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Ohne Klapperschlange","itemid":"EST-12"},
	{"productid":"RP-LI-02","productname":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Grün Erwachsene","itemid":"EST-13"},
	{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Schwanzlos","itemid":"EST-14"},
	{"productid":"FL-DSH-01","productname":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"Mit Schwanz","itemid":"EST-15"},
	{"productid":"FL-DLH-02","productname":"Persisch","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"Erwachsene Frauen","itemid":"EST-16"},
	{"productid":"FL-DLH-02","productname":"Persisch","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Erwachsener Mann","itemid":"EST-17"},
	{"productid":"AV-CB-01","productname":"Amazonaspapagei","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Erwachsener Mann","itemid":"EST-18"}
]}

②, index.js (die Seitenadresse, die rechts die relevanten Informationen liefert)

③. Verwenden Sie File, um JSON-Daten aus WebContent zu verarbeiten

Holen Sie sich den vollständigen Pfadnamen basierend auf dem ID-Inhalt

URL: $("#ctx").val()+'/datagrid_data1.json'

$(Funktion() {
	$('#dg').datagrid({    
	    URL: $("#ctx").val()+'/datagrid_data1.json',    
	    Spalten:[[    
	        {Feld:'Produkt-ID',Titel:'ID',Breite:100},    
	        {Feld:'Produktname',Titel:'Name',Breite:100},    
	        {Feld:'Stückpreis',Titel:'Preis',Breite:100,Ausrichtung:'rechts'}    
	    ]]    
	}); 
})

3. Anzeigeschnittstelle

2. Daten erstellen (Datenbankdaten verwenden)

Personaldaten werden in der Datenbank gepflegt und an die ausgewählte Buchtabelle gebunden

1. Entität, DAO, Web

① Entitätsklasse

Paket com.mwy.entity;
öffentliche Klasse Buch {
	privates int-Gebot;
	privater String bname;
	privater Float-Preis;
	öffentliche int getBid() {
		Rückgebot;
	}
	öffentliche void setBid(int bid) {
		this.bid = Gebot;
	}
	öffentliche Zeichenfolge getBname() {
		bname zurückgeben;
	}
	öffentliche void setBname(String bname) {
		dies.bname = bname;
	}
	öffentliches Float getPrice() {
		Rücksendepreis;
	}
	öffentliche void setPrice(float preis) {
		dieser.Preis = Preis;
	}
	@Überschreiben
	öffentliche Zeichenfolge toString() {
		returniere "Buch [bid=" + bid + ", bname=" + bname + ", price=" + price + "]";
	}
	öffentliches Buch(int bid, String bname, float price) {
		super();
		this.bid = Gebot;
		dies.bname = bname;
		dieser.Preis = Preis;
	}
	öffentliches Buch() {
		// TODO Automatisch generierter Konstruktor-Stub
	}
}

②, BookDao erbt BaseDao <Book>

Paket com.mwy.dao;
importiere java.util.HashMap;
importiere java.util.List;
importiere java.util.Map;
importiere com.fasterxml.jackson.databind.ObjectMapper;
importiere com.mwy.entity.Book;
importiere com.zking.util.BaseDao;
importiere com.zking.util.PageBean;
importiere com.zking.util.StringUtils;
öffentliche Klasse BookDao erweitert BaseDao<Book>{
	öffentliche Liste<Buch> Liste(Buch Buch, PageBean pageBean) löst Exception aus {
		Zeichenfolge sql="Wählen Sie * aus t_mvc_book, wobei 1=1";
		Zeichenfolge bname=book.getBname();
		wenn(StringUtils.isNotBlank(bname)) {
			sql+=" und bname wie '%"+bname+"%'";
		}
		gibt super.executeQuery(sql, Book.class, pageBean) zurück;
	}
}

③. BookAction erbt ActionSupport, um ModelDriver <Book> zu implementieren.

Paket com.mwy.web;
importiere java.util.HashMap;
importiere java.util.List;
importiere java.util.Map;
importiere javax.servlet.http.HttpServletRequest;
importiere javax.servlet.http.HttpServletResponse;
importiere com.fasterxml.jackson.databind.ObjectMapper;
importiere com.mwy.dao.BookDao;
importiere com.mwy.entity.Book;
importiere com.zking.framework.ActionSupport;
importiere com.zking.framework.ModelDriver;
importiere com.zking.util.PageBean;
importiere com.zking.util.ResponseUtil;
öffentliche Klasse BookAction erweitert ActionSupport implementiert ModelDriver<Book>{
	privates Buch Buch=neues Buch();
	privates BookDao bd=neues BookDao();
	öffentliches String-Datagrid (HttpServletRequest req, HttpServletResponse resp) löst Ausnahme aus {
		//Wählen Sie den Inhalt aus und versuchen Sie: Strg+Umschalt+Z
		BookDao bd = neues BookDao();
		PageBean pageBean=neue PageBean();
        pageBean.setRequest(req);
        //Muss später geändert werden List<Book> list = bd.list(new Book(),pageBean);
		ObjectMapper om=neuer ObjectMapper();
		//JSON-Array// System.out.println(om.writeValueAsString(Liste));
		//In JSON-Objekt konvertieren Map<String, Object> map=new HashMap<String, Object>();
		map.put("gesamt", pageBean.getTotal());
		map.put("Zeilen", Liste);
		ResponseUtil.writeJson(resp, map);
		System.out.println(om.writeValueAsString(map));
		gibt null zurück;
	}
	@Überschreiben
	öffentliches Buch getModel() {
		// TODO Automatisch generierter Methodenstummel
		Buch zurückgeben;
	};
}

④、Konfigurieren Sie mvc2.xml

<?xml version="1.0" encoding="UTF-8"?>
<Konfiguration>
	<Aktionspfad="/Menü" Typ="com.mwy.web.MenuAction">
	</Aktion>
	<Aktionspfad="/Buch" Typ="com.mwy.web.BookAction">
	</Aktion>
</config>

⑤. Verwenden Sie File, um JSON-Daten aus WebContent zu verarbeiten

$(Funktion() {
	$('#dg').datagrid({    
	    url:$("#ctx").val()+'/book.action?methodName=datagrid',    
	    Spalten:[[    
	        {Feld:'Gebot',Titel:'ID',Breite:100},    
	        {Feld:'bname',Titel:'Name',Breite:100},    
	        {Feld:'Preis',Titel:'Preis',Breite:100,Ausrichtung:'rechts'}    
	    ]]    
	}); 
})

⑥. Holen Sie sich die Schnittstelle

2. Seitennummerierung hinzufügen

①. Finden Sie die entsprechenden Attribute in der API

②. Fügen Sie Attribute in book.js hinzu

③、Schnittstelle nach dem Paging

④, fitColumns:true, fügen Sie dieses Attribut hinzu, um die Spalte zu füllen;

3. Kapselung von wiederholtem Code (Kettenprogrammierung)

① Verpackung

Paket com.zking.util;
importiere java.util.HashMap;
öffentliche Klasse R erweitert HashMap{
	öffentliche R-Daten (String-Schlüssel, Objektwert) {
		this.put(Schlüssel, Wert);
		gib dies zurück;
	}
}

②、BookAction-Code ändern

//In JSON-Objekt konvertieren
Map<String, Objekt> map=neue HashMap<String, Objekt>();
map.put("gesamt", pageBean.getTotal());
map.put("Zeilen", Liste);
ResponseUtil.writeJson(resp, map);

Zu:

ResponseUtil.writeJson(resp, neues R().data("total", pageBean.getTotal()).data("Zeilen", Liste));

4. Abfragebedingungen hinzufügen

①. Suchen Sie das entsprechende Attribut in der API: Symbolleiste

②. Fügen Sie auf der Seite userManage.jsp Folgendes hinzu:

<div id="tb">
    <input class="easyui-textbox" id="bname" name="bname" style="width:20%;padding-left: 10px" data-options="label:'Buchtitel:',required:true">
    <a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">Suche</a>
</div>

③. Fügen Sie in book.js hinzu:

$("#btn-search").klick(function(){
$('#dg').datagrid('laden', {
bname: $("#bname").val()
});
});

Schließlich wird book.js gerendert

$(Funktion() {
	/**
	 * Klicken Sie in easyUI auf die nächste Seite, vorherige Seite usw., um den Standardseiteneffekt zu erhalten. Die Parameter sind Seite \ Zeilen
	 * Bootstrap, Klicken auf die nächste Seite, vorherige Seite usw. Standard-Paging-Effekt, der Parameter ist page_offset
	 */
	$('#dg').datagrid({    
	    url:$("#ctx").val()+'/book.action?methodName=datagrid',    
	    Seitennummerierung:true,
	    Spaltenanpassung:true,
	    Symbolleiste: '#tb',
	    Spalten:[[    
	        {Feld:'Gebot',Titel:'ID',Breite:100},    
	        {Feld:'bname',Titel:'Name',Breite:100},    
	        {Feld:'Preis',Titel:'Preis',Breite:100,Ausrichtung:'rechts'}    
	    ]]    
	}); 
	$("#btn-search").klick(function(){
	   $('#dg').datagrid('laden', {    
		   bname: $("#bname").val()  
	   });  
	});
})

④. Ändern Sie den BookAction-Schnittstellencode

Wille

Liste<Buch> Liste = bd.list(neues Buch(),pageBean);

Geändert zu

Liste<Buch> Liste = bd.list(Buch,pageBean);

⑤. Endgültige Schnittstelle

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!

Das könnte Sie auch interessieren: