日常开发中我们通常会用到隔行变色来美化表格,也会根据每行的数据显示特定的背景颜色,如果库存低于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. HDU5583 Kingdom of Black and White

    Kingdom of Black and White Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Ja ...

  2. Eclipse 的 Java Web 项目环境搭建

    从svn上拉取下来Eclipse的项目 IntelliJ IDEA自动识别到可编译的 src 类目录 Java Web 项目 html(一般命名为:WebRoot) 是整个项目输出的根目录. WEB- ...

  3. mybatis中使用包装对象

    在实际的应用中,很多时候我们需要的查询条件都是一个综合的查询条件,因此我们需要对已经存在的实体进行再一次的包装,以方便我们进行查询操作,于是包装对象的作用就很明显了,在这里我举一个简单的例子 1.首先 ...

  4. redis的安装,以及主从实现同步

    Redis的主从复制功能非常强大,一个master可以拥有多个slave,而一个slave又可以拥有多个slave,如此下去,形成了强大的多级服务器集群架构.下面我演示下怎样在多台服务器上进行Redi ...

  5. Android学习笔记之mainfest文件中android属性

    android:allowTaskReparenting 是否允许activity更换从属的任务,比如从短信息任务 切换到浏览器任务. -------------------------------- ...

  6. HDU 1690 最短路

    #include<stdio.h> #include<string.h> #include<queue> #include<algorithm> usi ...

  7. python 常规字符匹配

  8. Linux 上GCC的静态编译和动态编译

    静态编译 常规编译示例: $gcc xxx.c yyy.c zzz.c -o rslt 注明: gcc编译器会对源文件min.c进行预处理, 编译, 以及链接, 最后生成可执行文件 $gcc -c x ...

  9. scala实现定时任务的方法

    /** * ScheduledExecutorService是从Java SE5的java.util.concurrent里,做为并发工具类被引进的,这是最理想的定时任务实现方式. * 它有以下好处: ...

  10. LaTeX Error: File `slashbox.sty' not found. 解决办法

    从这里下载对应的文件,解压后把文件放在C:\Latex\2018\texmf-dist\tex\latex 中. 再打开cmd命令窗口,输入texhash刷新!