jQuery EasyUI DataGrid -Условная установка цвета фона строки

В этом руководстве показано, как изменять стиль строки компонента DataGrid (datagrid) в зависимости от некоторых условий. Когда значение listprice больше 50, мы установим другой цвет для этой строки.

Функция rowStyler компонента DataGrid предназначена для того, чтобы позволить вам настраивать стили строк. Следующий код демонстрирует, как изменить стиль строки:

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

Как видите, мы устанавливаем background-color в pink, а цвет текста — в blue в зависимости от некоторых условий.

Скачать примеры jQuery EasyUI

jeasyui-datagrid-datagrid18.zip