layui弹出层iframe父页面操作子页面

最新推荐文章于 2023-07-31 11:06:21 发布

原创最新推荐文章于 2023-07-31 11:06:21 发布 · 785 阅读

0 ·

CC 4.0 BY-SA版权

layui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用layui框架创建一个全屏编辑弹窗，用于修改商品偏好策略的详细信息，包括产品ID、名称、使用限制及折扣策略。通过AJAX调用获取折扣策略列表并填充到下拉菜单中，同时预填已有的策略信息。

var index = layer.open({
    type: 2,
    title: ["修改", "background-color:#1E9FFF;color:#fafafa;"],
    area: ['100%', '100%'],
    content: './pages/commodityPreferenceStrategy_edit.html',
    success: function (layero, index) {
    	//获取弹出层的body
        var body = layui.layer.getChildFrame('body', index);
        body.find("#form_data input[name='productId']").val(leaguerDate.productId);
        body.find("#form_data input[name='name']").val(leaguerDate.name);
        body.find("#form_data input[name='useLimit']").val(leaguerDate.useLimit ? leaguerDate.useLimit : 0);
        $.ajax({
            url: "/rule/api/memberdiscountstrategy/all",
            headers: { 'Authorization': token },
            type: "get",
            contentType: 'application/json',
            success: function (obj) {
                let html = '<option value="0">无折扣</option>'
                obj.data.forEach(item => {
                    html += `<option value="${item.id}">${item.name}</option>`
                })
                body.find("#form_data #discountStrategy").html(html)
                body.find("#form_data #discountStrategy").val(leaguerDate.discountStrategyId ? leaguerDate.discountStrategyId : 0);
                // 记得重新渲染表单
                //获取新窗口对象
                var iframeWindow = layero.find('iframe')[0].contentWindow;
                //重新渲染
                iframeWindow.layui.form.render();
            },
            error: function (returndata) {
                alert(returndata);
            }
        });
    }
});