1. Home
  2. jQuery EasyUI danych Siatka - Tworzenie Podrejony

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

jQuery EasyUI danych Siatka - Tworzenie Podrejony

Szczegóły widoku używa siatki danych (DataGrid), użytkownik może rozszerzyć wiersz, aby wyświetlić dodatkowe szczegóły. Wszelkie treści może być załadowany jako detal wierszu, sub-sieci mogą być również ładowane dynamicznie. Ten poradnik pokaże Ci, jak stworzyć sub-siatkę na głównej sieci.

Krok 1: Tworzenie głównej sieci 

<Table id = "DG" style = "width: 700px; height: 250px"
		url = "datagrid22_getdata.php" 
		title = "DataGrid - subgrid"
		singleSelect = "true" fitColumns = "true">
	<THEAD>
		<Tr>
			<Pole Th = "itemid" width = "80"> Item ID </ th>
			<Th pole = "productid" width = "100"> ID produktu </ th>
			<Th pole = "ListPrice" align = "right" width = "80"> Cennik </ th>
			<Th pole = "unitcost" align = "right" width = "80"> </ jednostkowy koszt th>
			<Th pole = "attr1" width = "220"> Atrybut </ th>
			<Pole Th = "status" width = "60" align = "center"> Stan </ th>
		</ Tr>
	</ THEAD>
</ Table>

Krok 2: Ustaw, aby wyświetlić szczegółowy widok podobszarach

W celu wykorzystania szczegółowy widok, proszę pamiętać, aby odwołać się do pliku skryptu widoku w nagłówku strony. 

<Script type = "text / javascript" src = "/try/jeasyui/datagrid-detailview.js"> </ script>

$ ( '# Dg "). DataGrid ({
	Widok: detailview,
	detailFormatter: function (indeksowe, wiersz) {
		Zwrot '<div style = "padding: 2px"> <table class = "DDV"> </ table> </ div>';
	}
	onExpandRow: function (indeksowe, wiersz) {
		var DDV = $ (this) .datagrid ( "getRowDetail ', index) .find (" table.ddv');
		ddv.datagrid ({
			url: '? datagrid22_getdetail.php ItemID =' + row.itemid,
			fitColumns: prawda,
			singleSelect: prawda,
			rownumbers: prawda,
			loadMsg: ''
			wysokość: 'auto',
			kolumny: [[
				{Pole: "idZamówienia", tytuł: 'ID zamówienia, szerokość: 100}
				{Pole: "ilość", tytuł: "Ilość", szerokość: 100}
				{Pole: "CenaJednostkowa", tytuł: "Cena za sztukę, szerokość: 100}
			]]
			onResize: function () {
				$ ( '# Dg ") DataGrid (" fixDetailRowHeight', index) .;
			}
			onLoadSuccess: function () {
				setTimeout (function () {
					$ ( '# Dg ") DataGrid (" fixDetailRowHeight', index) .;
				}, 0);
			}
		});
		$ ( '# Dg ") DataGrid (" fixDetailRowHeight', index) .;
	}
});

Gdy użytkownik kliknie przycisk rozszerzenia ( "+"), zostaną wywołane zdarzenie "onExpandRow '. Tworzymy nową siatkę z trzech podsieci. Gdy dane sub-mesh po załadowaniu powodzeniem lub zmienić rozmiar, należy pamiętać, aby zadzwonić do głównej sieci metodą "fixDetailRowHeight '.

Krok 3: kod po stronie serwera

datagrid22_getdata.php 
$ Result = array ();

to "conn.php ';

$ R = mysql_query ( "select * from pozycji, w której ItemID w (wybierz itemID od obiekcie LineItem)");

$ Items = array ();
while ($ row = mysql_fetch_object ($ rs)) {
	array_push ($ przedmiotów, $ wiersz);
}

echo json_encode ($ przedmiotów);
datagrid22_getdetail.php 
to "conn.php ';

$ Itemid = mysql_real_escape_string ($ _ REQUEST [ 'itemid']);

$ R = mysql_query ( "select * from obiekcie LineItem gdzie ItemID = '$ itemid'");
$ Items = array ();
while ($ row = mysql_fetch_object ($ rs)) {
	array_push ($ przedmiotów, $ wiersz);
}
echo json_encode ($ przedmiotów);

Pobierz przykłady jQuery EasyUI

jeasyui-datagrid-datagrid22.zip

Hot Tutorials

Contact US

jQuery EasyUI danych Siatka - Tworzenie Podrejony
10/30