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 ...
随机推荐
- git命令移动文件夹到另一文件夹
- java中的线程(2):如何正确停止线程之2种常见停止方式
1.常见停止方式 结束run函数,run中含退出标志位. 使用interrupt()方法中断线程 使用stop方法暴力终止(已经弃用) 2.结束run class TestThread extends ...
- jmeter 之 https 请求
本文为自己学习总结,转载需说明出处. jmeter发送https请求需要在巨jmeter中导入被测试网站的安全证书. 一.通过浏览器登录对应的网站导出安全证书.下面操作以360浏览器为例: 二.把导出 ...
- Hdu 1498 二分匹配
50 years, 50 colors Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- The method getTextContent() is undefined ?
晚上下班的时候,把班上写了半截的代码带了回来.结果回到家后出乎意料的是回来的时候将代码导入eclipse后,下面这行代码就直接报错了,显示 getTextContent()未定义 . ((Elemen ...
- 【JZOJ4461】【GDOI2016模拟4.21】灯塔 分治
题面 GDOI是一个地处丘陵的小国,为了边防建设,国王希望在国界线上的某一座山峰上建立一座灯塔,照亮整个边界.而灯塔建设的调研工作,就交给了你. GDOI的国境线上有N座连续的山峰,其中第i座的高度是 ...
- dingo/api 使用 知识
Dingo 能为Laravel提供一整套包括从路由,到认证的RESTful API开发工具 Laravel & Lumen RESTFul API 扩展包:Dingo API(一) —— 安装 ...
- 【JZOJ4745】【NOIP2016提高A组模拟9.3】看电影
题目描述 听说NOIP2016大家都考得不错,于是CCF奖励省常中了 K 张变形金刚5的电影票奖励OI队的同学去看电影.可是省常中OI队的同学们共有 N(N >= K)人.于是机智的你想到了一个 ...
- idea 项目热部署设置
1.引入pom.xml() <!-- 热部署(必须) --> <dependency> <groupId>org.springframework.boot</ ...
- 重温Observer模式--热水器·改
引言 在 C#中的委托和事件 一文的后半部分,讲述了Observer(观察者)模式,并使用委托和事件实现了这个模式.实际上,不使用委托和事件,一样可以实现Observer模式.在本文中,我将使用GOF ...