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

一、根據單元格或者行內其餘單元格的內容，給該單元格設置必定的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之間用逗號隔開就行。

二、根據單元格或者行內其餘單元格的內容，給該單元格設置必定的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參數，可是好像沒什麼意義。