fastadmin PHPExcel导出 js样式 两种方式

这篇博客介绍了如何在HTML中添加导出功能,并提供了两种不同的JavaScript实现方式。第一种是无弹窗直接导出,根据用户选择的条件进行数据导出;第二种则是通过弹出确认层,提供三个选项(选中项、本页数据、全部数据)供用户选择后再导出。这些功能的实现涉及到前端表格操作和后台导出逻辑的配合。
摘要由CSDN通过智能技术生成

1、html添加导出

<a href="javascript:;" class="btn btn-success btn-export {:$auth->check('student/student/daochuExcel')?'':'hide'}"
                           title="{:__('Export')}" id="btn-export-file"><i class="fa fa-download"></i> {:__('Export')}</a>

js有两种格式 在对应的js(路径:/public/assets/js/backend/xxx.js)里添加下图代码
(1、)没有弹出框直接导出,并加条件

   $(document).on("click", ".btn-export", function () {
   //获取条件
                var ids = Table.api.selectedids(table);
                var options = table.bootstrapTable('getOptions');
                var search = options.queryParams({});
                var filter =search.filter;

                window.location.href='student/daochuExcel?filter='+filter+"&ids="+ids;
             });

(2、)有弹出层

//*************************** 自定义export开始
            $(document).on("click", ".btn-export", function () {
                var ids = Table.api.selectedids(table);
                var page = table.bootstrapTable('getData');
                var all = table.bootstrapTable('getOptions').totalRows;

                console.log(ids, page, all);
                Layer.confirm("请选择导出的选项<form action='" + Fast.api.fixurl("student/student/daochuExcel") + "' method='post' target='_blank'><input type='hidden' name='ids' value='' /><input type='hidden' name='filter' ><input type='hidden' name='op'><input type='hidden' name='search'><input type='hidden' name='columns'></form>", {
                    title: '导出数据',
                    //btn: ["选中项(" + ids.length + "条)", "本页(" + page.length + "条)", "全部(" + all + "条)"],
                    btn: ["选中项(" + ids.length + "条)"],
                    success: function (layero, index) {
                        $(".layui-layer-btn a", layero).addClass("layui-layer-btn0");
                    }
                    , yes: function (index, layero) {
                        submitForm(ids.join(","), layero);
                        return false;
                    }
                    ,
                    btn2: function (index, layero) {
                        var ids = [];
                        $.each(page, function (i, j) {
                            ids.push(j.id);
                        });
                        submitForm(ids.join(","), layero);
                        return false;
                    }
                    ,
                    btn3: function (index, layero) {
                        submitForm("all", layero);
                        return false;
                    }
                })
            });
            var submitForm = function (ids, layero) {
                var options = table.bootstrapTable('getOptions');
                console.log(options);
                var columns = [];
                $.each(options.columns[0], function (i, j) {
                    if (j.field && !j.checkbox && j.visible && j.field != 'operate') {
                        columns.push(j.field);
                    }
                });
                var search = options.queryParams({});
                $("input[name=search]", layero).val(options.searchText);
                $("input[name=ids]", layero).val(ids);
                $("input[name=filter]", layero).val(search.filter);
                $("input[name=op]", layero).val(search.op);
                $("input[name=columns]", layero).val(columns.join(','));
                $("form", layero).submit();
            };
            //*************************** 自定义export结束

接下来自己写后台导出功能

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值