Easyui Change the DataGrid row background color according to some conditions

@author YHC

This tutorial will show you how to change the DataGrid component row style according to some conditions, whose listprice value is greater than 50 we will set the behavior in different colors.

View Demo

The Rowstyler function design of the DataGrid allows you to customize the line style, and the following code shows how to change the row style:

<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= "no" >product id</th> <th field=  
            "ListPrice" "Width=" align= "right" >list price</th> <th field= "UnitCost" width= "no" align= "right" >unit cost  
            </th>  
            <th field= "attr1" width= ">Attribute</th> <th field=  
            " status "width=" 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; ';}}}  
;  

As you can see, we set the Background-color (background color) to pink (red) and the text color to blue (blue) according to some conditions;

Download Easyui Sample code: Easyui-datagrid-demo.zip