原创

bootstrap table表格某行样式,此处为背景颜色

第一步:将初始化表格时候,指定自定义样式的方法, rowStyle:rowStyle,较新版本也可以直接在
<table data-row-style="rowStyle><table> 中直接接入

sonTable.bootstrapTable('destroy').bootstrapTable({
            /*   columns: columns,*/
            pageNumber: 1, //初始化加载第一页
            pagination:true,//是否分页
            sidePagination:'client',//server:服务器端分页|client:前端分页
            pageSize:10,//单页记录数
            rowStyle:rowStyle,//通过自定义函数设置行样式
            /* paginationHAlign:'left',*/
            formatShowingRows: function (pageFrom, pageTo, totalRows) {
                return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录,总共 ' + totalRows + ' 条记录';
            },

第二步:自定义方法,classes中的 ['active', 'success', 'info', 'warning', 'danger'];是在bootstrap.css中定义了的颜色,比如,success,如下图,
file
当然我们也可以自定义样式,,写css,然后在classes中写入即可。如下代码:

<style>
.bg-blue {
    background-color: #0074D9 !important;
}
.bg-green {
    background-color: green !important;
}
.bg-red {
    background-color: red !important;
}
</style>
 //子类表格行样式
    function rowStyle(row, index) {
         var classes = ['active', 'success', 'info', 'warning', 'danger'];
        //var classes = ['bg-green', 'bg-red'];
        if (row.isDeal==0){
            return {
                classes: classes[1]
            };
        } else {
            return {
                classes: classes[4]
            };
        }
    }

效果图:file

正文到此结束
本文目录