在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
  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 plaincopy
  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 plaincopy
  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 plaincopy
  1. <th data-field="report_state" data-sortable="true" data-formatter="displaycolor"><span>状态</span></th></span>

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

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

  1. Python pandas读取excel单元格数据，显示不全问题

    用pandas的pd.read_excel()方法在读取一个存储图片URL路径的EXCEL表格数据时,由于路径较长,出现了单元格内容显示不全的问题.尤其是在使用pd.to_excel()将处理好的数据 ...

  2. devexpress实现单元格根据条件显示不同的样式（颜色、字体、对齐方式，大小等）...

    1.devexpress控件库之所以被大家所喜爱,是因为它将许多常用的东西都封装成了属性.可以通过一些简单的配置,将以前某些需要大篇幅代码才可实现的效果展示出来.这里是一个实现了将[第二列数据在表格0 ...

  3. ag-grid 中外部编辑数据同步修改table单元格数据，数据实时更新

    ag-grid 中外部编辑数据同步修改table单元格数据 这里只探讨本人已经使用的一个方法 getTags(params).then(res => {console.log(res, '=== ...

  4. java读取excel某个单元格的值_[转载]Java读取Excel中的单元格数据

    目前网上能找到的读取Excel表格中数据的两种比较好的方案:PageOffice好用开发效率高:POI免费.供大家参考,针对具体情况选择具体方案. 1. PageOffice读取excel impor ...

  5. 如何用Java读取单元格的数据_Java读取Excel中的单元格数据

    目前网上能找到Web平台下的读取Excel表格中数据的两种比较好的方案:PageOffice好用开发效率高:POI免费.供大家参考,针对具体情况选择具体方案. 1. PageOffice读取excel ...

  6. html在线编辑器合并单元格,Bootstrap实现的表格合并单元格示例

    本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景 利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 Bootstrap-表格合并 ...

  7. 如何读取Excel表格中不同sheet表的同一位置单元格数据，并绘制条形图呢？

    作者 | 黄伟呢 来源 | 数据分析与统计学之美 今天,有位朋友在群里面咨询了一个问题:如何读取Excel表格中"不同sheet表"的同一位置单元格数据,并绘制条形图呢? 有人提议 ...

  8. c修改datatable单元格的值_神奇的VBA编程：批量拆分单元格数据

    批量对单元格区域内每个单元格中的数据按照一定的规则进行拆分是职场工作中经常碰到的操作.Excel数据选项卡中"分列"提供了基础的功能.能帮助用户通过鼠标快速分列数据. 本篇< ...

  9. 高效便捷地创建单元格数据图表

    您能想象折线图.柱状图这些图表被放在一个小小的单元格中的样子吗?Excel 2010的迷你图功能为您提供了这样的便捷体验,让您高效便捷地创建单元格数据图表! 1．打开您想要创建迷你图的Excel工作簿 ...

最新文章

  1. 【仿去哪儿】滑动隐藏导航栏
  2. 高性能Sqlite存储模型对象解密
  3. C++ 通讯录学习总结
  4. 深入学习SAP UI5框架代码系列之六：SAP UI5控件数据绑定的实现原理
  5. zookeeper watch笔记
  6. Train Problem I hdu 1022（栈）
  7. NCRE四级网络工程师考题详解----三级索引结构
  8. 量子计算机迷宫,一个简单的例子，带你读懂量子计算机
  9. java-将xlsx（excel）文件转换成json
  10. 2020-12-02
  11. 用户可以通过软件对计算机,用户可以通过____软件对计算机软、硬件资源进行管理。...
  12. Docker | 基于docker启动jar包，并进行更新
  13. 区块链学习(1) sha256算法 c语言实现
  14. android api 完整翻译之Contacts Provider （学习安卓必知的api，中英文对照）
  15. matlab中norm函数的用法
  16. 树莓派与普通USB摄像头的连接
  17. swagger(三)：统一返回结果不显示字段说明
  18. android设置背景色为全透明和半透明
  19. 如何判断一个数是否为超级素数
  20. JS继承和继承基础总结

热门文章

  1. CharNet算法详解
  2. mysql数据库设计学习---数据库设计规范化的五个要求
  3. 设计数据密集型应用程序_设计数据密集型应用程序书评
  4. 贷款能否成功，这4个人说了算
  5. 对传统视觉惯性的颠覆
  6. “城迷”：黑白梦与精神逃离
  7. 《孩子，你如此优美：一位作家母亲的家教笔记》
  8. 参加动画电影《魔比斯环》首映
  9. 计算机组成原理的实验课心得,计算机组成原理移位控制实验心得.docx
  10. gitlab 构建tag_GitLab常用命令 分支 Tag 配置 操作