bootstrap-table修改列名

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

    <tableid="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>不要了，就变成了只有表格主体的了：

    <tableid="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);
...

bootstrap-table修改列名相关推荐

Bootstrap table修改没有数据返回时的提示，去掉正在加载中
bootstraptable 修改没有数据返回的提示去掉正在加载中固定列修改没有数据返回的提示 $("#tablesheet").bootstrapTable({...for ...
Bootstrap table方法，Bootstrap table事件，配置
调用 BootStrap Table 方法的语法: $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootst ...
bootstrap table 表格支持shirt 多选_bootstrap-table 表格行内编辑实现
这篇文章向大家介绍一下如何使用bootstrap table插件实现表格的行内编辑功能. 我的web前端学习交流群点击进入1045267283,欢迎加入! 先放一张效果图: 应用场景之前的项目也是采 ...
vue下的bootstrap table + jquery treegrid, treegrid无法渲染的问题
在mian.js导入的包如下:该bootstrap-table-treegrid.js需要去下载,在复制到jquery-treegrid/js/ 1 import $ from 'jquery' 2 ...
php bootstraptable分页,Bootstrap table分页问题汇总【附答案代码】
本篇文章为大家总结了几个使用bootstrap table实现分页时可能会遇到的问题,希望能够对大家有所帮助. 问题1 :服务器端取不到form值,querystring没有问题,但是request. ...
[转]bootstrap table 动态列数
原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...
bootstrap table使用参考
https://www.cnblogs.com/landeanfen/p/5821192.html 转载阅读目录一.x-editable组件介绍二.bootstrapTable行内编辑初始方案 ...
Oracle修改表列名与顺序的解决方案 (sql 修改列名)
http://hb-keepmoving.iteye.com/blog/804297 Oracle 10g 修改表列名与顺序的解决方案- 下面介绍通过修改数值字典的方法修改表的列名: 假设在 SCOT ...
JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
django：bootstrap table加载django返回的数据
bootstrap table加载表格数据有两类方式: 一种通过data属性的方式配置,一种是javascipt方式配置这里看js配置方式: 1.当数据源为.json文件时 url参数写上json文 ...

bootstrap-table修改列名

bootstrap-table修改列名相关推荐

最新文章

热门文章