layer中父子层的信息交互

最新推荐文章于 2025-09-09 15:36:13 发布

原创最新推荐文章于 2025-09-09 15:36:13 发布 · 3.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

本文介绍了一个基于Layer弹窗与Iframe结合实现的实体编辑功能，包括前端弹窗配置、表单提交流程及后端Django视图处理逻辑。详细展示了如何在父页面打开一个包含编辑表单的子页面，并在提交后刷新父页面表格。

父层：

//编辑页面
                    layer.open({
                        type: 2, //type为2，才会显示网页
                        title: '编辑店铺信息',
                        skin: 'layui-layer-rim', //加上边框
                        area: ['500px', '300px'], //宽高
                        content: '/edit_shop/?shop_id=' + data.shop_id + '&shop_name=' + data.shop_name + '&shop_url=' + data.shop_url, //子页面地址，会通过urls.py
                        shadeClose: true, //点击遮罩关闭层
                        btn: ['修改', '取消'],
                        yes: function (index, layero) {
                            //调用edit_shop页面的函数
                            var iframeWin = $("div.layui-layer-content > iframe")[0].contentWindow; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                            iframeWin.form_submit(); //调用子页面的form_submit函数
                            layer.close(index);
                        },
                        no: function (index, layero) {
                            layer.close(index);
                        },
                        end: function (index) {
                            //这个要写在end中，如果卸载yes中，从这一次表不会更新，为什么？
                            table.reload('idTest')
                        }
                    });

后端： Django 的views.py

def edit_shop(request):
    shop_id = request.GET.get('shop_id', None)
    shop_name = request.GET.get('shop_name', None)
    shop_url = request.GET.get('shop_url', None)
    # models.py中的类型不能覆盖构造函数
    # shop = Shop(shopId, shopName, shopUrl)

    # 如何利用传过来的参数呢，重新查岂不是不如只传id？？？？？？
    shop = Shop.objects.get(shopId=shop_id)

    logging.info('编辑店铺 shop_id=' + shop_id + ' shop_name=' + shop_name.encode('utf-8') + ' shop_url=' + shop_url)
    return render(request, 'edit_shop.html', {'shop': shop})

子层：edit_shop.html

<script>
        function form_submit () {
            $('#edit_shop_form').submit();
        }
</script>

<form id="edit_shop_form" class="layui-form" method="post" action="/update_shop/">
    {% csrf_token %}
    <div class="layui-form-item">
        <label class="layui-form-label">店铺名称</label>
        <div class="layui-input-block">
            <input type="text" name="shop_name" lay-verify="title" autocomplete="off" placeholder="请输入店铺名称"
                   class="layui-input" value={{ shop.shopName }}>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">店铺url</label>
        <div class="layui-input-block">
            <input type="text" name="shop_url" lay-verify="required" placeholder="请输入店铺url" autocomplete="off"
                   class="layui-input" value={{ shop.shopUrl }}>
        </div>
    </div>

    <input type="text" name="shop_id" hidden="hidden" value={{ shop.shopId }}>
    
</form>

查找的资料：