bootstrap-table.js如何根据单元格数据不同显示不同的字体的颜色

在bootstrap-table.js里面列属性 formatter就是用来格式化单元格的,其默认值是undefined 类型是function,function(value,  row, index), value:该cell本来的值,row:该行数据,index:该行序号(从0开始);table的标签属性是为:data-formatter

可以再bootstrap-table.js直接设置formatter属性:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. formatter: function(value,row,index) {  
  2.             //通过判断单元格的值,来格式化单元格,返回的值即为格式化后包含的元素  
  3.             var a = "";  
  4.                 if(value == "已完成") {  
  5.                     var a = '<span style="color:#00ff00">'+value+'</span>';  
  6.                 }else if(value == "已分派"){  
  7.                     var a = '<span style="color:#0000ff">'+value+'</span>';  
  8.                 }else if(value == "待办") {  
  9.                     var a = '<span style="color:#FF0000">'+value+'</span>';  
  10.                 }else{  
  11.                     var a = '<span>'+value+'</span>';  
  12.                 }  
  13.                 return a;  
  14.         }  

也可在html里面对单个表格进行设置:

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <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">  
  2.         <thead>  
  3.         <span style="white-space:pre">    </span><tr>  
  4.             <span style="white-space:pre">    </span><th data-field="state" data-checkbox="true"><span>编号</span></th>  
  5.                 <th data-field="id" data-sortable="true"><span>编号</span></th>  
  6.                 <th data-field="report_man" data-sortable="true"><span>报修人</span></th>  
  7.                 <th data-field="phone_number" data-sortable="true"><span>联系电话</span></th>  
  8.                 <th data-field="report_date" data-sortable="true"><span>报修时间</span></th>  
  9.                 <th data-field="order_date" data-sortable="true"><span>预约时间</span></th>  
  10.                 <th data-field="allot_time" data-sortable="true"><span>分派时间</span></th>  
  11.                 <th data-field="complete_date" data-sortable="true"><span>完成时间</span></th>  
  12.                 <th data-field="service_unit" data-sortable="true"><span>所属中心</span></th>  
  13.                 <th data-field="report_state" data-sortable="true" data-formatter="displaycolor"><span>状态</span></th></span>  
  14.             </tr>  
  15.         </thead>  
  16. </table>  
[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <script>  
  2.     function displaycolor(value,row,index) {  
  3.         var a = "";  
  4.             if(value == "已完成") {  
  5.                 var a = '<span style="color:#00ff00">'+value+'</span>';  
  6.             }else if(value == "已分派"){  
  7.                 var a = '<span style="color:#0000ff">'+value+'</span>';  
  8.             }else if(value == "待办") {  
  9.                 var a = '<span style="color:#FF0000">'+value+'</span>';  
  10.             }else{  
  11.                 var a = '<span>'+value+'</span>';  
  12.             }  
  13.             return a;  
  14.         }  
  15. </script>  

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <th data-field="report_state" data-sortable="true" data-formatter="displaycolor"><span>状态</span></th></span>  

使用data-formatter="displaycolor"就会执行displaycolor这个方法,来通过判断该列的值来显示不同的颜色;

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yusirxiaer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值