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