layui.open 传值

本文介绍 layui.open 如何实现子窗口与主窗口的数据传递。重点在于理解在主窗口中如何通过 upload 方法处理子窗口的数据。
场景:在文章编辑页面中点击插入图片按钮,弹出新窗口,完成选择后再获取选定的图片
主窗口:

{extend name="base/base" /}
{block name="main"}
<form id="form" method="post" class="layui-form layui-form-pane" action="{:url('/admin/article_change')}">
    <div class="layui-form-item">
        <label class="layui-form-label">所属层级</label>
        <div class="layui-input-block" style="width:92%; position: absolute;z-index: 9999;">
            <select name="cate_id" id="cate_id">
                <option value="0">请选择分类</option>
                {volist name="list" id="v"}
                <option value="{$v.id}">{$v.name}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" placeholder="请输入文章标题" autocomplete="off" class="layui-input"
                   value="{:isset($data.title)?$data.title:''}" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片上传</label>
        <div class="layui-input-block">
            <input type="text" id="img" name="img" placeholder="请选择图片" autocomplete="off" class="layui-input"
                   value="{:isset($data.img)?$data.img:''}" lay-verify="required" style="width: 90%; float: left;">
            <a class="layui-btn" style="float: left;" href="javascript:;" onclick="upload(this, 1)">选择图片</a>
        </div>
    </div>
    <div class="layui-form-item" id="container">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
            <textarea class="layui-textarea" id="content" name="content" style="width: 100%;">{:isset($data.content)? $data.content:""}</textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" name="id" id="id" value="{:isset($data.id)?$data.id:''}">
            <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
{/block}
{block name="script"}
<!-- 配置文件 -->
<script type="text/javascript" src="/static/uedit/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/static/uedit/ueditor.all.js"></script>

<script type="text/javascript">
    var ue = UE.getEditor('content');

</script>
<script>
    layui.use(['form', 'jquery', 'layer'], function () {
        var form = layui.form, $ = layui.jquery, layer = layui.layer;
        let cate_id = '{:isset($data.cate_id)?$data.cate_id:""}';
        if (id) {
            $('#cate_id').val(cate_id);
            form.render();
        }
        //表单提交
        form.on("submit(*)", function (data) {
            $.post(data.form.action, data.field, function (data) {
                if (data.code) {
                    layer.msg(data.msg, {icon:1, time:1000});
                    setTimeout(function () {
                        parent.location.reload();
                    },1000);
                } else {
                    layer.ms('操作失败', {icon:2, time:1000});
                }
            });
            return false;
        });
    });
    //这里是open操作,重点全在这里,其实很简单用过一次就明白了
    function upload(obj, type) {
        layui.use(['layer', 'jquery'], function () {
            var layer = layui.layer, $ = layui.jquery;
            layer.open({
                type: 2,
                area: ['700px', '500px'],
                content: '/admin/get_file.html',
                btn: ['选择', '取消'],
                yes: function (index, layero) {
                    $('#img').val(layero.find('iframe').contents().find("#selected_img").val());//在回调触发后找到子窗口中的input并取值
                    layer.close(index);
                },
                btn2: function (index, layero) {
                    layer.close(index);
                },
                success: function (layero, index) {
                    //设置子窗口 图片选择数量
                    layero.find('iframe').contents().find("#select_limit").val(1);
                }
            });
        });
    }
</script>
{/block}

子窗口:子窗口就是正常的操作,没什么特别的

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content ="IE=edge,chrome=1" />
    <title>上传</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style type="text/css">
        #list{overflow: hidden;padding: 10px 0;}
        #list .empty {line-height:150px;text-align:center;color:#999;}
        #list .item {width: 120px;margin:10px;float: left;position: relative;}
        #list .item .image{background-size:cover;background-repeat: no-repeat;width: 120px;height: 120px;border: 1px solid #EEE;position:relative;background-position:center;}
        #list .item .image .checked{position: absolute;display: none;right: 0;bottom: 0;border: 14px solid #07d;border-left-color: transparent;border-top-color: transparent;}
        #list .item .image .checked i{color: #FFF;font-size: 14px;right: -14px;top: -2px;position: absolute;display: block;}
        #list .item .name{text-align:center;height:20px;line-height:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:100%;color:#999;}
        #list .item.checked .image {border-color: #07d;}
        #list .item.checked .image .checked{display:block;}
        #list .item .action{text-align:center; margin-top: 5px;}
        #list .item .action a{color:#999;}
        #pageContainer{padding:0 0 50px 210px;}
        #pageContainer a{text-decoration:none;}
        #pageContainer #pageLeft{width:200px;float:left;margin:0 0 0 -210px;border-radius:3px;}
        #categoryMenu{padding:10px;background:#EEE;height:40px;box-sizing:border-box;}
        #categoryMenu a{display:inline-block;width:30%;text-align:center;color:#999;}
        #categoryMenu a.enable{color:#bd2326;}
        #categoryTree{padding:10px 0;margin:0;}
        #categoryTree ul{padding:0;}
        #categoryTree a:hover{text-decoration:none;}
        #categoryTree a.selected{color:#bd2326;}
        #pageContainer #pageRight{border-radius:3px;}
        #contentHead{padding:5px 10px;background:#FFF;border-bottom:1px solid #EEE;height:40px;box-sizing:border-box;}
        #imageUploadButton{width:100px;float:right;border-radius:4px;}
        #contentTitle{line-height:30px;}
        #contentTitle a{display:inline-block;margin:0 0 0 10px;font-size:12px;color:#999;}
        #contentTitle a.enable{color:#bd2326;}
        .image-this{border: 1px solid #24a886!important;position: relative}
        .image-this:before{content: "";background: url("/static/plug/file/img/image-this.png");width: 20px;height: 20px;position: absolute; right: 0; bottom: 0}
        #_frameBox {padding:10px;background: #FFF;font-size: 13px;}
        #_frameTool {position: fixed;bottom: 0;left: 0;right: 0;background: #FFF;border-top: 1px solid #CCC;padding: 10px;text-align: right;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width:100%;z-index:9999;}
        .layui-nav-tree .layui-nav-child a{color: #999;}
        .layui-nav-tree .layui-nav-item a{color: #777!important;}
        .layui-nav-tree .layui-nav-bar{display: none}
        .layui-nav-itemed > a{background: #eee;}
        .layui-nav-itemed .layui-nav-more{border-color: transparent transparent #333;border-bottom-color: rgba(0,0,0,1);border-top-color: rgba(0,0,0,0)!important;}
        .layui-nav-item .layui-nav-more{border-top-color: rgba(0,0,0,1)}
        .layui-nav-tree .layui-nav-item a:hover,.layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this > a, .layui-nav-tree .layui-this > a:hover{background: #eee; color: #333!important;}
        .layui-nav-itemed .layui-nav-child,.layui-nav{background: #fafafa!important;}
        .wjj{background: url("/static/plug/file/img/wjj.png") no-repeat center; background-size: 16px; width: 20px; height: 40px; margin-right: 2px; display: inline-block; vertical-align: top;}
        .layui-nav .layui-nav-item a{padding: 0 10px;}
        .back{border-bottom: 1px solid #ebebeb;}
        .back i{width:20px; display: inline-block;text-align: center; font-size: 14px; margin-right: 2px;}
        .active{border:1px solid #24a886!important;position: relative}
        .active:before{position:absolute;right: 0;bottom: 0;width: 0;height: 0;color: #fff; font-size: 16px;text-align: center; content: "\e605";font-family: layui-icon!important;line-height: 20px; border-top: 20px solid rgba(255,255,255,0);border-right: 20px solid #24a886;border-bottom: 20px solid #24a886;border-left: 20px solid rgba(255,255,255,0);}


    </style>
</head>

<body>
<div>
    <!--内容-->
    <div id="pageContainer" style="overflow: hidden">
        <!--左侧-->
        <div id="pageLeft">
            <!--操作-->
            <div id="categoryMenu">
                <a href="javascript:;" onclick="createCategory()"><i class="layui-icon">&#xe61f;</i> 新建</a>
                <a href="javascript:;"><i class="layui-icon">&#xe642;</i> 修改</a>
                <a href="javascript:;"><i class="layui-icon">&#xe640;</i> 删除</a>
            </div>
            <!--列表-->
            <ul class="layui-nav layui-nav-tree layui-inline" style="margin-right: 10px;">
                <li class="layui-nav-item layui-nav-itemed">
                    <dl class="layui-nav-child">

                        <dd class="back">
                            {if $prevPath == '' or $prevPath == '/'}
                            <a href="/admin/get_file.html"><i class="layui-icon">&#xe65c;</i>返回上一级</a>
                            {else}
                            <a href="/admin/get_file.html?path={$prevPath}"><i class="layui-icon">&#xe65c;</i>返回上一级</a>
                            {/if}
                        </dd>

                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <dl class="layui-nav-child" id="dirs">
                        {volist name="dirList" id="v"}
                        <dd><a href="/admin/get_file.html?path={$virtualPath}/{$v}"><i class="wjj"></i>{$v}</a></dd>
                        {/volist}
                    </dl>
                </li>
            </ul>
        </div>
        <!--右侧-->
        <div id="pageRight">
            <!--操作-->
            <div id="contentHead">
                <!--上传按钮-->
                <div id="imageUploadButton">
                    <button type="button" class="layui-btn" id="upload" style="height: 30px; line-height: 30px; width: 100px;">上传图片</button>
                </div>
                <div id="contentTitle">
                    图片列表
                    <a href="javascript:;"><i class="layui-icon">&#xe640;</i>删除</a>
                </div>
            </div>
            <!--内容1-->
            <div id="contentBody">
                <div id="list">
                    <!--图1-->
                    {volist name="fileList" id="v"}
                    <div class="item">
                        <div class="image" style="background-image:url(/uploads/{$virtualPath}/{$v});" path="/uploads/{$virtualPath}{$v}" onclick="selection(this)">
                            <div class="checked">
                                <i class="layui-icon">&#xe63f;{$v}</i>
                            </div>
                        </div>
                        <!--眼图标-可点击-->
                        <div class="action">
                            <a href="/uploads/{$currentPath}/{$v}" target="_blank" title="查看大图">
                                <span class="layui-icon">&#xe64c;</span>
                            </a>
                        </div>
                    </div>
                    {/volist}
                </div>
            </div>
        </div>
    </div>
</div>

<div id="_frameTool">
    <input type="hidden" id="virtualPath" value="{$virtualPath}">
    <!--<a href="javascript:;" class="layui-btn" onclick="releaseBtn();">确定</a>-->
    <!--<a href="javascript:;" id="closeBTN" class="layui-btn layui-btn-primary">关闭</a>-->
</div>
<!--分类弹框-->
<div id="category" style="display: none;">
    <div style="overflow: hidden; padding: 20px;">
        <span style="height: 38px; line-height: 38px; float: left; width: 20%;">名称:</span>
        <input type="text" class="layui-input" style="width: 76%; float: left;">
    </div>
    <div style="margin-top: 1px; padding: 0 20px; height: 50px; line-height: 50px; background: #eee;">
        <button class="layui-btn" style="height: 30px; line-height: 30px;">添加</button>
    </div>
</div>
<script type="text/javascript" src="/layui/layui.js"></script>

<input id="selected_img" type="hidden" value="">
<input id="select_limit" type="hidden" value="0">
<script>
    function selection(obj) {
        layui.use(['jquery', 'layer'], function () {
            var $ = layui.jquery, layer = layui.layer;
            if ($('#select_limit').val() == 1) {
                $(obj).addClass('active');
                let img = $(obj).attr('path');
                img = img.replace(/\/\//,'/');
                $('#selected_img').val(img);
            } else {

            }
        });
    }
</script>
</body>
</html>

代码有点乱,其实比较重要的就在主窗口 upload 方法中

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值