bootstrap table 多行表头高度及导出时日期格式

使用到的相关js

    <script src="../../js/bootstrap-table/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="../../js/bootstrap-table/bootstrap-table-mobile.min.js" type="text/javascript"></script>
    <script src="../../js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
    <link href="../../js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <script src="../../js/bootstrap-table/tableExport.jquery.plugin/bootstrap-table-export.js"></script>
    <script src="../../js/bootstrap-table/tableExport.jquery.plugin/tableExport.js"></script>
    <script src="../../js/bootstrap-table/tableExport.jquery.plugin/jquery.base64.js"></script>

 

1、多行表头需要单独设置高度，否则只能显示第一行，可添加如下样式

<style type="text/css">
        .fixed-table-header {
            height: 70px;
        }
    </style>

2、默认导出时日期格式按英文格式，需要设置导出时的格式，日期列需要添加如下class样式，class可任意设置，主要用作列识别字段：

<input id="btnExport" type="button" value="导出" class="btn  btn-primary" 
οnclick=" $('#report-table').tableExport({ fileName: '表格名称', type: 'excel', escape: 'false' })" />

 

<table id="datatable" class="table table-bordered table-striped table-hover"></table>

 {
                        field: 'ACQUISITIONTIME',
                        title: '日期',
                        align: 'center',
                        class: 'date-col',
},

然后在加载表格时设置onPostBody方法如下：

关键代码：使用上面定义的列识别字段

onPostBody: function (data) {   //表格数据加载成功事件
      $('td.date-col').attr('data-tableexport-msonumberformat', '\@');
}

 整体代码如下：含多行表头，高度变化重新加载等

$(document).ready(function () {
            var json = JSON.parse($("#txtJson_Table").val());

            $('#report-table').bootstrapTable({
                columns: [
                    [
                        {
                            "title": $("#txtTitle").val(),
                            "field": "",
                            "halign": "center",
                            "align": "center",
                            "colspan": 8
                        }
                    ], [{
                        field: 'no',
                        title: '序号', width: 100,
                        align: 'center',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    },
                    {
                        field: 'ACQUISITIONTIME',
                        title: '日期',
                        align: 'center',
                        class: 'date-col',
                    },
                    {
                        field: 'LAYERNAME',
                        title: '车间/设备',
                        align: 'center',
                    },
                    {
                        field: 'ENERGYTYPE',
                        title: '能源',
                        align: 'center',
                    },
                    {
                        field: 'UNITNAME',
                        title: '单位',
                        align: 'center',
                    },
                    {
                        field: 'ENERGY_VALUE',
                        title: '能耗值',
                        align: 'center',
                    },
                    {
                        field: 'PRODUCTION_VALUE',
                        title: '产量',
                        align: 'center',
                    },
                    {
                        field: 'UNIT_ENERGY_VALUE',
                        title: '单耗',
                        align: 'center',
                    },
                    ],
                ],
                onPostBody: function (data) {   //表格数据加载成功事件
                    $('td.date-col').attr('data-tableexport-msonumberformat', '\@');
                },
            });
            $("#report-table").bootstrapTable('resetView', { height: $(window).height() - 70 });
            $("#report-table").bootstrapTable('load', json);
        });