jQuery EasyUI DataGrid -Définition conditionnelle de la couleur d'arrière-plan des lignes

Ce tutoriel vous montrera comment modifier le style de ligne du composant DataGrid (datagrid) en fonction de certaines conditions. Lorsque la valeur de listprice est supérieure à 50, nous définirons une couleur différente pour cette ligne.

La fonction rowStyler du DataGrid est conçue pour vous permettre de personnaliser les styles de ligne. Le code suivant montre comment modifier le style de ligne :

    <table id="tt" title="DataGrid" style="width:600px;height:250px"
            url="data/datagrid_data.json"
            singleSelect="true" fitColumns="true">
        <thead>
            <tr>
                <th field="itemid" width="80">Item ID</th>
                <th field="productid" width="80">Product ID</th>
                <th field="listprice" width="80" align="right">List Price</th>
                <th field="unitcost" width="80" align="right">Unit Cost</th>
                <th field="attr1" width="150">Attribute</th>
                <th field="status" width="60" align="center">Stauts</th>
            </tr>
        </thead>
    </table>

    $('#tt').datagrid({
        rowStyler:function(index,row){
            if (row.listprice>50){
                return 'background-color:pink;color:blue;font-weight:bold;';
            }
        }
    });

Comme vous pouvez le voir, nous définissons la background-color sur rose et la couleur du texte sur bleu en fonction de certaines conditions.

Télécharger les exemples jQuery EasyUI

jeasyui-datagrid-datagrid18.zip