十六、bootstrap-table javascript导出数据

来源:互联网 发布:淘宝上买东西靠谱吗 编辑:程序博客网 时间:2024/06/03 07:00

使用bootstrap-table免不了要导出表格中的内容,直接在

中设置的参数毕竟有限,bootstrap-table当然支持更个性化的设置,下面直接贴出我这几天用到的参数,比如:不导出checkbox列,设置导出的文件类型,设置导出的文件名称等等,如果下面的内容没有符合你要求的,也可以邮件联系我:shenyan-f@163.com,大家共同学习。

前端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/

原创粉丝点击