Najlepszy samouczek jQuery EasyUI danych Siatka - Dodaj zapytanie W 2024 r. W tym samouczku możesz dowiedzieć się Pobierz przykłady jQuery EasyUI,

jQuery EasyUI danych Siatka - Dodaj zapytanie

Ten przykład pokazuje, jak uzyskać dane z bazy danych i wyświetla je w sieci danych (DataGrid) w. Potem pokazuje, jak wyświetlać wyniki wyszukiwania na podstawie wprowadzonych przez użytkownika słów kluczowych wyszukiwania.

Tworzenie siatki danych (DataGrid)

Tworzenie funkcji stronicowania z siecią danych (DataGrid), paski narzędzi i dodawać do niego.

	<Table id = class "tt" = "easyui-DataGrid" style = "width: 600px; height: 250px"
			url = "datagrid24_getdata.php" toolbar = "# tb"
			title = "data obciążenia" iconCls = "icon-save"
			rownumbers = "true" stronicowanie = "true">
		<THEAD>
			<Tr>
				<Pole Th = "itemid" width = "80"> Item ID </ th>
				<Pole Th = "productid" width = "80"> ID produktu </ th>
				<Th pole = "ListPrice" width = "80" align = "right"> Cennik </ th>
				<Pole Th = "unitcost" width = "80" align = "right"> jednostkowy koszt </ th>
				<Th pole = "attr1" width = "150"> Atrybut </ th>
				<Pole Th = "status" width = "60" align = "center"> Stauts </ th>
			</ Tr>
		</ THEAD>
	</ Table>

Paski narzędzi są zdefiniowane w następujący sposób:

	<Div id = "tb" style = "padding: 3px">
		<Span> ID produktu: </ span>
		<Wejście id = "ItemID" style = "line-height: 26px; border: 1px solid #ccc">
		<Span> ID produktu: </ span>
		<Wejście id = "productid" style = "line-height: 26px; border: 1px solid #ccc">
		<a href="#" class="easyui-linkbutton" plain="true" onclick="doSearch()"> Szukaj </a>
	</ Div>

Gdy użytkownik wprowadzi wartość zapytań i naciśnij przycisk Query, funkcja "doSearch 'nazywa się:

	funkcjonować doSearch () {
		$ ( '# Tt "). DataGrid (" obciążenie ", {
			itemid: $ ( '# itemid ") val () ,.
			productid: $ ( '# productid ") val ().
		});
	}

Powyższy kod wywołuje "obciążenie" metody, aby załadować nowe siatki danych (datagrid) danych. Musimy zdać 'itemID "i" ProductId "argumentów na serwerze.

Kod po stronie serwera

	to "conn.php ';
	
	? $ Page = isset ($ _ POST [ 'page']) intval ($ _ POST [ 'page']): 1;
	? $ Rows = isset ($ _ POST [ 'Wiersze']) intval ($ _ POST [ 'Wiersze']): 10;
	? $ Itemid = isset ($ _ POST [ 'itemid']) mysql_real_escape_string ($ _ POST [ 'itemid']): '';
	? $ ProductId = isset ($ _ POST [ 'productid']) mysql_real_escape_string ($ _ POST [ 'productid']): '';
	
	$ Offset = ($ page-1) * $ wiersze;
	
	$ Result = array ();
	
	Gdzie $ = "itemid jak '%' $ itemid i ProductId jak '$ ProductId%'";
	$ R = mysql_query ( "select count (*) z pozycji, w której" $ gdzie.);
	$ Row = mysql_fetch_row ($ rs);
	$ Result [ "total"] = $ row [0];
	
	$ R = mysql_query ( "select * from punkcie gdzie" $ gdzie "ograniczyć $, $ offsetu wiersze" pl);
	
	$ Items = array ();
	while ($ row = mysql_fetch_object ($ rs)) {
		array_push ($ przedmiotów, $ wiersz);
	}
	$ Result [ "wiersze"] = $ przedmiotów;
	
	echo json_encode ($ result);

Pobierz przykłady jQuery EasyUI

jeasyui-datagrid-datagrid24.zip

jQuery EasyUI danych Siatka - Dodaj zapytanie
10/30