jQuery EasyUI Data Grid - cellule fusionnée
Data Grid (DataGrid) ont souvent besoin de fusionner certaines des cellules. Ce tutoriel va vous montrer comment fusionner des cellules dans une grille de données (DataGrid) dans.
Pour fusionner la grille de données (DataGrid) cellulaire, il suffit d'appeler la méthode 'MergeCells de, passant de fusion paramètre d'information indique la grille de données (DataGrid) Comment fusionner des cellules. Dans toutes les cellules fusionnées, en plus de la première cellule, d'autres cellules se cachent dans après la fusion.
Création d'une grille de données (DataGrid)
<Table id = "tt" title = "Fusionner les cellules" style = "width: 550px; height: 250px" url = "data / datagrid_data.json" singleSelect = "true" iconCls = "icon-save" rownumbers = "true" = zone ID "itemid" pagination = "true"> <Thead congelé = "true"> <Tr> <Th field = largeur "ProductID" = formatter "80" = "formatProduct"> ID de produit </ th> <Field Th = "itemid" width = "100"> ID de l'article </ th> </ Tr> </ Thead> <Thead> <Tr> <Th colspan = "2"> Prix </ th> <Th rowspan = "2" champ = largeur "de attr1" = "150"> Attribut </ th> <Th rowspan = champ "2" = "status" width = "60" align = "center"> Stauts </ th> </ Tr> <Tr> <Th field = largeur "ListPrice" = "80" align = "right"> Prix </ th> <Field Th = "unitcost" width = "80" align = "right"> Coût unitaire </ th> </ Tr> </ Thead> </ Table>
cellule fusionnée
Lorsque les données sont chargées, nous fusionnons grille de données (DataGrid) certaines des cellules, donc placer le code suivant dans la fonction de rappel onLoadSuccess.
$ ( '# Tt'). Datagrid ({ onLoadSuccess: function () { var fusionne = [{ index: 2, rowspan: 2 }, { index: 5, rowspan: 2 }, { index: 7, rowspan: 2 }]; for (var i = 0; i <merges.length; i ++) $ ( '# Tt'). Datagrid ( 'MergeCells', { Index: fusions [i] .index, terrain: 'productid', rowspan: fusions [i] .rowspan }); } });