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
easyui data grid (DataGrid) can create a combination of columns, as follows:
In this example, we use the data to fill the plane data grid (DataGrid) data, and to listprice, unitcost, addr1, status combination of columns in a single column.
In order to create a combination of columns, you should define the data columns grid (datagrid) plug-ins. Each element of the column is to define a set of use rowspan or colspan attributes combined cell.
The following code to achieve the above examples:
<Table id = "tt" title = "Column Group" class = "easyui-datagrid" style = "width: 550px; height: 250px" url = "data / datagrid_data.json" singleSelect = "true" iconCls = "icon-save" rownumbers = "true"> <Thead> <Tr> <Th rowspan = "2" field = "itemid" width = "80"> Item ID </ th> <Th rowspan = "2" field = "productid" width = "80"> Product ID </ th> <Th colspan = "4"> Item Details </ th> </ Tr> <Tr> <Th field = "listprice" width = "80" align = "right"> List Price </ th> <Th field = "unitcost" width = "80" align = "right"> Unit Cost </ th> <Th field = "attr1" width = "100"> Attribute </ th> <Th field = "status" width = "60" align = "center"> Stauts </ th> </ Tr> </ Thead> </ Table>