layui 文件下载 下载前弹窗设置条件

最新推荐文章于 2023-07-16 12:02:22 发布
最新推荐文章于 2023-07-16 12:02:22 发布
阅读量1.4k 收藏 3
点赞数
分类专栏： 24_前端技术_JavaScript 25_前端技术_jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34545939/article/details/118382879
版权

1，在结果列表页，选择toolbar按钮

 2，点击下载按钮，弹出框展示表单，设置条件

 3，选择条件，点击下载按钮

代码实现：完整html，完美伸手

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文件配置管理</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
</head>
<body class="pear-container">
<form class="layui-form" action="" id="popSearchRoleTest" style="display:none;" autocomplete="off">
    <div class="mainBox">
        <div class="main-container">
            <div class="main-container">
                <div class="layui-form-item" id="div-branchCode">
                    <label class="layui-form-label">渠道：</label>
                    <div class="layui-input-inline">
                        <input type="text" id="d-branchCode" name="branchCode" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" id="div-fileType">
                    <label class="layui-form-label">任务类型：</label>
                    <div class="layui-input-inline">
                        <input type="text" id="d-type" name="type" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">工作日：</label>
                    <div class="layui-input-inline">
                        <input type="text" id="d-workDate" name="workDate" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-form-item layui-inline">
                        <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="downloadFileSend">
                            <i class="layui-icon layui-icon-search"></i>
                            下载
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <div class="layui-form-item layui-inline">
                    <label class="layui-form-label">渠道</label>
                    <div class="layui-input-inline">
                        <select name="branchCode" lay-verify="required" id="q-branchCode">
                            <option value="">请选择</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item layui-inline">
                    <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
                        <i class="layui-icon layui-icon-search"></i>
                        查询
                    </button>
                </div>
            </div>
        </form>


    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <table id="user-table" lay-filter="user-table"></table>
    </div>
</div>

<script type="text/html" id="fileConfig-bar">
    {{#  if(d.actionMode == "0"){ }}
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="downloadFile">下载</button>
    {{# } }}


</script>

<!--模板-->
<script type="text/html" id="user-sex">
    {{#if (d.sex == 1) { }}
    <span>男</span>
    {{# }else if(d.sex == 2){ }}
    <span>女</span>
    {{# } }}
</script>

<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'common', 'laydate'], function () {
        let laydate = layui.laydate;
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;

        let MODULE_PATH = "fileConfig/";

        let cols = [
            [{
                type: 'checkbox'
            },
                {
                    title: 'ID',
                    field: 'id',
                    align: 'center'
                },
                {
                    title: '渠道',
                    field: 'branchCodeDesc',
                    align: 'center'
                },
                {
                    title: '文件名称',
                    field: 'descName',
                    align: 'center'
                },
                {
                    title: '操作',
                    toolbar: '#fileConfig-bar',
                    align: 'center'
                }
            ]
        ];

        table.render({
            elem: '#user-table',
            url: '/xxx/list.htm',
            parseData: function (res) {//res 即为原始返回的数据
                res = $.parseJSON(res);
                if (res.code != '000000') {
                    res.code = 0;
                    res['data'] = [];
                }
                return res;
            },
            cols: cols,
            skin: 'line',
            defaultToolbar: []
        });

        laydate.render({
            elem: '#d-workDate' //指定元素
            ,format: 'yyyyMMdd' //日期格式
            ,btns: ['clear', 'confirm']
        });

        //下载
        table.on('tool(user-table)', function (obj) {
            if (obj.event === 'downloadFile') {
                window.downloadFile(obj);
            }
        });

        form.on('submit(user-query)', function (data) {
            table.reload('user-table', {
                url: '/xxx/list.htm',
                where: data.field
            });
            return false;
        });

        form.on('submit(downloadFileSend)', function(data){

            var branchCode = $('#d-branchCode').val();
            var workDate = $('#d-workDate').val();
            var type = $('#d-type').val();

            // window.location.href = "/xxx/downloadFile.htm?branchCode=" + branchCode + "&workDate=" + workDate + "&type=" + type;
            var downloadURL = "/xxx/downloadFile.htm?branchCode=" + branchCode + "&workDate=" + workDate + "&type=" + type;
            // window.open(downloadURL);
            // return false;


            // window.open(downloadURL, '_blank', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=400,height=600');
            window.open(downloadURL, '_parent');

           //表单清空
           $("#popSearchRoleTest")[0].reset();
           //更新表单
           layui.form.render();
           //关闭弹窗
           layer.close(layer.index);
            return false;
        });

        window.downloadFile = function (obj) {
            layer.open({
                //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                type: 1,
                title: "文件下载提示",
                area: ['60%', '60%'],
                content: $("#popSearchRoleTest"),
                cancel: function(){
                    // 右上角关闭事件的逻辑
                    $("#popSearchRoleTest")[0].reset();
                    layui.form.render();
                    table.reload('user-table');
                }
            });
            //隐藏渠道
            $("#div-branchCode").hide();
            $("#div-fileType").hide();
            $('#d-branchCode').val(obj.data.branchCode);
            $('#d-type').val(obj.data.type);
        };

        $.ajax({
            url: '/genenumbyclass.htm',
            dataType: 'json',
            data: {
                'className': 'com.qiangungun.core.enums.BranchCode'
            }, //查询状态为正常的所有机构类型
            type: 'post',
            success: function (data) {
                var dataArr = JSON.parse(data);
                $.each(dataArr, function (index, item) {
                    $('#q-branchCode').append(
                        new Option(item.text, item.code));// 下拉菜单里添加元素
                });
                layui.form.render("select");
            }
        });
    });
</script>
</body>
</html>

偷了个懒~

MoShaoBBC
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
OpenLayer-地图下载
zhushanlin的博客
04-27 65
【代码】OpenLayer-地图下载。
layui: layer.open加载窗体时出现遮罩层的解决方法
10-16
如果不希望完全去除遮罩层，而是想自定义它的样式，可以在全局 CSS 文件中设置 `.layui-layer-shade` 类的样式，调整颜色、透明度等属性。 4. **控制遮罩层关闭**： 如果希望在特定条件下关闭遮罩层，可以监听 `...
layUI实现文件下载
最新发布
luoawai的博客
07-16 2917
【代码】layUI实现文件下载。
layui的上传和下载
qq_37111820的博客
07-13 2883
layui的上传和下载前端代码后台代码 前端代码 <button type="button" class="layui-btn" id="select">选择文件</button> <button type="button" class="layui-btn" id="doinput">上传</button> <a class="layui-b...
Pear Admin 是 一 款 开 箱 即 用 的 前 端 开 发 模 板
05-07
Pear Admin 是一款开箱即用的前端开发模板，扩展Layui原生UI样式，集成第三方开源组件，提供便捷快速的开发方式，延续 Admin 的设计规范。异步 Ajax 的菜单构建，完善的多标签页，单标签页的共存，丰富自由的布局方式，为研发者提供相对完善的前端解决方案。
layui 前端下载文件方法
weixin_45214675的博客
12-30 3553
【代码】layui 前端下载文件方法。
Layui 文件下载
z60015260的博客
06-17 5923
简单说明:通过XMLHttpRequest发起请求，后端flask使用方法send_file(file, as_attachment=True)直接返回文件1.Layui html还是常用的数据表格，代码如下 2.上面代码出来数据表格外，增加XMLHttpRequest请求 二.后端flask从ftp下载文件保存，然后发送给客户端 1.flask代码 三.相关截图 1.文件列表2.点击'下载'...
java-layui下载单个或多个文件
qq_37889636的博客
10-10 2166
java-layui下载单个或多个文件
lauyi实现表格内显示文件名称，点击实现下载功能。
weixin_64854388的博客
07-18 729
lauyi实现表格内显示文件名称，点击实现下载功能。
LayUI table 刷新页面不重置页码
04-18
为了实现页码重置，我们需要在`reload`函数中添加一个条件判断，当刷新时，如果希望页码重置，就将页码设置为1。 具体修改的源码可能如下： ```javascript // 原始的table.reload方法 table.reload = function(id,...
【批量下载】fselect等.zip
11-23
layui是一个轻量级的前端UI框架，它提供了丰富的模块化组件，如表格、按钮、弹窗、表单等，旨在帮助开发者快速构建美观且响应式的网页应用。而fselect作为layui的一部分，专注于解决多选选择问题，使得用户在大量...
layui中文离线文档.zip
10-14
这个"layui中文离线文档.zip"压缩包包含了layui的完整文档，使得开发者无需联网即可查阅相关资料，这对于在没有网络环境或者网络条件较差的情况下进行开发工作尤其便利。 layui框架的核心特点在于它的模块化设计，...
layui-v2.2.5中文离线文档.rar
10-18
3. **组件丰富**：layui包含表格、表单、按钮、图标、弹窗、提示、下拉菜单、树形结构、分页等多种组件，满足各种常见的网页开发需求。 4. **API友好**：layui的API设计简洁易用，使得开发者可以快速上手并进行高效...
使用layui从服务器上下载docx文件的流程
qq_39951524的博客
04-16 1125
【代码】使用layui从服务器上下载docx文件的流程。
layui 附件上传、预览、删除、下载
wan小小冰的博客
11-25 1万+
layui在开发文档中提供了 附件上传的方法upload.render(），此篇文章在此模块基础方法上扩展补充了附件预览、删除、下载的实现方法。具体如下： layui 文件/图片上传 layui 相册层 一、html <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label"><span class="font-colo
Layui框架利用a标签下载导出数据
m0_65607651的博客
06-29 729
Layui框架利用下载导出数据
Layui上传下载实现
JLKQUB的博客
12-22 1897
Layui+SSM上传下载文件 上传Controller //上传 @RequestMapping("/sc") @ResponseBody public String sc(@RequestParam("uploadFile")MultipartFile file, HttpServletRequest req, HttpServletResponse resp)throws IllegalStateException, IOException { Syst...
JS结合layui实现文件预览、下载功能
热门推荐
夏呆毛的博客
10-23 1万+
JS结合layui实现文件预览、下载功能 这俩天做项目，需要做一个下载pdf的功能，但是需要实现客户点击文件先进行预览，然后预览界面得有下载按钮，提供下载。之前已经写过一篇直接下载的文章了，这篇主要记录一下预览功能； 用到的技术 ：JS + layui(结合iframe) 一、html代码 <div class="grey-card jus-c ptb30 flex"> <div class="tc mlr50 cupointer" οnclick="getProjec
layui提示消息后关闭当前弹窗
06-09
您可以使用以下代码在弹窗提示消息后关闭当前弹窗： ``` layer.msg('提示消息', { time: 2000 //2秒后自动关闭 }, function(){ var index = parent.layer.getFrameIndex(window.name); //获取当前窗口的索引 parent.layer.close(index); //关闭当前弹窗 }); ``` 这段代码先使用 `layer.msg()` 方法显示提示消息，然后在这个方法的第二个参数中设置了 `time` 属性为 2000 毫秒，表示 2 秒后自动关闭。在 `layer.msg()` 方法的第三个参数中定义一个回调函数，在这个回调函数中获取当前窗口的索引，并使用 `parent.layer.close()` 方法关闭当前弹窗。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值