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 相关文章推荐
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
javascript 类型判断代码分析
Mar 28 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
多种方式实现JS调用后台方法进行数据交互
Aug 20 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
Jun 05 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
JavaScript监听手机物理返回键的两种解决方法
Aug 14 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 Javascript
解决新建一个vue项目过程中遇到的问题
Oct 22 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
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
Js动态创建div
2008/09/25 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
基于node.js express mvc轻量级框架实践
2017/09/14 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
Python中的__slots__示例详解
2017/07/06 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
Python unittest 简单实现参数化的方法
2018/11/30 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
Python如何使用字符打印照片
2020/01/03 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
学院书画协会部门职责
2013/11/28 职场文书
大学生英语演讲稿
2014/04/24 职场文书
社团活动总结
2014/04/28 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
汽车转让协议书
2015/01/29 职场文书
2016年寒假生活小结
2015/10/10 职场文书
进行数据处理的6个 Python 代码块分享
2022/04/06 Python