jQuery EasyUI Data Grid - fusionierte Zelle
Data Grid (Datagrid) müssen oft einige der Zellen zu verschmelzen. Dieses Tutorial zeigt Ihnen, wie Zellen in einem Datenraster (Datagrid) in zu verschmelzen.
Data Grid (Datagrid) Zelle zu verbinden, einfach 'MergeCells' nennen Methode, fusionieren Informationen Parameter übergeben erzählt Data Grid (Datagrid) Wie Zellen zu verschmelzen. In allen fusionierten Zellen, zusätzlich zu der ersten Zelle verstecken anderen Zellen nach der Fusion.
Erstellen eines Data Grid (Datagrid)
<Table id = "tt" title = "Zellen verbinden" style = "width: 550px; height: 250px" url = "data / datagrid_data.json" singleSelect = "true" iconCls = "icon-save" rownumbers = "true" idField = "itemid" Paginierung = "true"> <Thead gefroren = "true"> <Tr> <Th Feld = "productid" width = "80" Formatter = "formatProduct"> Product ID </ th> <Th Feld = "itemid" width = "100"> Item ID </ th> </ Tr> </ Thead> <Thead> <Tr> <Th colspan = "2"> Preis </ th> <Th RowSpan = "2" Feld = "attr1" width = "150"> Attribut </ th> <Th RowSpan = "2" field = "status" width = "60" align = "center"> Stauts </ th> </ Tr> <Tr> <Th Feld = "gelisteter" width = "80" align = "right"> Listenpreis </ th> <Th Feld = "Unitcost" width = "80" align = "right"> Kosten pro Einheit </ th> </ Tr> </ Thead> </ Table>
Zusammengeführt Zelle
Wenn die Daten geladen wird, verschmelzen wir Datengitter (Datagrid) einige der Zellen, so dass den folgenden Code in onLoadSuccess Callback-Funktion.
$ ( '# Tt'). Datagrid ({ onLoadSuccess: function () { var verschmilzt = [{ Index: 2, rowspan: 2 }, { Index: 5, rowspan: 2 }, { Index: 7, rowspan: 2 }]; for (var i = 0; i <merges.length; i ++) $ ( '# Tt'). Datagrid ( 'MergeCells', { Index: Merges [i] .index, Feld: 'productid', rowspan: Merges [i] .rowspan }); } });