bootstrap-table修改列名

按照习惯来说的话，使用bootstrap-table一般是这样使用的：

    <table
            id="table"
            class="table-striped"
            data-locale="zh-CN"
            data-toolbar=".toolbar"
            data-search="true"
            data-show-refresh="true"
            data-show-toggle="true"
            data-show-fullscreen="true"
            data-show-columns="true"
            data-height="800"
            data-show-columns-toggle-all="true"
            data-show-export="true"
            data-export-data-type="all"
            data-click-to-select="true"
            data-minimum-count-columns="2"
            data-pagination="true"
            data-page-size="20"
           >
        <thead>
        <tr>
            <th data-field="VEHICLECLASS" data-sortable="true" data-align="center">车型</th>
            <th data-field="RANLIAO" data-sortable="true" data-align="center">燃料</th>
            <th data-field="NENGHAO" data-sortable="true" data-align="center">能耗</th>
            <th data-field="CO" data-sortable="true" data-align="center">CO</th>
            <th data-field="HC" data-sortable="true" data-align="center">HC</th>
            <th data-field="NOX" data-sortable="true" data-align="center">NOX</th>
            <th data-field="PM25" data-sortable="true" data-align="center">PM2.5</th>
            <th data-field="PM10" data-sortable="true" data-align="center">PM10</th>
            <th data-field="CO2" data-sortable="true" data-align="center">CO2</th>
        </tr>
        </thead>
    </table>

但是有时候需要在同一个表中展示不同字段名的东西，比如我想加一列这个：
 

<th data-field="ELCTRIC" data-sortable="true" data-align="center">电量消耗</th>

实在不知道怎么往里面插进去。或者说同一个表，我新获得的数据字段名跟之前的不一样了，对data-field做修改也很难办，所以我决定使用bootstrap-table的js去修改字段名：

首先<thead>不要了，就变成了只有表格主体的了：

    <table
            id="table"
            class="table-striped"
            data-locale="zh-CN"
            data-toolbar=".toolbar"
            data-search="true"
            data-show-refresh="true"
            data-show-toggle="true"
            data-show-fullscreen="true"
            data-show-columns="true"
            data-height="800"
            data-show-columns-toggle-all="true"
            data-show-export="true"
            data-export-data-type="all"
            data-click-to-select="true"
            data-minimum-count-columns="2"
            data-pagination="true"
            data-page-size="20"
           >
    </table>

其次就是使用js定义列名：

        var columns1 = [{field: 'VEHICLECLASS',title: '车型',align:'center',sortable:'true'},
            {field: 'RANLIAO',title: '燃料',align:'center',sortable:'true'},
            {field: 'NENGHAO',title: '能耗',align:'center',sortable:'true'},
            {field: 'CO',title: 'CO',align:'center',sortable:'true'},
            {field: 'HC',title: 'HC',align:'center',sortable:'true'},
            {field: 'NOX',title: 'NOX',align:'center',sortable:'true'},
            {field: 'PM25',title: 'PM2.5',align:'center',sortable:'true'},
            {field: 'PM10',title: 'PM10',align:'center',sortable:'true'},
            {field: 'CO2',title: 'CO2',align:'center',sortable:'true'}];
        var columns2 = [{field: 'VEHICLECLASS',title: '车型',align:'center',sortable:'true'},
            {field: 'RANLIAO',title: '燃料',align:'center',sortable:'true'},
            {field: 'NENGHAO',title: '能耗',align:'center',sortable:'true'},
            {field: 'DIANLIANG',title: '电量',align:'center',sortable:'true'},
            {field: 'CO',title: 'CO',align:'center',sortable:'true'},
            {field: 'HC',title: 'HC',align:'center',sortable:'true'},
            {field: 'NOX',title: 'NOX',align:'center',sortable:'true'},
            {field: 'PM25',title: 'PM2.5',align:'center',sortable:'true'},
            {field: 'PM10',title: 'PM10',align:'center',sortable:'true'},
            {field: 'CO2',title: 'CO2',align:'center',sortable:'true'}];

然后重新加载的话要使用refreshOptions方法：

let $table = $('#table'); 
$table.bootstrapTable('refreshOptions',{columns:columns2,data:data2,exportTypes:['csv','excel']});

需要注意的是，如果一开始加载第一个表的时候直接使用'refreshOptions'会加载不出来，所以需要一个判断语句，如果是第一次加载表的数据就不用，后面的才使用：
 

var FIRST = true;
...
if(FIRST){
    $table.bootstrapTable({columns:columns1,data:data,exportTypes:['csv','excel']});
    $table.bootstrapTable('load',data);FIRST=false;
}else{
    $table.bootstrapTable('refreshOptions',{columns:columns1,data:data,exportTypes:['csv','excel']});
    $table.bootstrapTable('load',data);
...