rowStyle设置Bootstrap Table行样式
日常开发中我们通常会用到隔行变色来美化表格,也会根据每行的数据显示特定的背景颜色,如果库存低于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行样式的更多相关文章
- theadClasses设置Bootstrap Table表头样式
通过theadClasses属性设置表头样式. thead-light设置灰色背景 //bootstrap table初始化数据 itxst.com $('#table').bootstrapTabl ...
- bootstrap table的样式
<style> table{ border: 1px solid #ddd; background-color: transparent; border-spacing:; border- ...
- bootstrap table 行号 显示行号 添加行号 bootstrap-table 行号
思想:借助bootstrap-table 本身的index属性, 巧妙的的通过formatter 实现 { field: 'Number', title: 'Number', formatter: f ...
- Bootstrap table 行编辑导航
/*开启表格编辑方向键导航 方向键(←): VK_LEFT (37) 方向键(↑): VK_UP (38) 方向键(→): VK_RIGHT (39) 方向键(↓): VK_DOWN (40) */ ...
- Bootstrap Table的例子(转载)
转载自:http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#classes-table 使用的API: data1.json da ...
- bootstrap table dataView展开行详情,p元素自动换行
// bootstrap table 行详情展开,p元素自动换行1 .tableClass .detail-view p{ white-space: normal; }
- bootstrap table使用小记
bootstrap table是一个非常不错的,基于bootstrap的插件,它扩展和丰富了bootstrap表格的操作,如格式化表格,表格选择器,表格工具栏,分页等等. 最近基于bootstrap开 ...
- bootstrap table 保留翻页选中数据
$(function () { $('#exampleTable').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-al ...
- bootstrap table 超链接的添加 <a>标签
后台管理页面采用 bootstrap table 页面样式: 现在需要在操作中添加一个<a>标签,跳转到不同的页面 { title: '操作', align: 'center', form ...
随机推荐
- HDU5583 Kingdom of Black and White
Kingdom of Black and White Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Ja ...
- Eclipse 的 Java Web 项目环境搭建
从svn上拉取下来Eclipse的项目 IntelliJ IDEA自动识别到可编译的 src 类目录 Java Web 项目 html(一般命名为:WebRoot) 是整个项目输出的根目录. WEB- ...
- mybatis中使用包装对象
在实际的应用中,很多时候我们需要的查询条件都是一个综合的查询条件,因此我们需要对已经存在的实体进行再一次的包装,以方便我们进行查询操作,于是包装对象的作用就很明显了,在这里我举一个简单的例子 1.首先 ...
- redis的安装,以及主从实现同步
Redis的主从复制功能非常强大,一个master可以拥有多个slave,而一个slave又可以拥有多个slave,如此下去,形成了强大的多级服务器集群架构.下面我演示下怎样在多台服务器上进行Redi ...
- Android学习笔记之mainfest文件中android属性
android:allowTaskReparenting 是否允许activity更换从属的任务,比如从短信息任务 切换到浏览器任务. -------------------------------- ...
- HDU 1690 最短路
#include<stdio.h> #include<string.h> #include<queue> #include<algorithm> usi ...
- python 常规字符匹配
- Linux 上GCC的静态编译和动态编译
静态编译 常规编译示例: $gcc xxx.c yyy.c zzz.c -o rslt 注明: gcc编译器会对源文件min.c进行预处理, 编译, 以及链接, 最后生成可执行文件 $gcc -c x ...
- scala实现定时任务的方法
/** * ScheduledExecutorService是从Java SE5的java.util.concurrent里,做为并发工具类被引进的,这是最理想的定时任务实现方式. * 它有以下好处: ...
- LaTeX Error: File `slashbox.sty' not found. 解决办法
从这里下载对应的文件,解压后把文件放在C:\Latex\2018\texmf-dist\tex\latex 中. 再打开cmd命令窗口,输入texhash刷新!