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.