Layui弹出层 加载 做编辑页面

本文介绍如何使用layui前端框架实现弹出层编辑功能。通过示例代码详细展示了配置方法及参数说明,包括如何定义弹窗样式、回调函数等。

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

layui是一款优秀的模块化前端框架。利用layui弹出层做编辑页面

先上效果图



基本准备,引入layui的layui.css,layui.js文件

    <link rel="stylesheet" href="../../../Publics/others/layui/css/layui.css" media="all">
    <script src="../../../Publics/others/layui/layui.js"></script>

Js方法

/**
 * 页面内弹出编辑窗口 //需要引入 layui.js layui.css文件
 * @param {} title 标题 不显示为false
 * @param {} area 大小 ["400px","500px"] 或者 "400px"--->只设置宽度
 * @param {} path 弹出页面路径
 * @param {} sucFunName 执行保存操作后再弹出页面中的保存方法名称
 * @param {} callBack 执行保存操作之后的其他操作
 * @returns {} 
 */
function openDetial(title, area, path, sucFunName, callBack) {
    layer.open({
        type: 2,
        title: title, //不显示标题栏
        closeBtn: 2,
        area: area,
        shade: 0.8,
        id: (new Date()).valueOf(), //设定一个id,防止重复弹出 时间戳1280977330748
        btn: ['保存', '取消'],
        btnAlign: 'r',
        moveType: 1, //拖拽模式,0或者1
        content: path,
        yes: function (index, layero) {
            var btn = layero.find('.layui-layer-btn').find('.layui-layer-btn0');
            alert("-----");
            try {
                var _ifr = btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].contentWindow ||
                     btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].children[0].contentWindow;
                var func = new Function('_ifr', "return _ifr." + sucFunName + "();");
                var flg = func(_ifr);
                if (flg == false) {
                    return false;
                } else {
                    if (callBack != null) callBack();
                    window.location.reload();
                }
            } catch (ex) {

            }
        },
        btn2: function (index, layero) {
        }
    });
}
//

以下是测试页面 测试页面中具备保存方法ApplicationSave() 


<!--// ========================================================================
// Author              :    Jp
// Email               :    1427953302@qq.com/dongmingzhixiu@outlook.com
// Create Time         :    2018-4-22 15:53:38
// Update Time         :    2018-4-22 15:53:43
// =========================================================================
// CLR Version         :    4.0.30319.42000
// Class Version       :    v1.0.0.0
// Class Description   :    编辑页面
// Computer Name       :    Jp
// =========================================================================
// Copyright ©JiPanwu 2017 . All rights reserved.
// ==========================================================================
-->
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width =device-width, initial-scale=1"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="Content-Language" content="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>JpAutoFramework</title>
    <meta content="victor" name="author"/>
     <script type="text/javascript">
        function ApplicationSave() {
            //具体保存操作
            //需要返回值,保存成功,返回true,保存失败返回false

        }
    </script>
    
</head >

<body onload="load()" style="margin: auto">
<form>
    <table id="data" class="editorTable" style="margin: auto; margin-top: 50px; width: 80%;">
        <tr style="display: none;">
            <th> 编号 </th>
            <td> <input type="text" readonly="readonly" id="ID" /></td>
        </tr>
        <tr>
            <th> 项目名称 </th>
            <td> <input type="text" id="Names"  /></td>
        </tr>
        <tr>
            <th> 金额 </th>
            <td> <input type="text" id="PRICE" /></td>
        </tr>
        <tr>
            <th> 账目类型 </th>
            <td>
                <select type="text" id="ISOUT">
                    <option value="0">支出</option>
                    <option value="1">收入</option>
                    <option value="2">信用卡消费</option>
                    <option value="3">信用卡还款</option>
                </select>
            </td>
        </tr>
        <tr>
            <th> 日期 </th>
            <td> <input type="text" id="Dates" /></td>
        </tr>
        <tr>
            <th> 描述 </th>
            <td>
                <textarea rows="10" cols="38" id="Remark"></textarea>
            </td>
        </tr>
    </table>
</form>
</body >
</html >

调用 如下参数中的ApplicationSave和编辑页面的方法名一致

openDetial("列表维护", ['600px', '550px'], "./editor.html", "ApplicationSave", function() {alert("执行完了");});

有兴趣的小伙伴,可以试试



            //具体保存操作
<think>首先,用户的问题是关于在Layui框架中实现弹出HTML页面并传递参数。具体来说,用户问的是“layui 弹出 页面传参 实现方法”。 从系统级指令来看,我需要: - 所有行内数学表达式使用 `$...$` 格式。 - 独立公式使用 `$$...$$` 格式并单独成段。 - LaTeX语法正确。 - 使用中文回答。 - 生成相关问题。 - 在回答中引用的段落末尾自然地添加引用标识,例如 `[^1]`。 用户可见的指令: - 回答结构清晰,帮助用户逐步解决问题。 - 保证回答真实可靠。 参考站内引用提供了几个相关引用: - [^1]: 关于layui操作弹出的基本方法,包括关闭- [^2]: 用户在使用layer.getChildFrame时遇到问题。 - [^3]: 展示了父子页面传参的方法。 - [^4]: 提到了在iframe中获取值的方法。 这些引用是关于Layui框架中弹出layer)的使用,特别是如何传递参数。用户的问题集中在页面传参上。 我的回答应该结构清晰,逐步解释如何实现弹出并传递参数。我可以基于提供的引用构建答案。 关键点: -Layui中,弹出通常使用 `layer.open` 方法创建。 - 传参可以通过URL参数、回调函数、或直接操作DOM来实现。 - 引用[^3]提供了一个例子:使用 `type: 2` 打开iframe,并在 `btn1` 回调中通过 `parent.window['layui-layer-iframe' + layerIndex]` 获取iframe窗口对象来传参。 - 引用[^4]提到通过 `find("iframe")[0].contentWindow.document` 来获取DOM元素的值。 步骤: 1. **打开弹出并传递初始参数**:可以通过URL参数传递。 2. **从弹出获取参数**:在回调函数中,使用 `contentWindow` 访问iframe的内容。 3. **关闭并回传数据**:在弹出页面中,使用 `parent.layer.close(index)` 关闭,并通过回调函数返回数据。 我需要确保回答真实可靠,基于Layui的官方文档或常见实践。Layui的文档支持这些方法。 回答结构: - **引言**:简要介绍Layui弹出和传参需求。 - **步骤详解**:分步说明如何实现。 - 步骤1:打开弹出时传递参数(通过URL)。 - 步骤2:在弹出页面中接收参数(使用JavaScript解析URL)。 - 步骤3:在弹出页面中处理数据后回传(使用回调函数)。 - **代码示例**:提供代码片段来演示。 - **注意事项**:提醒常见问题。 - **相关问题**:生成相关问题。 使用中文回答。 生成相关问题:基于主题,生成2-3个相关问题。 引用标识:在引用参考内容时添加 `[^1]` 等。例如,提到关闭时引用 [^1],提到传参方法时引用 [^3]。 数学表达式:用户问题中没有数学内容,但系统要求所有行内数学表达式用 `$...$`。如果回答中涉及数学(如计算),我会使用。但这里可能不需要,除非有相关计算。 最终回答大纲: 1. **介绍**:解释Layui弹出传参的基本概念。 2. **方法一:通过URL传递参数**: - 打开弹出时在URL中添加参数。 -弹出页面中解析参数。 3. **方法二:通过回调函数获取数据**: - 使用 `btn` 回调函数访问iframe内容。 4. **完整代码示例**:结合引用[^3]的例子。 5. **注意事项**:如跨域问题、DOM操作安全。 6. **相关问题**:生成2-3个相关问题。</think>### Layui 弹出页面传参实现方法 在 Layui 框架中,实现弹出(如 iframe )并传递参数是常见需求。参数传递通常涉及两个方向:**父页面弹出传递初始参数**(例如通过 URL 查询字符串),以及**弹出向父页面回传数据**(例如通过回调函数或 DOM 操作)。下面我将分步说明实现方法,确保结构清晰且可靠。参考 Layui 官方文档和社区实践,以下是具体步骤: #### 步骤 1: 父页面打开弹出并传递初始参数 在父页面中,使用 `layer.open()` 打开一个 iframe (`type: 2`),并通过 `content` 属性在 URL 中添加查询参数传递初始值。例如: ```javascript // 父页面代码 var param1 = "value1"; // 要传递的参数 var param2 = 123; var url = "popup.html?param1=" + encodeURIComponent(param1) + "&param2=" + param2; // 编码参数防止特殊字符错误 var layerIndex = layer.open({ type: 2, // iframe 类型 title: '弹出标题', area: ['800px', '500px'], content: url, // 通过URL传递参数 btn: ['确定', '取消'], btn1: function(index, layero) { // 这里是回传数据的处理逻辑(见步骤3) } }); ``` - **关键点**: - 使用 `encodeURIComponent()` 处理参数值,避免 URL 中出现非法字符[^3]。 - `type: 2` 表示 iframe ,适合加载独立 HTML 页面[^1]。 #### 步骤 2: 弹出页面接收参数 在弹出页面(如 `popup.html`)中,通过 JavaScript 解析 URL 中的查询参数: ```javascript // 弹出页面代码 (popup.html) function getUrlParams() { var params = {}; var queryString = window.location.search.substring(1); var vars = queryString.split('&'); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split('='); params[pair[0]] = decodeURIComponent(pair[1]); // 解码参数 } return params; } // 使用参数 var params = getUrlParams(); console.log("接收的参数:", params.param1, params.param2); // 输出: value1, 123 ``` - **关键点**: - 使用 `window.location.search` 获取 URL 查询字符串。 - 通过 `decodeURIComponent()` 还原编码后的参数值[^3]。 #### 步骤 3: 弹出回传数据到父页面弹出中处理数据后,通过回调函数将结果回传给父页面: ```javascript // 弹出页面代码 (popup.html) function submitData() { var result = { id: 456, name: "测试数据" }; // 要回传的数据 var index = parent.layer.getFrameIndex(window.name); // 获取当前的索引[^1] // 方法1: 通过回调函数直接返回数据(推荐) if (parent.window['layui-layer-iframe' + index]) { var callback = parent.window['layui-layer-iframe' + index].callback; // 假设父页面定义了回调函数 if (callback) callback(result); } // 方法2: 通过DOM操作设置隐藏字段值(备选) parent.document.getElementById("hiddenField").value = JSON.stringify(result); parent.layer.close(index); // 关闭弹出[^1] } ``` 在父页面中,通过 `btn1` 回调接收数据: ```javascript // 父页面代码(续步骤1的 layer.open) btn1: function(index, layero) { var iframeWin = layero.find('iframe')[0].contentWindow; // 获取iframe窗口对象[^4] var result = iframeWin.submitData(); // 调用弹出函数获取数据 console.log("回传的数据:", result); // 处理数据 } ``` - **关键点**: - 使用 `parent.window['layui-layer-iframe' + index]` 访问父页面的函数或变量[^3]。 - 通过 `contentWindow` 直接操作 iframe 的 DOM,适用于简单数据回传[^4]。 -弹出中调用 `parent.layer.close(index)` 确保关闭当前[^1]。 #### 完整示例代码 **父页面示例**: ```javascript layer.open({ type: 2, title: '编辑用户', content: 'edit.html?userId=1001', btn: ['保存', '取消'], btn1: function(index, layero) { var iframe = layero.find('iframe')[0]; var userData = iframe.contentWindow.getUserData(); // 调用弹出方法 console.log("保存用户数据:", userData); layer.close(index); } }); ``` **弹出页面 (edit.html)**: ```javascript // 接收参数 var params = new URLSearchParams(window.location.search); var userId = params.get('userId'); // userId = "1001" // 回传数据函数 function getUserData() { return { id: userId, name: document.getElementById('name').value }; } ``` #### 注意事项 1. **跨域问题**:如果弹出页面与父页面不同源,需确保跨域策略(如 CORS)已配置,否则 `contentWindow` 可能无法访问[^4]。 2. **性能优化**:传递大量数据时,建议使用 JSON 序列化,避免直接操作 DOM[^3]。 3. **错误处理**:在回调中添加 `try-catch` 块,防止因参数解析失败导致页面崩溃。 4. **兼容性**:Layui 的 `layer` 模块需在页面加载后初始化,确保脚本顺序正确[^1]。 通过以上方法,您可以高效实现参数传递,避免页面刷新,提升用户体验[^1]。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值