日常开发中我们通常会用到隔行变色来美化表格,也会根据每行的数据显示特定的背景颜色,如果库存低于100的行显示红色背景

CSS样式

<style>
.bg-blue {
background-color: #0074D9 !important;
}
.bg-green {
background-color: green !important;
}
.bg-red {
background-color: red !important;
}
</style>

  

JS代码

<script>
//bootstrap table初始化数据 itxst.com
$('#table').bootstrapTable({
columns: columns,
data: getData(),
classes: "table table-bordered table-striped table-sm table-dark",
height: 400,
rowStyle: function(row, index) {
var classes = [
'bg-blue',
'bg-green',
'bg-red'
] if (index % 2 === 0 && index / 2 < classes.length) {
return {
classes: classes[index / 2]
}
}
return {
css: {
color: 'blue'
}
}
}
});
</script>

 转载 : http://www.itxst.com/Bootstrap-Table/

rowStyle设置Bootstrap Table行样式的更多相关文章

  1. theadClasses设置Bootstrap Table表头样式

    通过theadClasses属性设置表头样式. thead-light设置灰色背景 //bootstrap table初始化数据 itxst.com $('#table').bootstrapTabl ...

  2. bootstrap table的样式

    <style> table{ border: 1px solid #ddd; background-color: transparent; border-spacing:; border- ...

  3. bootstrap table 行号 显示行号 添加行号 bootstrap-table 行号

    思想:借助bootstrap-table 本身的index属性, 巧妙的的通过formatter 实现 { field: 'Number', title: 'Number', formatter: f ...

  4. Bootstrap table 行编辑导航

    /*开启表格编辑方向键导航 方向键(←): VK_LEFT (37) 方向键(↑): VK_UP (38) 方向键(→): VK_RIGHT (39) 方向键(↓): VK_DOWN (40) */ ...

  5. Bootstrap Table的例子(转载)

    转载自:http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#classes-table 使用的API: data1.json da ...

  6. bootstrap table dataView展开行详情,p元素自动换行

    // bootstrap table 行详情展开,p元素自动换行1 .tableClass .detail-view p{ white-space: normal; }

  7. bootstrap table使用小记

    bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等. 最近基于bootstrap开 ...

  8. bootstrap table 保留翻页选中数据

    $(function () { $('#exampleTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-al ...

  9. bootstrap table 超链接的添加 <a>标签

    后台管理页面采用 bootstrap table 页面样式: 现在需要在操作中添加一个<a>标签,跳转到不同的页面 { title: '操作', align: 'center', form ...

随机推荐

  1. Leetcode19.Remove Nth Node From End of List删除链表的倒数第N个节点

    给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: 1->2->3->4->5, 和 n = 2. 当删除了倒数第二个节点后,链表变为 ...

  2. 转:CentOS上安装LAMP之第三步:MySQL环境及安装过程报错解决方案(纯净系统环境)

    这是AMP运行环境中最后配置的环境: 惯例传送门: 1.编译安装MySQL cd /home/zhangatle/tar tar zxvf mysql-.tar.gz cd mysql- cmake ...

  3. ACdream 1101 线段树

    题目链接 瑶瑶想要玩滑梯 Time Limit: 10000/5000MS (Java/Others)Memory Limit: 512000/256000KB (Java/Others) Submi ...

  4. mac pro 1.5T内存是如何实现的

    苹果发布全新Mac Pro:28核1.5T内存 预计售价10万+ 看到这样的新闻标题是不是很震撼,甚至怀疑人生,64位机怎么就可以1.5T内存了,自己的系统盘都没那么大 而且我们知道windows下的 ...

  5. 【祈福】NOIP战后占卜:众星陨落,天命难违

    Day1 加上看题,做完第一题之后我已经只剩两个小时半了. 然后凭着一定要做完第一题和第二题的坚定信念. 我耗到了只剩一个小时半,结果正解还是没想出来. 其实我从只剩两小时的时候,就有了打第二题的暴力 ...

  6. KiCad EDA 如何修改 Pcbnew 线路板的背景色?

    KiCad EDA 如何修改 Pcbnew 线路板的背景色? 关于背景色,传统的原理图是白色,线路板是黑色. EDA 软件 类型 颜色 Protel 原理图 浅黄色 Protel PCB 黑色 Orc ...

  7. C++模板进阶指南:SFINAE

    C++模板进阶指南:SFINAE 空明流转(https://zhuanlan.zhihu.com/p/21314708) SFINAE可以说是C++模板进阶的门槛之一,如果选择一个论题来测试对C++模 ...

  8. TCPThree_C杯 Day1

    题解 或 正规题解 已经很详细,不再赘述. 跟着wjx打代码,不怕卡题. 忘开long long智障错误第四次左偏树

  9. 数组map用法总结

    数组中,map方法,指的是是数组的映射. map基本语法如下:function回调支持3个参数,第1个是遍历的数组内容:第2个是对应的数组索引,第3个是数组本身. map方法的作用不难理解,“映射”嘛 ...

  10. aspcms安装所遇到的问题

     aspcms标签:http://biaoqian.iasp.com.cn/ 1.报错:An error occurred on the server when processing the URL. ...