jQuery EasyUI DataGrid -Combinar celdas

La cuadrícula de datos (datagrid) a menudo necesita combinar algunas celdas. Este tutorial le mostrará cómo combinar celdas en la cuadrícula de datos (datagrid).

Para combinar celdas de la cuadrícula de datos (datagrid), simplemente llame al método 'mergeCells' y pase el parámetro con la información de combinación, indicándole a la cuadrícula de datos (datagrid) cómo combinar las celdas. En todas las celdas combinadas, excepto la primera, las demás celdas quedan ocultas después de la combinación.

Crear la cuadrícula de datos (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>

Combinar celdas

Después de que los datos se carguen, combinamos algunas celdas de la cuadrícula de datos (datagrid), por lo tanto coloque el siguiente código en la función de devolución de llamada onLoadSuccess.

    $('#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
                });
        }
    });

Descargar ejemplos de jQuery EasyUI

jeasyui-datagrid-datagrid13.zip