1. Casa
  2. jQuery EasyUI Data Grid - Custom Paging

Il miglior tutorial jQuery EasyUI Data Grid - Custom Paging Nel 2024, in questo tutorial puoi imparare Scarica esempi jQuery EasyUI,

jQuery EasyUI Data Grid - Custom Paging

Data Grid (DataGrid) costruito un bel schede della funzione, su misura è abbastanza semplice. In questo tutorial, creeremo una griglia di dati (DataGrid), e sulla barra degli strumenti scheda di aggiungere alcuni pulsanti personalizzati.

La creazione di una griglia di dati (DataGrid) 

	<Table id = "tt" title = classe "Load Data" = stile "easyui-DataGrid" = "width: 550px; height: 250px"
			url = "dati / datagrid_data.json"
			iconCls = "icona-save" impaginazione = "true">
		<Thead>
			<Tr>
				<Field Th = "Itemid" width = "80"> ID Articolo </ th>
				<Field Th = larghezza "ProductID" = "80"> ID prodotto </ th>
				<Th campo = larghezza "prezzo di listino" = "80" align = "right"> Listino </ th>
				<Field Th = "Costounitario" width = "80" align = "right"> Costo Unità </ th>
				<Th campo = larghezza "attr1" = "100"> attributo </ th>
				<Field Th = "status" width = "60" align = "center"> Stauts </ th>
			</ Tr>
		</ Thead>
	</ Table>

Ricordate, impostando la proprietà 'impaginazione' è vero, questo genererà una barra degli strumenti di paging.

Barra degli strumenti Paging personalizzato 

	var pager = $ ( '# tt') DataGrid ( 'getPager') ;. // ottenere il pager del DataGrid
	pager.pagination ({
		showPageList: false,
		pulsanti: [{
			iconCls: 'icona-search',
			handler: function () {
				alert ( 'search');
			}
		}, {
			iconCls: 'icona-add',
			handler: function () {
				alert ( 'aggiungere');
			}
		}, {
			iconCls: 'icona-edit',
			handler: function () {
				alert ( 'Modifica');
			}
		}],
		onBeforeRefresh: function () {
			alert ( 'prima di aggiornamento');
			return true;
		}
	});

Come si può vedere, si ottiene la prima griglia di dati (DataGrid) dell'oggetto cercapersone, e poi ri-creare la pagina (impaginazione). Ci nascondiamo l'elenco delle pagine, e aggiungere tre nuovi pulsanti.

Scarica esempi jQuery EasyUI

jeasyui-datagrid-datagrid11.zip

Tutorial caldi

Contattaci

jQuery EasyUI Data Grid - Custom Paging
10/30