jQuery EasyUI Data Grid - Creating a combination of columns
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>