zoukankan      html  css  js  c++  java
  • 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/ 

  • 相关阅读:
    PHP之目录遍历
    PHP之验证码
    PHP之验证码
    PHP之异常处理模式
    PHP之pdo的预处理模式
    PHP之PDO
    PHP之cookie和session
    PHP之MVC
    单例模式
    ThreadLocal
  • 原文地址:https://www.cnblogs.com/logspool/p/11026174.html
Copyright © 2011-2022 走看看