rowStyle设置Bootstrap Table行样式

最新推荐文章于 2023-07-25 16:29:05 发布

logspool

最新推荐文章于 2023-07-25 16:29:05 发布

阅读量5.3k

点赞数

分类专栏： js css 文章标签： Bootstrap-Table rowStyle

js 同时被 2 个专栏收录

9 篇文章

订阅专栏

css

3 篇文章

订阅专栏

本文介绍如何使用Bootstrap Table实现隔行变色效果及基于数据条件改变行背景颜色的方法，通过CSS和JS代码示例展示如何根据库存数量设置不同颜色的背景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

日常开发中我们通常会用到隔行变色来美化表格，也会根据每行的数据显示特定的背景颜色，如果库存低于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初始化数据 by  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/