jQuery EasyUI DataGrid -Formatear columnas

El siguiente ejemplo formatea los datos de las columnas en el DataGrid de easyui, y utiliza un formatter personalizado para las columnas: si el precio es menor que 20, el texto se vuelve rojo.

Para formatear una columna de DataGrid, necesitamos configurar la propiedad formatter, que es una función. Esta función de formato contiene tres parámetros:

• value: el valor del campo correspondiente a la columna actual.
• row: los datos del registro de la fila actual.
• index: el índice de la fila actual.

Crear un DataGrid

    <table id="tt" title="Formatting Columns" class="easyui-datagrid" style="width:550px;height:250px"
            url="data/datagrid_data.json"
            singleSelect="true" iconCls="icon-save">
        <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" formatter="formatPrice">List Price</th>
                <th field="unitcost" width="80" align="right">Unit Cost</th>
                <th field="attr1" width="100">Attribute</th>
                <th field="status" width="60" align="center">Stauts</th>
            </tr>
        </thead>
    </table>

Ten en cuenta que el campo 'listprice' tiene una propiedad 'formatter' que se utiliza para especificar la función de formato.

Escribir la función de formato

    function formatPrice(val,row){
        if (val < 20){
            return '<span style="color:red;">('+val+')</span>';
        } else {
            return val;
        }
    }

Descargar ejemplos de jQuery EasyUI

jeasyui-datagrid-datagrid7.zip