在bootstrap-table.js里面列屬性 formatter就是用來格式化單元格的，其默認值是undefined 類型是function，function(value, ?row, index), value：該cell本來的值，row：該行數據，index：該行序號（從0開始）；table的標簽屬性是為：data-formatter
可以再bootstrap-table.js直接設置formatter屬性：
[javascript]?view plaincopy 
- 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里面對單個表格進行設置：
[html]?view plaincopy
- <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>??
[html]?view plaincopy
- <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>??
在
[html]?view plaincopy
- <th?data-field="report_state"?data-sortable="true"?data-formatter="displaycolor"><span>狀態</span></th></span>??
)
