1. Heim
  2. jQuery EasyUI Data Grid - Add-Anfrage

Das beste jQuery EasyUI Data Grid - Add-Anfrage-Tutorial im Jahr 2024. In diesem Tutorial können Sie Download von jQuery EasyUI Beispiele, lernen

jQuery EasyUI Data Grid - Add-Anfrage

Dieses Beispiel zeigt, wie Daten aus der Datenbank zu erhalten, und zeigt sie in der Datentabelle (Datagrid) in. basierend auf vom Benutzer eingegebenen Such Schlüsselwörter Dann wird gezeigt, wie die Suchergebnisse angezeigt werden.

Erstellen eines Data Grid (Datagrid)

Erstellen Sie eine Paging-Funktion mit dem Datenraster (Datagrid) und fügen Symbolleisten zu. 

	<Table id = "tt" class = "easyui-Datagrid" style = "width: 600px; height: 250px"
			url = "datagrid24_getdata.php" Symbolleiste = "# tb"
			title = "Load Data" iconCls = "icon-save"
			rownumbers = "true" Paginierung = "true">
		<Thead>
			<Tr>
				<Th Feld = "itemid" width = "80"> Item ID </ th>
				<Th Feld = "productid" width = "80"> Product ID </ th>
				<Th Feld = "gelisteter" width = "80" align = "right"> Listenpreis </ th>
				<Th Feld = "Unitcost" width = "80" align = "right"> Kosten pro Einheit </ th>
				<Th Feld = "attr1" width = "150"> Attribut </ th>
				<Th field = "status" width = "60" align = "center"> Stauts </ th>
			</ Tr>
		</ Thead>
	</ Table>

Symbolleisten sind wie folgt definiert: 

	<Div id = "tb" style = "padding: 3px">
		<Span> Item ID: </ span>
		<Input id = "itemid" style = "line-height: 26px; border: 1px solid #ccc">
		<Span> Product ID: </ span>
		<Input id = "productid" style = "line-height: 26px; border: 1px solid #ccc">
		<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()"> Suche </a>
	</ Div>

Wenn ein Benutzer eine Abfrage Wert ein und drücken Schaltfläche Abfrage eingibt, wird 'doSearch' Funktion aufgerufen werden: 

	funktionieren doSearch () {
		$ ( '# Tt'). Datagrid ( 'load', {
			itemid: $ ( '# itemid') val () ,.
			productid: $ ( '# productid') val ().
		});
	}

Der obige Code ruft die "Last" Methode, um die neue Datengitter (Datagrid) Daten zu laden. Wir müssen passieren 'itemid' und 'productid Argumente an den Server.

Server-Side-Code 

	schließen 'conn.php';
	
	? $ Page = isset ($ _ POST [ 'Seite']) intval ($ _ POST [ 'Seite']): 1;
	? $ Rows = isset ($ _ POST [ 'Reihen']) intval ($ _ POST [ 'Reihen']): 10;
	? $ Itemid = isset ($ _ POST [ 'itemid']) mysql_real_escape_string ($ _ POST [ 'itemid']): '';
	? $ ProductId = isset ($ _ POST [ 'productid']) mysql_real_escape_string ($ _ POST [ 'productid']): '';
	
	Offset = ($ page-1) $ * $ Reihen;
	
	$ Ergebnis = array ();
	
	$ Wo = "itemid wie '$ itemid%' und ProductId wie '$ productid%'";
	$ Rs = mysql_query ( "SELECT COUNT (*) von Punkt, wo" $ wo.);
	$ Row = mysql_fetch_row ($ rs);
	Ergebnis $ [ "total"] = $ row [0];
	
	$ Rs = mysql_query ( "select * from Punkt, wo" $, wo de "$ offset, $ Reihen begrenzen");
	
	$ Artikel = array ();
	while ($ row = mysql_fetch_object ($ rs)) {
		array_push ($ items, $ row);
	}
	Ergebnis $ [ "Reihen"] = Artikel $;
	
	Echo json_encode ($ result);

Download von jQuery EasyUI Beispiele

jeasyui-datagrid-datagrid24.zip

Hot Tutorials

Kontaktiere uns

jQuery EasyUI Data Grid - Add-Anfrage
10/30