jQuery EasyUI使用教程之根據條件更換數據網格行背景顏色

<jQuery EasyUI最新試用版免費下載>

本教程將爲你們介紹在某些條件下如何更改數據網格組件的行樣式。當listprice值大於50時，咱們將爲該行設置不一樣的顏色。

查看jQuery EasyUI演示

數據網格的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爲pink（粉紅色），設置文本顏色爲blue（藍色）。

下載EasyUI示例：easyui-datagrid-demo.zip

有興趣的朋友能夠點擊查看更多有關jQuery EasyUI的教程！