bootstrap table 设置行背景色

先看一个例子：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>	
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/locale/bootstrap-table-zh-CN.min.js"></script>

<table id="mytab" class="table table-hover" style="word-break:break-all; word-wrap:break-all;" data-click-to-select="true" ></table>

<script>
$('#mytab').bootstrapTable({
	showRefresh: true,
	showColumns:true,
	showHeader:true,
	dataField : "data",
	rowStyle: function(row, index) {
		var classes = ['active', 'success', 'info', 'warning', 'danger'];
		if (index % 2 === 0 && index / 2 < classes.length) {
			return {classes: classes[index / 2]};
		}
		return {};
	},
	columns: [{
			field:'state',
			checkbox:true
		},{
			field: 'schemaId',
			title: 'ID',
			visible:false
		},{
			field: 'interfaceName',
			title: '接口名'
		},{
			field: 'schema',
			title: 'schema',
			formatter: function(value, row, index) {
				return "<a href='javascript:;' class='btn_view'  >查看</a>";
			},events: {
				'click .btn_view': function(e, value, row, index) {
					showSchema(row);
				}
			}
		},{
			field: 'createTime',
			title: '创建时间'
		}
	]
});
$(".fixed-table-body").height(420);//设置表格高度
//加载表格数据
$.ajax({
	url: my_url,
	type: "get",
	success:function(_data){
		if (_data.code == 'A00000') {
			var data = _data.data;
			$("#mytab").bootstrapTable('load', data);
		} else {
			alert('查询接口case列表请求出错');
			return;
		}
	},error:function() {
		alert('查询接口case列表请求出错');
	}
});

//获取表格选中的数据
function test() {
  var rows = $('#mytab').bootstrapTable('getSelections');
  if (rows.length==1) {
    alert(rows[0].schemaId);
  }
}

</script>

知识点：

1、隐藏某一列，可以使用visible:false 属性设置；

2、表格添加多选按钮，可以在columns中添加checkbox：true属性，如果要点击某个选中，可以配置data-click-to-select="true"

3、获取选中行数据：

var rows = $('#mytab').bootstrapTable('getSelections');

4、设置表格高度：$(".fixed-table-body").height(420); 这样，当表格中数据超过时会自动出现滚动条。

5、设置某行背景色：

function rowStyle(row, index) {
    var classes = ['active', 'success', 'info', 'warning', 'danger'];
    if (index % 2 === 0 && index / 2 < classes.length) {
        return {
            classes: classes[index / 2]
        };
    }
    return {};
}

6、表格前面的checkout禁用：

{
	checkbox : true,
	width : 50,
	formatter: function(value, row, index) {
		if(row.status === 0){//如果已经操作禁止选择
			return { disabled : false,}
		}else{
			return { disabled : true,}
		}
	}
},