jQuery EasyUI DataGrid -Crear combinación de columnas

El DataGrid de easyui puede crear combinaciones de columnas, como se muestra a continuación:

En este ejemplo, usamos datos planos para llenar los datos del DataGrid y combinamos las columnas listprice, unitcost, addr1, status en una sola columna.

Para crear combinaciones de columnas, debe definir los datos de columns del complemento (plugin) datagrid. Cada elemento de columna define un grupo de celdas que se pueden combinar usando los atributos rowspan o colspan.

El siguiente código implementa el ejemplo anterior:

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

Descargar el ejemplo de jQuery EasyUI

jeasyui-datagrid-datagrid9.zip