在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>??
使用data-formatter="displaycolor"就會執行displaycolor這個方法，來通過判斷該列的值來顯示不同的顏色；
總結
以上是生活随笔為你收集整理的bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
