jQuery EasyUI 数据网格 -创建列组

easyui 的数据网格（DataGrid）创建列组，如下所示：

Dans cet exemple, nous utilisons des données à plat pour remplir la grille de données (DataGrid), et combinons les colonnes listprice, unitcost, addr1 et status sous une seule colonne.

Pour créer des groupes de colonnes, vous devez définir les données de columns du plugin de grille de données (datagrid). Chaque élément de columns définit un groupe de cellules qui peuvent être combinées à l'aide des attributs rowspan ou colspan.

Le code suivant implémente l'exemple ci-dessus :

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

Télécharger les exemples jQuery EasyUI

jeasyui-datagrid-datagrid9.zip