jQuery EasyUI Data Grid - conditions fixées ligne couleur de fond
Ce tutoriel va vous montrer comment changer l'ensemble des données Style de ligne de grille (DataGrid) selon un certain nombre de conditions. Lorsque la valeur ListPrice est supérieur à 50, nous allons définir une couleur différente pour la ligne.
Conçu pour la grille de données (DataGrid) de la fonction rowStyler est de vous permettre de personnaliser les styles de ligne. Le code suivant montre comment changer le style de ligne:
<Table id = "tt" title = le style "DataGrid" = "width: 600px; height: 250px" url = "data / datagrid_data.json" singleSelect = "true" fitColumns = "true"> <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"> Prix </ th> <Field Th = "unitcost" width = "80" align = "right"> Coût unitaire </ th> <Field Th = largeur "de attr1" = "150"> Attribut </ th> <Field Th = "status" width = "60" align = "center"> Stauts </ th> </ Tr> </ Thead> </ Table>
$ ( '# Tt'). Datagrid ({ rowStyler: function (index, ligne) { if (row.listprice> 50) { «Background-color: rose; color: blue; font-weight: bold;" retour; } } });
Comme vous pouvez le voir, nous avons mis la couleur de fond (couleur de fond), selon certaines conditions pour le rose (rose), définir la couleur du texte en bleu (bleu).