文档章节

十六、bootstrap-table javascript导出数据

ssshen
 ssshen
发布于 2017/09/20 16:25
字数 625
阅读 128
收藏 2

使用bootstrap-table免不了要导出表格中的内容,直接在<table></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/

© 著作权归作者所有

ssshen
粉丝 2
博文 34
码字总数 12481
作品 0
海淀
程序员
私信 提问
【Bootstrap系列】详解Bootstrap-table

本篇文章将与大家分享bootstrap-table插件,借助于它实现基本的增删改查,导入导出,分页,父子表等。 至于其他技术,如冻结表头,列排列,行拖动,列拖动等,会在后续文章中与大家分享。 一...

Alan_beijing
2018/09/10
0
0
easyui-table表格客户端分页实例

版权声明:本文为博主原创文章,如需转载,请标明出处。 https://blog.csdn.net/alan_liuyue/article/details/76783083 一、前言 前一篇博客已经介绍了bootstrap-table的客户端分页,而本...

尘光掠影
2017/08/06
0
0
Bootstrap Table静态获取数据方式一直没法成功

@Leven_Xu 你好,想跟你请教个问题:Bootstrap Table静态获取数据方式一直没法成功,不知道为什么,请教高手作答。以下你的文章:http://my.oschina.net/799835984/blog/595293?fromerr=Yg8...

handsomeremain
2016/04/19
5.7K
5
前台报错Uncaught TypeError: Cannot read property 'template' of undefined,是我少引用哪个包了么?

Document insertRow getTableData 这个是少了包了么?

爱好
2018/11/22
14
0
swagger-bootstrap-ui 1.7.5,Swagger前端 UI 实现

swagger-bootstrap-ui 1.7.5 发布了。swagger-bootstrap-ui 是 Swagger 的前端 UI 实现,目的是替换 Swagger 默认的 UI 实现 Swagger-UI,使文档更友好一点儿 本版本,swagger-bootstrap-ui核...

八一菜刀
2018/07/16
6.2K
36

没有更多内容

加载失败,请刷新页面

加载更多

Linux的基本命令

目录的操作命令(增删改查) 增: mkdir 目录名称; 查: ls 可以看到该目录下的所有的目录和文件 ls -a,可以看到该目录下的所有文件和目录,包括隐藏的 ls -l,可以看到该目录下的所有目录和...

凹凸凸
今天
2
0
在古老unix中增加新用户

Installing 4.3 BSD Quasijarus on SIMH 目标:要在4.3BSD中新增加用户dmr,指定目录/home/dmr,uid为10 gid=31(guest组,系统已建立) 4.3BSD还没有adduser或useradd 直接修改/etc/passwd...

wangxuwei
今天
2
0
Bootstrap(六)表单样式

基本样式 所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好...

ZeroBit
昨天
3
0
SSL 证书格式转换

SSL 证书格式转换 不同服务器情况下,需要不同的证书格式。 比如 pem 转 pfx。 pem在window 平台下可以导入,但是无法正常使用。 需要转换成pfx。 推荐在线转换工具,由中国数字证书网站提供...

DrChenXX
昨天
2
0
HAProxy

xx

Canaan_
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部