jQuery EasyUI Data Grid - creando suddivisioni
Dettagli Vista utilizza la griglia di dati (DataGrid), l'utente può espandere la fila per visualizzare ulteriori dettagli. Ogni contenuto può essere caricato come un dettaglio fila, sub-grid può anche essere caricati in modo dinamico. Questo tutorial vi mostrerà come creare un sub-grid sulla griglia principale.
Passo 1: Creare la griglia principale
<Table id = stile "dg" = "width: 700px; height: 250px" url = "datagrid22_getdata.php" title = "DataGrid - sottogriglia" singleSelect = "true" fitColumns = "true"> <Thead> <Tr> <Field Th = "Itemid" width = "80"> ID Articolo </ th> <Th campo = larghezza "ProductID" = "100"> ID prodotto </ th> <Th campo = "prezzo di listino" align = larghezza "destra" = "80"> Listino </ th> <Field Th = "Costounitario" align = larghezza "destra" = "80"> Costo Unità </ th> <Th campo = larghezza "attr1" = "220"> attributo </ th> <Field Th = "status" width = "60" align = "center"> Stato </ th> </ Tr> </ Thead> </ Table>
Fase 2: Impostare per mostrare una vista dettagliata di suddivisioni
Per poter utilizzare una vista dettagliata, ricordatevi di fare riferimento a un file di script vista nell'intestazione della pagina.
<Tipo di script = "text / javascript" src = "http://www.w3cschool.cc/try/jeasyui/datagrid-detailview.js"> </ script>
$ ( '# Dg'). DataGrid ({ Vista: detailview, detailFormatter: la funzione (indice, riga) { ritorno '<div style = "padding: 2px"> <table class = "ddv"> </ table> </ div>'; }, onExpandRow: la funzione (indice, riga) { var ddv = $ (this) .datagrid ( 'getRowDetail', indice) .find ( 'table.ddv'); ddv.datagrid ({ URL: '? datagrid22_getdetail.php itemid =' + row.itemid, fitColumns: true, singleSelect: vero, rownumbers: true, loadMsg: '', altezza: 'auto', colonne: [[ {Campo: 'OrderID', titolo: 'ID ordine', Larghezza: 100}, {Campo: 'quantità', titolo: 'Quantità', Larghezza: 100}, {Campo: 'UnitPrice', titolo: 'Prezzo al pezzo', Larghezza: 100} ]], onResize: function () { $ ( '# Dg') DataGrid ( 'fixDetailRowHeight', indice) .; }, onLoadSuccess: function () { setTimeout (function () { $ ( '# Dg') DataGrid ( 'fixDetailRowHeight', indice) .; }, 0); } }); $ ( '# Dg') DataGrid ( 'fixDetailRowHeight', indice) .; } });
Quando l'utente fa clic sul pulsante di espansione ( '+'), evento 'onExpandRow' verrà attivato. Creiamo una nuova griglia con tre sottoreti. Quando i dati sub-rete quando vengono caricati correttamente o modificare le dimensioni, si prega di ricordarsi di chiamare la griglia principale metodo di 'fixDetailRowHeight'.
Fase 3: Il codice lato server
$ Risultato = array (); includere 'conn.php'; $ Rs = mysql_query ( "select * from voce dove itemid a (selezionare itemid da LineItem)"); $ Items = array (); while ($ row = mysql_fetch_object ($ rs)) { array_push ($ articoli, $ row); } json_encode echo ($ articoli);
includere 'conn.php'; $ Itemid = mysql_real_escape_string ($ _ richiesta [ 'Itemid']); $ Rs = mysql_query ( "select * from LineItem dove itemid = '$ itemid'"); $ Items = array (); while ($ row = mysql_fetch_object ($ rs)) { array_push ($ articoli, $ row); } json_encode echo ($ articoli);