jQuery EasyUI Data Grid - Merge Cells

Data grid (datagrid) often need to merge some cells. This tutorial will show you how to merge cells in datagrid.

In order to merge data grid (datagrid) cells, simply call the 'mergeCells' method, and pass in the merge information parameters, tell the data grid (datagrid) how to merge cells. Among all merged cells, except the first cell, the other cells are hidden after merging.

Create a data grid (DataGrid)

    <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>

Merge Cells

When the data is loaded, we merge some cells in the datagrid, so put the following code in the 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
                });
        }
    });