HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Data Grid (datagrid) often need to merge some of the cells. This tutorial will show you how to merge cells in a data grid (datagrid) in.
To Merge Data Grid (datagrid) cell, simply call 'mergeCells' method, passing merge information parameter tells Data Grid (datagrid) How to merge cells. In all merged cells, in addition to the first cell, other cells hide in after the merger.
<Table id = "tt" title = "Merge Cells" style = "width: 550px; height: 250px" url = "data / datagrid_data.json" singleSelect = "true" iconCls = "icon-save" rownumbers = "true" idField = "itemid" pagination = "true"> <Thead frozen = "true"> <Tr> <Th field = "productid" width = "80" formatter = "formatProduct"> Product ID </ th> <Th field = "itemid" width = "100"> Item ID </ th> </ Tr> </ Thead> <Thead> <Tr> <Th colspan = "2"> Price </ th> <Th rowspan = "2" field = "attr1" width = "150"> Attribute </ th> <Th rowspan = "2" field = "status" width = "60" align = "center"> Stauts </ th> </ Tr> <Tr> <Th field = "listprice" width = "80" align = "right"> List Price </ th> <Th field = "unitcost" width = "80" align = "right"> Unit Cost </ th> </ Tr> </ Thead> </ Table>
When the data is loaded, we merge data grid (datagrid) some of the cells, so place the following code in onLoadSuccess callback function.
$ ( '# Tt'). Datagrid ({ onLoadSuccess: function () { var merges = [{ 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, field: 'productid', rowspan: merges [i] .rowspan }); } });