Layui弹出层取值

最新推荐文章于 2023-12-12 10:32:52 发布

「已注销」

最新推荐文章于 2023-12-12 10:32:52 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript layui

本文链接：https://blog.youkuaiyun.com/cedarMei/article/details/115837437

本文介绍了在Layui中处理弹出层取值时遇到的问题及解决方案。详细步骤包括在父页面定义传值、子页面接收值，并讨论了因父页面json重置导致子弹窗无法获取数据的错误情况及其原因。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Layui弹出层取值

1.首先在父页面定义要传过去的值


table.on('tool(demo)', function (obj) {
//obj为当前行对象
            var data = obj.data;
            json = JSON.stringify(data);
            title = obj.event;
            //如果监听到父页面点击的是修改按钮
            if (obj.event === 'edit') {
                layer.open({
                    type: 2,//子弹窗类型，建议去官网看一下，忘了
                    title: '编辑素材',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['893px', '600px'],//给一个初始大小
                    content: '/html/add-random.html'//你的子页面路径
                    , success: function () {//成功之后触发事件
                        json = {};
                        title = "";
                    }
                })

            }

2.子页面

//可以放在layui.use里面
//从父层获取值，json是父层的全局js变量。eval是将该string类型的json串变为标准的json串
            if (title1 == "edit") {
                var parent_json = eval('(' + parent.json + ')');//这样的json格式更规范，
                //看其他博客说的
                console.log(parent_json);
                form.val('example', {
                    "id": parent_json.id
                    , "randomName": parent_json.randomName// "name": "value"
                    , "capital": parent_json.capital
                    , "lower": parent_json.lower
                    , "number": parent_json.number
                    , "zh": parent_json.zh
                    , "zh_symbol": parent_json.zh_symbol
                    , "en_symbol": parent_json.en_symbol
                });
            }

3.可能会出现的错误
子弹窗获取不到父页面的json
我在父页面的成功事件里重置了json，之前用着没事，但是我把子弹窗页面放在了static文件夹，父页面放在了template文件夹里，这时候子弹窗还没渲染json就被重置了，导致取不到数据。