生活随笔
收集整理的這篇文章主要介紹了
bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
在bootstrap-table.js里面列屬性 formatter就是用來(lái)格式化單元格的，其默認(rèn)值是undefined 類型是function，function(value, ?row, index), value：該cell本來(lái)的值，row：該行數(shù)據(jù)，index：該行序號(hào)（從0開始）；table的標(biāo)簽屬性是為：data-formatter
可以再bootstrap-table.js直接設(shè)置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里面對(duì)單個(gè)表格進(jìn)行設(shè)置：
[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>編號(hào)</span></th>?? ????????????????<th?data-field="id"?data-sortable="true"><span>編號(hào)</span></th>?? ????????????????<th?data-field="report_man"?data-sortable="true"><span>報(bào)修人</span></th>?? ????????????????<th?data-field="phone_number"?data-sortable="true"><span>聯(lián)系電話</span></th>?? ????????????????<th?data-field="report_date"?data-sortable="true"><span>報(bào)修時(shí)間</span></th>?? ????????????????<th?data-field="order_date"?data-sortable="true"><span>預(yù)約時(shí)間</span></th>?? ????????????????<th?data-field="allot_time"?data-sortable="true"><span>分派時(shí)間</span></th>?? ????????????????<th?data-field="complete_date"?data-sortable="true"><span>完成時(shí)間</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>狀態(tài)</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>狀態(tài)</span></th></span>??
使用data-formatter="displaycolor"就會(huì)執(zhí)行displaycolor這個(gè)方法，來(lái)通過判斷該列的值來(lái)顯示不同的顏色；
總結(jié)
以上是生活随笔為你收集整理的bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
