jQuery EasyUI Data Grid - cella unita
Data Grid (DataGrid) spesso hanno bisogno di fondere alcune delle cellule. Questo tutorial vi mostrerà come unire celle in una griglia di dati (DataGrid) in.
Per unire griglia di dati cellulare (DataGrid), è sufficiente chiamare il metodo 'MergeCells', passando unire sui parametri dice Data Grid (DataGrid) Come unire le celle. In tutte le celle unite, in aggiunta alla prima cella, altre cellule nascondono dopo la fusione.
La creazione di una griglia di dati (DataGrid)
<Table id = titolo "tt" = "Unisci celle" style = "width: 550px; height: 250px" url = "dati / datagrid_data.json" singleSelect = "true" iconCls = "icona-save" rownumbers = "true" idField = "Itemid" impaginazione = "true"> <Thead congelato = "true"> <Tr> <Th campo = larghezza "ProductID" = "80" formattatore = "formatProduct"> ID prodotto </ th> <Field Th = "Itemid" width = "100"> Articolo ID </ th> </ Tr> </ Thead> <Thead> <Tr> <Th colspan = "2"> Prezzo </ th> <Th rowspan = "2" campo = larghezza "attr1" = "150"> attributo </ th> <Th rowspan = campo "2" = "status" width = "60" align = "center"> Stauts </ th> </ Tr> <Tr> <Th campo = larghezza "prezzo di listino" = "80" align = "right"> Listino </ th> <Field Th = "Costounitario" width = "80" align = "right"> Costo Unità </ th> </ Tr> </ Thead> </ Table>
cella unita
Quando viene caricato i dati, ci fondiamo griglia di dati (DataGrid) alcune delle cellule, in modo da inserire il seguente codice nella funzione di callback onLoadSuccess.
$ ( '# Tt'). DataGrid ({ onLoadSuccess: function () { var fonde = [{ index: 2, rowspan: 2 }, { index: 5, rowspan: 2 }, { index: 7, rowspan: 2 }]; for (var i = 0; i <merges.length; i ++) $ ( '# Tt'). DataGrid ( '', {MergeCells Indice: unioni [i] .Index, campo: 'ProductID', rowspan: unioni [i] .rowspan }); } });