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);
...

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Python是一种高级编程语言,而Django是一个使用Python编写的Web框架。它们可以一起使用来开发功能强大的Web应用程序。 Bootstrap是一个开源的前端框架,它提供了一套美观和响应式的页面设计元素和样式。它的主要目标是简化开发者在Web上创建美观和易于使用的页面的工作。 Bootstrap-Table是基于Bootstrap框架的一个强大的jQuery表格插件。它提供了丰富的功能和选项,使开发者能够很容易地在Web应用程序中创建和管理数据表格。Bootstrap-Table允许开发者使用少量的HTML和JavaScript代码来自定义和配置表格的样式和功能。 在Python Django中使用Bootstrap-Table可以帮助我们更轻松地创建和管理数据表格。我们可以将Bootstrap-Table与Django的模型和视图结合使用,从数据库中获取数据并在Web应用程序中显示它们。通过使用Bootstrap-Table的功能,我们可以对表格进行排序、分页、筛选等操作。 使用Bootstrap-Table的一个例子是在Django的视图中使用它来显示查询结果。我们可以通过在模板中引入Bootstrap-Table的样式和脚本文件,然后在视图中将查询结果传递给模板。在模板中,我们可以使用Bootstrap-Table的数据属性和选项来定义表格的样式和功能。最后,我们可以使用Bootstrap-Table的JavaScript方法来初始化和渲染表格,并在页面上显示查询结果。 总而言之,Python Django与Bootstrap-Table的结合可以让开发者更轻松地创建和管理数据表格,从而为Web应用程序提供更好的用户体验和功能。这是一个强大的组合,可以帮助我们快速开发高效的Web应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值