bootstrap table 设置行背景色

bootstrap table 设置行背景色

先看一个例子：

<link href=".3.7/css/bootstrap.min.css">
<link href=".16.0/bootstrap-table.min.css">
<script src=".5.1/jquery.min.js"></script>	
<script src=".3.7/js/bootstrap.min.js"></script>
<script src=".16.0/bootstrap-table.min.js"></script>
<script src=".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 (_de == '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,}}}
},