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 ...
随机推荐
- Leetcode46. Permutations全排列
给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3] 输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1 ...
- 【python之路20】函数作为参数
1.函数可以作为参数 1)函数名相当于变量指向函数 2)函数名后面加括号表示调用函数 #!usr/bin/env python # -*- coding:utf-8 -*- def f1(args): ...
- 微信小程序--轮播图,标题,盒子,tab栏的合成例子
小程序是什么? 微信小程序,是一种不需要下载安装即可使用的应用,用户扫一扫或搜一下即可打开应用,在微信-发现-小程序可打开应用. 一.小程序的样式编写: 目录结构: app.json { " ...
- 提交方式get和post有什么区别
提交方式post和get有什么区别? (1)post是向服务器传送数据:get是从服务器上获取数据. (2)在客户端,get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个 ...
- Python学习笔记(四)Python程序的控制结构
在学习了 Python 的基本数据类型后,我们就要开始接触Python程序的控制结构,了解 Python 是如何使用控制结构来更改程序的执行顺序以满足多样的功能需求.如果有的小伙伴在之前学过C语言,j ...
- CodePlus2017 12月月赛 div2可做题2
11月的月赛错过了,来打12月月赛,由于很(zi)想(ji)拿(tai)衣(ruo)服(la),所以去打div2. T1是一个sb模拟,但是机房全卡死在这道语文题上了,基本上弄了一个半小时,T2可以秒 ...
- linux类库之log4j-LogBack-slf4j-commons-logging
log4j http://commons.apache.org/proper/commons-logging/ http://logging.apache.org/log4j/2.x/ The Com ...
- es安装遇到的问题
问题1: es一闪即逝的问题?java的jdk环境变量没有配置好, JAVA_HOME没有配置好 必须在系统变量里面添加JAVA_HOME: C:\Program Files\Java\jre1.8. ...
- git reset三种模式
reset三种模式区别和使用场景 区别: --hard:重置位置的同时,直接将 working Tree工作目录. index 暂存区及 repository 都重置成目标Reset节点的內容,所以效 ...
- 解决Dynamic Web Module 3.0 requires Java 1.6 or newer.问题
在项目的pom.xml的<build></build>标签中增加: <plugins> <plugin> <gro ...