改变数据表格中某些行背景颜色

使用教程 » 改变数据表格中某些行背景颜色

本教程将向您展示如何在某些条件下更改datagrid组件的行样式。 我们将把listprice值大于50的行设置为不同的颜色。

datagrid的rowStyler函数允许您定制行样式。下面的代码展示了如何更改行样式:

<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设置为粉色，将text color设置为蓝色.

下载 EasyUI 实例: