十六、bootstrap-table javascript導出數據

使用bootstrap-table免不了要導出表格中的內容，直接在

中設置的參數畢竟有限，bootstrap-table當然支持更個性化的設置，下面直接貼出我這幾天用到的參數，比如：不導出checkbox列，設置導出的文件類型，設置導出的文件名稱等等，如果下面的內容沒有符合你要求的，也可以郵件聯繫我：[email protected]，大家共同學習。

前端html

<div id="toolbar" class="btn-group">
            <button id='addButton' name='addButton' class="btn btn-primary" data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-plus"></i></button>
            <button id="freqUsed" type="button" class="btn btn-default" data-toggle="modal" data-target="#freqUsedModal">
                <i>常用商品</i>
            </button>
            <button id="all" type="button" class="btn btn-default">
                <i>ALL</i>
            </button>
            <button id="print" type="button" class="btn btn-default">
                <i>打印</i>
            </button>
            <select class="form-control">
                <option value="">Export Basic</option>
                <option value="all">Export All</option>
                <option value="selected">Export Selected</option>
            </select>
        </div>
        <table id="show_product" class="table table-no-bordered">
        </table>

前端js

$(function() {
    $('#toolbar').find('select').change(function() {
        $('#show_product').bootstrapTable('refreshOptions', {
            exportDataType: $(this).val()
        });
    });
})
$('#report_table').bootstrapTable({
    toolbar: '#toolbar', //工具按鈕用哪個容器
    striped: true, //是否顯示行間隔色
    cache: false, //是否使用緩存，默認爲true，所以一般情況下需要設置一下這個屬性（*）
    pagination: false, //是否顯示分頁（*）
    sortable: true, //是否啓用排序
    sortOrder: "asc", //排序方式
    sidePagination: "client", //分頁方式：client客戶端分頁，server服務端分頁（*）
    pageNumber: 1, //初始化加載第一頁，默認第一頁
    pageSize: 10, //每頁的記錄行數（*）
    pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）
    clickToSelect: false,//點擊該行就選中
    showExport: true, //是否顯示導出
    exportDataType: "all", //basic', 'all', 'selected'.
    exportTypes: ['excel', 'txt', 'csv'],//可選的導出文件類型
    undefinedText: '-', //當數據爲 undefined 時顯示的字符
    exportOptions: {
        ignoreColumn: [0], //忽略某一列的索引
        fileName: '業務週報',//導出文件的名稱
    },
    columns: [{ checkbox: true }, {
        field: "id",
        title: 'Id',
        visible: false
    }, {
        field: "name",
        title: '名稱'
    }, {
        field: "shortName",
        title: '簡稱'
    }, {
        field: "purchaseId",
        title: 'purchaseId',
        visible: false
    }, {
        field: "purchaseName",
        title: '進貨名稱',
        formatter: addLinkFormatter,
    }, {
        field: "purchaseDate",
        title: '進貨日期',
    }, {
        field: "purchasePrice",
        title: '進貨價',
        editable: {
            type: 'text',
            mode: 'inline'
        },
        sortable: true
    }, {
        field: "count",
        title: '數量',
        editable: {
            type: 'text',
            mode: 'inline'
        },
        sortable: true
    }, {
        field: "salePrice",
        title: '銷售價',
        titleTooltip: '銷售價',
        editable: {
            type: 'text',
            mode: 'inline'
        },
        sortable: true
    }, {
        field: "barCode",
        title: '一維碼',
        editable: {
            type: 'text',
            mode: 'inline'
        },
        sortable: true
    }, {
        field: "remark",
        title: '備註'
    }, ],
    onEditableSave: function(field, row, oldValue, $el) {
        var newValue = row[field];
        if (!checkStrEqual(oldValue, newValue)) {
            $.ajax({
                type: "post",
                url: "/edit",
                data: {
                    'type': 'product',
                    'id': row.id,//獲得所在行指定列的值
                    'newValue': newValue,
                    'field': field,
                    'oldValue':oldValue
                },
                success: function(data, status) {
                    if (status == "success") {
                        alert("編輯成功");
                    }
                },
                error: function() {
                    alert("Error");
                },
                complete: function() {

                }

            });
        }
    }
});

效果圖：

引用文章：
jsfiddle http://jsfiddle.net/dabros/axsuvcg1/
bootstrap-table export https://github.com/wenzhixin/bootstrap-table-examples/blob/master/extensions/export.html
bootstrap-table文檔 http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/