jQuery EasyUI DataGrid -Configuración condicional del color de fondo de las filas

Este tutorial le mostrará cómo cambiar el estilo de las filas del componente DataGrid (datagrid) según algunas condiciones. Cuando el valor de listprice sea mayor que 50, estableceremos un color diferente para esa fila.

La función rowStyler de DataGrid (datagrid) está diseñada para permitirle personalizar el estilo de las filas. El siguiente código muestra cómo cambiar el estilo de las filas:

    <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;';
            }
        }
    });

Como puede ver, establecemos el background-color (color de fondo) en pink (rosa) y el color de texto en blue (azul) según algunas condiciones.

Descargar ejemplos de jQuery EasyUI

jeasyui-datagrid-datagrid18.zip