Layui弹出层 加载 做编辑页面「建议收藏」

Layui弹出层 加载 做编辑页面「建议收藏」先上效果图基本准备,引入layui的layui.css,layui.js文件<linkrel="stylesheet"href="../../../Publics/others/layui/css/layui.css"media="all"><scriptsrc="../../../Publics/others/layui/layui.js">&a

大家好,又见面了,我是你们的朋友全栈君。

layui是一款优秀的模块化前端框架。利用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 οnlοad="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("执行完了");});

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


            //具体保存操作
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/140974.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • git 删除文件 、只删除远程仓库文件、更换远程仓库

    git 删除文件 、只删除远程仓库文件、更换远程仓库

  • Android adb 命令大全「建议收藏」

    Android adb 命令大全「建议收藏」转自:https://github.com/mzlogin/awesome-adbADB,即AndroidDebugBridge,它是Android开发/测试人员不可替代的强大工具,也是Android设备玩家的好玩具。持续更新中,欢迎提PR和Issue补充指正,觉得有用的可以将此GitHub仓库Star收藏备用。注:有部分命令的支持情况可能与Android…

  • matlab中的振铃现象是啥,振铃现象产生的原因

    matlab中的振铃现象是啥,振铃现象产生的原因振铃现象是怎么回事?是什么?如何减小和抑制上冲及振铃?下面就由小编告诉大家和抑制方法吧!由于任何传输线都不可避免地存在着引线电阻、引线电感和杂散电容,因此,一个标准的脉冲信号在经过较长的传输线后,极易产生上冲和振铃现象。大量的实验表明,阴线电阻可使脉冲的平均振幅减小;而杂散电容和引线电感的存在,则是产生上冲和振铃的根本原因。在脉冲前沿上升时间相同的条件下,阴线电感越大,上冲及振铃现象就越严重;杂散…

  • ffmpeg解析MP4封装的avc1编码问题「建议收藏」

    ffmpeg解析MP4封装的avc1编码问题「建议收藏」0、问题  遇到的问题:使用ffmpeg直接读取avc1编码的mp4视频,将读取到的帧写下来(H264码流),播放失败。  原因:ffmpeg解码获取的AVPacket只包含视频压缩数据,并没有包含相关的解码信息(比如:h264的sps,pps头信息),这些解码信息包括编码的profile,level,图像的宽和高,deblock滤波器等。没有这些编码头信息解码器就不能进行解码。1、mp4…

    2022年10月17日
  • c语言sigaction,c语言信号处理sigaction[通俗易懂]

    c语言sigaction,c语言信号处理sigaction[通俗易懂]c语言信号处理sigaction(2011-04-1823:45:19)标签:c语言信号处理sigactionsighupit分类:c信号安装函数sigaction(intsignum,conststructsigaction*act,structsigaction*oldact)的第二个参数是一个指向sigaction结构的指针(结构体名称与函数名一样,千万别弄混淆了)。在结构sig…

  • linux下kegg注释软件,网页工具KOBAS进行KEGG富集分析

    KOBAS的介绍KOBAS是北大生物信息中心研发的一个网页工具,用来基因/蛋白功能注释(注释模块)和功能基因集富集(富集模块)。以下是KOBAS的英文介绍:KOBAS3.0isawebserverforgene/proteinfunctionalannotation(Annotatemodule)andfunctionalgenesetenrichment(Enri…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号