bootstrap table使用

1.引用文件

  

 <link rel="stylesheet" href="/plugs/bootstrap/4.1.3/css/bootstrap.min.css"> 
        <link rel="stylesheet" href="/plugs/bootstrap-table/1.13.2/bootstrap-table.min.css">   

用bootstrap table export 不好用，所以换成tableExport插件。

导出保存文件插件下载地址：https://github.com/hhurz/tableExport.jquery.plugin

    <script src="/javascripts/jquery-3.3.1.min.js"></script>    
    <script src="/plugs/bootstrap-table/1.13.2/locale/bootstrap-table-zh-CN.min.js"></script>  
    <script src="/plugs/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="/plugs/tableExport.jquery.plugin-master/libs/FileSaver/FileSaver.min.js"></script> 
    <script src="/plugs/tableExport.jquery.plugin-master/tableExport.min.js"></script>  
    <script src="/plugs/bootstrap-table/1.13.2/bootstrap-table.min.js"></script>  

2.html

 

  <div>
                            <a href="#" onclick="$('.oee_table').tableExport({type:'excel',
                            mso: {
                              styles:['border-bottom', 'border-top', 'border-left', 'border-right']
                              }});">Export to Excel</a>
                        <table id="oee_table" class="oee_table" data-toggle="table">
                           
                         </table>
               
                     </div>

 

3.

  

function load_oee_table(){

    var columns_js=[];//table header
    columns_js.push({field:'id',title:'id',align:'center',valign:'middle'});
    columns_js.push({field:'name',title:'名字',align:'center',valign:'middle'});
    columns_js.push({field:'city',title:'城市',align:'center',valign:'middle'});

    var data_js=[];
    var data_node1={};
    data_node1.id=1;
    data_node1.name='tom';
    data_node1.city='kunshan';

    var data_node2={};
    data_node2.id=1;
    data_node2.name='joy';
    data_node2.city='shanghai';

    data_js.push(data_node1);
    data_js.push(data_node2);

    $('#oee_table').bootstrapTable('destroy').bootstrapTable({

        toolbar: '#toolbar',
        striped: true,
        cache: false,
        pagination: false,
        sortable: false,
        search: false,
        showRefresh: false,
        showToggle:false,       
        columns:columns_js,
        data:data_js,
    });
}

 

function load_oee_table(data_json){

    var columns_js=[];//table header
    columns_js.push({field:'type_title',title:'时间',align:'center',valign:'middle'});   
    for(var i=0;i<data_json.length;i++){
        if(data_json[i].time==99){
            columns_js.push({field:'h'+data_json[i].time,title:'',align:'center',valign:'middle'});
        }else{          
            columns_js.push({field:'h'+data_json[i].time,title:data_json[i].time,align:'center',valign:'middle',
                formatter : function (value, row, index) {                 
                    //index第几行
                    if (row['h'+data_json[i].time] === 10) {
                        return '正常';
                    }
                    if (index === 4) {
                        return '11111';
                    }
                    return value;
                },     
            });
        }         
     }


    var data_js=[];
    
    for(var i=0;i<g_status_type.length;i++){ 
        var data_node={};
        data_node.type_title=g_status_type[i].status_type;
        for(var j=0;j<data_json.length;j++){
       
            if(data_json[j].time==99){       
                data_node['h'+data_json[j].time]='';
            }else{
                data_node['h'+data_json[j].time]=data_json[j].all_type_count[i];
            }
            
        }
        data_js.push(data_node);
    }   
   
   
 

    $('#oee_table_id').bootstrapTable('destroy').bootstrapTable({

        toolbar: '#toolbar',
        striped: false,
        cache: false,
        pagination: false,
        sortable: false,
        search: false,
        showRefresh: false,
        showToggle:false,
        rowStyle:function(row,index){ 
        　　if (index==1){
        　　　　return {css:{"background-color":"red"}};
        　　}else{
        　　　　return {css:{"background-color":"green"}};
        　　}             
        },
        columns:columns_js,
        data:data_js,
    });
}