导出 bootstraptable 时可编辑列上的值为空

Question

将 bootstraptable 导出为 excel 时，headers 和不可编辑的列已正确导出，但可编辑的列显示空值。

在上图中，第一列已正确导出，第二列在 excel 上显示空值。

HTML

<div id="toolbar">
    <select class="form-control">
        <option value="">Select Export</option>
        <option value="all">Export All</option>
        <option value="selected">Export Selected</option>
    </select>
</div>
<table id="cttable" data-search="true" data-toolbar="#toolbar"
    data-id-table="advancedTable" data-show-refresh="true"
    data-show-columns="true" data-classes="table table-hover"
    data-show-export="true" 
    data-url="MY SERVER URL"
    data-show-footer="false" data-minimum-count-columns="2"
    data-pagination="true" data-id-field="id" data-striped="true"
    data-page-list="[10, 25, 50, 100]" data-show-multi-sort="true"
    data-sort-priority='[{"sortName": "id","sortOrder":"asc"}]'
    data-show-footer="false">
</table>

JS

var $table=$("#cttable");

var ctData=[];

var xhr=$.ajax({
    type : "GET",
    dataType: "json",
    url : dir + "MY SERVER URL",
    async: false,
    success : function(resp) {
        ctData = JSON.parse(resp);
    }
});

$table.bootstrapTable('destroy');

$table.bootstrapTable({
    cookie : true,
    cookieIdTable : 'cookieid',
    cookieExpire : '5mi',
    data : ctData,
    height : 550,
    filterControl : true,

    // fixedColumns: true,
    // fixedNumber: 5,
    showExport : true,
    exportTypes : [ 'excel' ],
    columns : [ {
        field : 'state',
        checkbox : true,
        align : 'center',
        valign : 'middle'
    }, {
        title : 'ID',
        field : 'id',
        align : 'middle',
        valign : 'middle',
        sortable : true,
    }, {
        title : 'Col1',
        field : 'col1',
        align : 'middle',
        valign : 'middle',
        sortable : true,
        emptytext:"Please fill here!",
    }, {
        title : 'col2',
        field : 'col2',
        align : 'left',
        valign : 'middle',
        sortable : true,
        filterControl : 'input'
    }, {
        title : 'col3',
        field : 'col3',
        align : 'middle',
        valign : 'middle',
        sortable : true,
    }, {
        title : 'col4',
        field : 'col4',
        align : 'left',
        valign : 'middle',
        sortable : true,
    }, {
        title : 'col5',
        field : 'col5',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col6',
        field : 'col6',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col7',
        field : 'col7',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col8',
        field : 'col8',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col9',
        field : 'col9',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col10',
        field : 'col10',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col11',
        field : 'col11',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col12',
        field : 'col12',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true         
    }, {
        title : 'col13',
        field : 'col13',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col14',
        field : 'col14',
        align : 'left',
        valign : 'middle',
        sortable : true,

    }, {
        title : 'col15',
        field : 'col15',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col16',
        field : 'col16',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col17',
        field : 'col17',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col18',
        field : 'col18',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col19',
        field : 'col19',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col20',
        field : 'col20',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col21',
        field : 'col21',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col22',
        field : 'col22',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col23',
        field : 'col23',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col24',
        field : 'col24',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col25',
        field : 'col25',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col26',
        field : 'col26',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col27',
        field : 'col27',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }, {
        title : 'col28',
        field : 'col28',
        align : 'left',
        valign : 'middle',
        sortable : true,
        editable : true,
    }]
}).on('editable-init.bs.table', function(e){
    console.log("init ", e.toString());
}).on('editable-save.bs.table', function(field, row, oldValue, $el){
    console.log("save ", field, row, oldValue, $el);
    var xhr=$.ajax({
        type : "POST",
        contentType: "application/json",
        data: JSON.stringify(oldValue),
        url : dir + "MY SERVER URL",
        async: false,
        success : function(resp) {
            console.log(resp);
        },
        error:function(resp){
            console.log("error:", resp)
        }
    });
});
$('#toolbar').find('select').change(function() {
        $table.bootstrapTable('refreshOptions', {
          exportDataType: $(this).val()       
        });
     });

请问是什么问题，谢谢

Answer 1

我使用的是旧版本的 tableExport.js，但是当我检查最新版本的 tableExport.js 时它的工作原理是 bootstrap-table 示例.

导出 bootstraptable 时可编辑列上的值为空

Values are empty on editable columns while exporting bootstraptable

javascript

excel

jquery

bootstrap-table