Le meilleur didacticiel jQuery EasyUI Data Grid - Format des colonnes en 2024, dans ce didacticiel, vous pouvez apprendre Télécharger exemples jQuery EasyUI,
Les exemples suivants sont formatés dans les données de colonne DataGrid easyui intérieur, et utilisent la colonne personnalisée formatter, si le prix est inférieur à 20 texte devient rouge.
Pour formater une colonne grille de données (DataGrid), nous avons besoin de définir l'attribut formatter, qui est une fonction. La fonction de formatage contient trois paramètres:
<Table id = "tt" title = "Colonnes de mise en forme" class = le style "easyui-datagrid" = "width: 550px; height: 250px" url = "data / datagrid_data.json" singleSelect = "true" iconCls = "icon-save"> <Thead> <Tr> <Field Th = "itemid" width = "80"> ID de l'article </ th> <Field Th = "ProductID" width = "80"> ID de produit </ th> <Th field = largeur "ListPrice" = "80" align = "right" formatter = "formatPrice"> Prix </ th> <Field Th = "unitcost" width = "80" align = "right"> Coût unitaire </ th> <Field Th = largeur "de attr1" = "100"> Attribut </ th> <Field Th = "status" width = "60" align = "center"> Stauts </ th> </ Tr> </ Thead> </ Table>
S'il vous plaît noter que, 'Prix officiel' champ a un attribut 'formatter', qui indique les fonctions de formatage.
fonction formatPrice (val, rangée) { if (val <20) { return '<span style = "color: red;"> (' + val + ') </ span>'; } Else { retour val; } }