1.弹出对话框

layer.open() 来初始化弹层

 // 监听添加操作
$(".data-add-btn").on("click", function () {
var that = this;
//多窗口模式,层叠置顶
layer.open({
type: 2 //此处以iframe举例
, title: '添加机构信息'
, area: ['690px', '460px']
, shade: 0.5
, maxmin: true
, offset: "auto"
, content: './from_add.html'
, btn: ['确定'] //只是为了演示
, yes: function (index, layero) {
var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method();
//console.log(body.html()) //得到iframe页的body内容
//var data1 = iframeWin.getfrom();
console.log(iframeWin.layui.form.val('example')); //这里只有layui 2.5.5的时候可以取到值
layer.closeAll();
}
, zIndex: layer.zIndex //重点1
, success: function (layero,index) {
var body = layer.getChildFrame('body', index);
var iframeWin = window[layero.find('iframe')[0]['name']];
//body.find("#username")[0].value='Hi,我是从父页来的';
var dd={
"password": "123456"
, "interest": 1
, "like[write]": true //复选框选中状态
, "close": true //开关状态
, "sex": "女"
, "desc": "我爱 layui"
};
iframeWin.loadfrom(dd);
}
});
});

2.在context的html中定义环视 loadform 并传值

注:这里测试发现,如果 给from直接传形参如:form.val('example', data); 会初始化失败,form 中没有数据但是不报错,但是序列化,反序列化后成功(估计是这个对象直接初始化有问题,layui这里有bug)

    var loadfrom =function loaddata(data){
var dd2= JSON.stringify(data);
var ddd = JSON.parse(dd2);
layui.form.val('example', ddd); // layui.use(['form'], function ()
// {
// var form =layui.form;
// var ddd = JSON.parse(dd2);
// form.val('example', ddd);
// });
};

注:弹出的窗口时官方示例:注意是:layui-form

<form class="layui-form" action="" lay-filter="example">
<div class="layui-form-item">
<label class="layui-form-label">输入框</label>
<div class="layui-input-block">
<input type="text" name="username" id="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-block">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div> <div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1">阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div> <div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="写作">
<input type="checkbox" name="like[read]" title="阅读">
<input type="checkbox" name="like[daze]" title="发呆">
</div>
</div> <div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
</div>
</div> <div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" checked="">
<input type="radio" name="sex" value="女" title="女">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">文本域</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
</div>
</div> <div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
</div>
</div>
</form>

layui 弹出层layer中from初始化 ,并在btn中返回from.data的更多相关文章

  1. layui弹出层layer的area过大被遮挡

     layer弹出窗口在弹出时指定了area,弹出后,如果当前页面(iframe)大小比弹出的窗口小,那么就会出现无法操作弹出窗口的尴尬情况.如图: 弹出窗口比当前页面大,这时,唯有放大整个页面才能看到 ...

  2. Layui 弹出层组件——layer的模块化开发实例应用

    Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...

  3. layer/layui弹出层插件bug

    <button class="layui-btn" lay-submit lay-filter="formDemo" id="layui-btn ...

  4. 弹出层layer的使用

    弹出层layer的使用 Intro layer是一款web弹层组件,致力于服务各个水平段的开发人员.layer官网:http://layer.layui.com/ layer侧重于用户灵活的自定义,为 ...

  5. layui弹出层之应用实例讲解

    从酒店管理系统到智能门锁及其现在的资源共享平台,layui框架,我们团队用的比较多的就是这个layui弹出层. layui弹出层,除了页面iframe层我们比较常用还有就是表单校验和其他相关的友好提示 ...

  6. Layui弹出层、日期和时间选择、即时通讯、分页

    Layui弹出层.日期和时间选择.即时通讯.分页 弹层组件文档 - layui.layer 对于弹出层的感觉是:layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持. ...

  7. layui弹出层处理(获取、操作弹出层数据等)

    要点: 字符串被渲染为弹窗层之后,回自动转换为DOM,可以使用jq进行各种操作 <!DOCTYPE html> <html> <head> <meta cha ...

  8. layui弹出层回调的使用

    <%@page language="java" contentType="text/html; charset=UTF-8"%> <%@ in ...

  9. adminlte+layui框架搭建3 - layui弹出层

    在amdinlte首页引入layui.js 和layui.css后添加代码 <script> layui.use(['layer'], function () { var layer = ...

随机推荐

  1. Lua使用luasocket http请求例子

    local http=require("socket.http"); local request_body = [[login=user&password=123]] lo ...

  2. Codeforces 922 C - Robot Vacuum Cleaner (贪心、数据结构、sort中的cmp)

    题目链接:点击打开链接 Pushok the dog has been chasing Imp for a few hours already. Fortunately, Imp knows that ...

  3. java架构之路-(netty专题)netty的编解码(出入战)与粘包拆包

    上次回归: 上次博客我们主要说了netty的基本使用,都是一些固定的模式去写的,我们只需要关注我们的拦截器怎么去写就可以了,然后我们用我们的基础示例,改造了一个简单的聊天室程序,可以看到内部加了一个S ...

  4. 【算法】混合流体模拟demo

    展示一个流体模拟算法的实现 地址:http://www.iqiyi.com/w_19rzs1anol.html 采用C++编写,Blender渲染. 截图 参考文献 REN, B., LI, C., ...

  5. VFP CursorAdapter 起步三(作者:Doug Hennig 译者:fbilo)

    可重用数据类 VFP 的程序员们想要一个可重用的数据类已经很久了.尽管在过去的版本中也有许多解决这个问题的办法,不过总是有点美中不足.现在在 VFP 8里,我们有了真正的可重用数据类.这个月,Doug ...

  6. tensorflow roadshow 全球巡回演讲 会议总结

    非常荣幸有机会来到清华大学的李兆基楼,去参加 tensorflow的全球巡回.本次主要介绍tf2.0的新特性和新操作. 1. 首先,tensorflow的操作过程和机器学习的正常步骤一样,(speak ...

  7. php 安装扩展插件实例-gd库

    今天给php 安装一个扩展插件 gd库   一.gd库是什么 gd库是一个开源的图像处理库,它通过提供一系列用来处理图片的API,使其可以用来创建图表.图形.缩略图以及其他图像的处理操作. gd库支持 ...

  8. Linux 配置 DNS

    这里不讨论如何在linux上搭建一台DNS服务器: 这里讨论的是 配置 linux系统,让其能够解析域名,使用户可以流畅使用Internet 先了解几个文件,位于/etc目录下的有:hosts,hos ...

  9. 优雅的C#

    @符号:字符串中的转义符不转义,可支持字符串换行,例如:string test = "hello\\",正常输出hello\,改成string test = @"hell ...

  10. http各个版本(1/1.1/2)对比

    参考的文章: 从理论到实践 全面理解HTTP/2 HTTP协议以及HTTP2.0/1.1/1.0区别 综合阐述http1.0/1.1/2和https 目录: http1.1 长连接 HTTP 1.1支 ...