jEasyUI 條件設(shè)置行背景顏色

本教程將向您展示如何根據(jù)一些條件改變數(shù)據(jù)網(wǎng)格（datagrid）組件的行樣式。當(dāng) listprice 值大于 50 時(shí)，我們將為該行設(shè)置不同的顏色。

數(shù)據(jù)網(wǎng)格（datagrid）的 rowStyler 函數(shù)的設(shè)計(jì)目的是允許您自定義行樣式。以下代碼展示如何改變行樣式：

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

正如您所看到的，我們根據(jù)一些條件設(shè)置 background-color（背景色）為 pink（粉紅色），設(shè)置文本顏色為 blue（藍(lán)色）。

上一篇：jEasyUI 創(chuàng)建頁腳摘要下一篇：jEasyUI 創(chuàng)建屬性網(wǎng)格