Layui弹出层 加载 做编辑页面的方法


Posted in Javascript onSeptember 16, 2019

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

先上效果图

Layui弹出层 加载 做编辑页面的方法

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

<link rel="stylesheet" href="../../../Publics/others/layui/css/layui.css" rel="external nofollow" 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()

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

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

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

以上这篇Layui弹出层 加载 做编辑页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript JSON操作入门实例
Apr 16 Javascript
javascript的数组和常用函数详解
May 09 Javascript
JS区分浏览器页面是刷新还是关闭
Apr 17 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
Jan 23 Javascript
基于pako.js实现gzip的压缩和解压功能示例
Jun 13 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 #Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 #Javascript
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 #Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 #Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 #Javascript
Layui点击图片弹框预览的实现方法
Sep 16 #Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 #Javascript
You might like
URL Rewrite的设置方法
2007/01/02 PHP
php 读取文件乱码问题
2010/02/20 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
[46:03]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
详解Django admin高级用法
2019/11/06 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
好习惯伴我成长演讲稿
2014/05/21 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
换届选举主持词
2015/07/03 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
python实现局部图像放大
2021/11/17 Python