bootstrap table 设置行背景色

Bertha 。 2021-06-22 15:38 546阅读 0赞

先看一个例子：

<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,}
    		}
    	}
    },

发表评论取消回复

表情：

评论列表（有 0 条评论，546人围观）

还没有评论，来说两句吧...

相关阅读

相关 JTree 设置选中行整行的背景色

JTree 设置选中行整行的背景色 1.需求描述 2.代码实现 3.效果演示 > 系统：Win10 > JDK：1.8.0\_333 > ID

朱雀/ 2024年04月07日 14:43/ 0 赞/ 95 阅读

相关 Element table表格设置表头、行、列或者指定单元格背景色

效果： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3F

￡神魔★判官ぃ/ 2023年06月14日 12:56/ 0 赞/ 21 阅读

相关 Bootstrap-table修改行的背景色

1、修改行的背景色伪代码 rowStyle:function(row,index){ var classes = ['

刺骨的言语ヽ痛彻心扉/ 2023年01月14日 14:58/ 0 赞/ 130 阅读

相关设置IOS 状态栏背景色

- (void)setStatusBarBackgroundColor:(UIColor )color { UIView status

向右看齐/ 2022年06月08日 23:56/ 0 赞/ 339 阅读

相关 eclipse背景设置绿豆色

Eclipse操作界面默认颜色为白色。对于我们长期使用电脑编程的人来说，白色很刺激我们的眼睛，如果把颜色改成绿色的颜色就会缓解眼睛的疲劳。设置方法如下： 1

一时失言乱红尘/ 2022年06月05日 09:48/ 0 赞/ 359 阅读

相关 jquery css 设置table的奇偶行背景色

<style> .even{background:FFF38F;} .odd{background:FFFFEE;} .selected{bac

Myth丶恋晨/ 2022年05月13日 05:20/ 0 赞/ 231 阅读

相关 css设置背景色渐变

css完成以下如图背景色 ![在这里插入图片描述][2019011414465155.png]css样式 div1 { width: 100%;

墨蓝/ 2022年04月22日 16:06/ 0 赞/ 363 阅读

相关 Android设置WebView背景色

试遍了网上关于WebView设置背景色的各个方法，都没有下面这个靠谱。描述下我遇到的问题，WebView加载显示一段Html代码，但是UI设计的主界面是有一个浅灰色背景，而We

爱被打了一巴掌/ 2022年03月28日 13:29/ 0 赞/ 1978 阅读

相关 Antd之设置table表头的属性/背景【设置表头的背景色为白色】

这个问题，困扰了我许久，今天终于解决了，开心，哈哈。希望能帮助到各位。这是未改变之前的效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3po

水深无声/ 2022年02月21日 07:39/ 1 赞/ 2306 阅读

相关 bootstrap table 设置行背景色

先看一个例子： <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.m

Bertha 。/ 2021年06月22日 15:38/ 0 赞/ 547 阅读