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/