jQuery EasyUI danych Siatka - Niestandardowe stronicowania

Siatka danych (DataGrid) zbudowany ładne karty funkcji, zwyczaj jest dość prosta. W tym tutorialu, będziemy tworzyć siatkę danych (datagrid), a na pasku narzędzi zakładki dodać kilka przycisków niestandardowych.

Tworzenie siatki danych (DataGrid)

	<Id Tabela = "tt" title = class "Dane obciążenia" = "easyui-DataGrid" style = "width: 550px; height: 250px"
			url = "data / datagrid_data.json"
			iconCls = "icon-save" 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 = "100"> Atrybut </ th>
				<Pole Th = "status" width = "60" align = "center"> Stauts </ th>
			</ Tr>
		</ THEAD>
	</ Table>

Pamiętaj, że ustawienie "stronicowanie" własność jest prawdą, będzie to generować pasek stronicowania.

Niestandardowe stronicowania Toolbar

	var pager = $ ( '# tt') DataGrid ( "getPager ') ;. // dostać pager z DataGrid
	pager.pagination ({
		showPageList: false,
		przyciski: [{
			iconCls: "ikona-search"
			Handler: function () {
				alert ( 'szukaj');
			}
		}, {
			iconCls: "icon-add"
			Handler: function () {
				alert ( "add");
			}
		}, {
			iconCls: "ikona-edit"
			Handler: function () {
				alert ( 'edit');
			}
		}],
		onBeforeRefresh: function () {
			alert ( "przed odświeżania ');
			return true;
		}
	});

Jak widać, mamy pierwsze siatki danych (datagrid) obiektu pagera, a następnie ponownie utworzyć stronę (stronicowania). Mamy ukryć listę stron i dodać trzy nowe przyciski.

Pobierz przykłady jQuery EasyUI

jeasyui-datagrid-datagrid11.zip