bootstrap table 根據單元格中的數據改變單元格的樣式

在bootstrap-table.js里面列屬性 formatter就是用來格式化單元格的，其默認值是undefined 類型是function，function(value,  row, index), value：該cell本來的值，row：該行數據，index：該行序號（從0開始）；table的標簽屬性是為：data-formatter

可以在bootstrap-table.js直接設置formatter屬性：

formatter: function(value,row,index) {
//通過判斷單元格的值，來格式化單元格，返回的值即為格式化后包含的元素
var a = "";
if(value == "已完成") {
var a = '<span style="color:#00ff00">'+value+'</span>';
}else if(value == "已分派"){
var a = '<span style="color:#0000ff">'+value+'</span>';
}else if(value == "待辦") {
var a = '<span style="color:#FF0000">'+value+'</span>';
}else{
var a = '<span>'+value+'</span>';
}
return a;
}

也可在html里面對單個表格進行設置：

<table data-row-style="statestyle" data-toggle="table" data-url="tables/new_report1.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="id" data-sort-order="desc">
<thead>
<span style="white-space:pre"> </span><tr>
<span style="white-space:pre"> </span><th data-field="state" data-checkbox="true"><span>編號</span></th>
<th data-field="id" data-sortable="true"><span>編號</span></th>
<th data-field="report_man" data-sortable="true"><span>報修人</span></th>
<th data-field="phone_number" data-sortable="true"><span>聯系電話</span></th>
<th data-field="report_date" data-sortable="true"><span>報修時間</span></th>
<th data-field="order_date" data-sortable="true"><span>預約時間</span></th>
<th data-field="allot_time" data-sortable="true"><span>分派時間</span></th>
<th data-field="complete_date" data-sortable="true"><span>完成時間</span></th>
<th data-field="service_unit" data-sortable="true"><span>所屬中心</span></th>
<th data-field="report_state" data-sortable="true" data-formatter="displaycolor"><span>狀態</span></th></span>
</tr>
</thead>
</table>

<script>
function displaycolor(value,row,index) {
var a = "";
if(value == "已完成") {
var a = '<span style="color:#00ff00">'+value+'</span>';
}else if(value == "已分派"){
var a = '<span style="color:#0000ff">'+value+'</span>';
}else if(value == "待辦") {
var a = '<span style="color:#FF0000">'+value+'</span>';
}else{
var a = '<span>'+value+'</span>';
}
return a;
}
</script>

<th data-field="report_state" data-sortable="true" data-formatter="displaycolor"><span>狀態</span></th></span>