Bootstrap   发布时间:2022-04-18  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了十六、bootstrap-table javascript导出数据大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

使用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',{
        field: "purchasename",title: '进货名称',formatter: addLinkFormatter,},{
        field: "purchaseDate",title: '进货日期',{
        field: "purchasePrice",title: '进货价',editable: {
            type: 'text',mode: 'inline'
        },sortable: true
    },{
        field: "count",title: '数量',{
        field: "SALEPrice",title: '销售价',titleTooltip: '销售价',{
        field: "barCode",title: '一维码',{
        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() {

                }

            });
        }
    }
});

效果图:

十六、bootstrap-table javascript导出数据

引用文章
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/

大佬总结

以上是大佬教程为你收集整理的十六、bootstrap-table javascript导出数据全部内容,希望文章能够帮你解决十六、bootstrap-table javascript导出数据所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。