給bootstrap table設置行列單元格樣式

1、根據單元格或者行內其他單元格的內容，給該單元格設置一定的css樣式

 
columns: [{
 
　　field: 'index',
 
　　title: '序號',
 
　　align:"center",
 
　　formatter:function(value, row, index){
 
　　　　return index+1;
 
　　}，
 
　　cellStyle:{
 
　　　　css:{"background-color":"red"}
 
　　}
 
}]

這樣的代碼可以將序號這個單元格的背景色改成紅色，可以發現無非是給這個json加上一個cellStyle，其內容又是一個json對象，里面對應着key-value形式的數據，從而改變單元格的樣式。
那如何根據其數據內容來改變這個樣式呢，參考上面的formatter的方法，我們可以將cellStyle部分這樣改動一下。

cellStyle:function(value,row,index){
 
　　　if (value==1){
 
　　　　　　return {css:{"background-color":"red"}}
 
　　　}else{
 
　　　　　　return {css:{"background-color":"green"}}
 
　　　}
 
}

 

根據value（該單元格的值），row（該行的數據對象），index（= =就是簡單的表示該列表的第幾個，從0開始）這三個屬性就行條件的判定，只要依舊返回json對象就好了，多個css之間用逗號隔開就行。

2、根據單元格或者行內其他單元格的內容，給該單元格設置一定的css樣式

與剛才的方式類似，只不過這次並不是加在colums內的json數組里，而是和colums平級放置，代碼如下:

rowStyle:function(row,index){
 
　　if (index==1){
 
　　　　return {css:{"background-color":"red"}}
 
　　}else{
 
　　　　return {css:{"background-color":"green"}}
 
　　}
 
},
 
columns: [...]

 

cellStyle可以針對單個單元格的

value進行樣式的設置，rowStyle雖然也可以加入value參數，但是好像沒什么意義。