jQuery EasyUI Data Grid - Utilizzando la vista di scorrimento virtuale visualizza i dati di massa
Data Grid (DataGrid) funzione di scorrimento virtuale può essere utilizzato per visualizzare un numero elevato di record, senza paging. Quando la barra di scorrimento verticale per scorrere la griglia di dati (DataGrid) Executive richiesta AJAX per caricare e aggiornare i record esistenti. Aggiornare l'intera linea di condotta è liscia non lampeggia. In questo tutorial, creeremo una griglia di dati (DataGrid), e utilizzare la funzione di scorrimento virtuale per caricare i dati dal server.
La creazione di una griglia di dati (DataGrid)
Data Grid (DataGrid) con funzione di scorrimento virtuale, proprietà 'vista' devono essere impostati su 'ScrollView'. Gli utenti devono scaricare ScrollView esteso dalla griglia di dati (DataGrid), e intestazione di pagina del file ScrollView di riferimento.
<Tipo di script = "text / javascript" src = "http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"> </ script>
<Table id = "tt" class = stile "easyui-DataGrid" = "width: 700px; height: 300px" title = "DataGrid - VirtualScrollView" -opzioni dati = "vista: ScrollView, rownumbers: true, singleSelect: vero, URL: 'datagrid27_getdata.php', autoRowHeight: falso, pageSize: 50 "> <Thead> <Tr> <Th campo = larghezza "inv" = "80"> Inv No </ th> <Th campo = "data" width = "100"> Data </ th> <Th campo = larghezza "nome" = "80"> Nome </ th> <Field Th = larghezza "quantità" = "80" align = "right"> Importo </ th> <Field Th = larghezza "prezzo" = "80" align = "right"> Prezzo </ th> <Field Th = larghezza "costo" = "100" align = "right"> Costo </ th> <Field Th = "note" width = "110"> Nota </ th> </ Tr> </ Thead> </ Table>
Si prega di notare che non abbiamo bisogno di utilizzare la proprietà impaginazione, ma è richiesta l'attributo pageSize, in modo che griglia di richiesta di esecuzione Ajax dati (DataGrid) per il numero specificato di record dal server.
codice lato server
datagrid27_getdata.php
? $ = Pagina isset ($ _ POST [ 'pagina']) intval ($ _ POST [ 'pagina']): 1; $ rows = isset ($ _ POST [ 'file']) intval ($ _ POST [ 'file']) :? 50; $ Items = array (); date_default_timezone_set ( 'UTC'); for ($ i = 1; $ i <= $ file; $ i ++) { Indice $ = $ i + ($ page-1) * $ filari; $ Importo = rand (50,100); $ Prezzo = rand (10000,20000) / 100; $ Articoli [] = array ( 'Inv' => sprintf ( "INV% 04D", $ indice), 'Data' => data ( 'YM-D', tempo () + 24 * 3600 * $ i), 'Nome' => 'Nome'. $ Index, 'Nota' => 'nota'. $ Index, => $ Quantita 'Importo', 'Prezzo' => sprintf ( '% 01.2f', $ prezzo), 'Costo' => sprintf ( '% 01.2f', $ importo * $ prezzo) ); } $ Risultato = array (); $ Result [ 'totale'] = 8000; $ Risultato [ 'file'] = $ articoli; json_encode echo ($ result);