1.弹出对话框

layer.open() 来初始化弹层

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

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

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

  1. var loadfrom =function loaddata(data){
  2. var dd2= JSON.stringify(data);
  3. var ddd = JSON.parse(dd2);
  4. layui.form.val('example', ddd);
  5.  
  6. // layui.use(['form'], function ()
  7. // {
  8. // var form =layui.form;
  9. // var ddd = JSON.parse(dd2);
  10. // form.val('example', ddd);
  11. // });
  12. };

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

  1. <form class="layui-form" action="" lay-filter="example">
  2. <div class="layui-form-item">
  3. <label class="layui-form-label">输入框</label>
  4. <div class="layui-input-block">
  5. <input type="text" name="username" id="username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
  6. </div>
  7. </div>
  8. <div class="layui-form-item">
  9. <label class="layui-form-label">密码框</label>
  10. <div class="layui-input-block">
  11. <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
  12. </div>
  13. </div>
  14.  
  15. <div class="layui-form-item">
  16. <label class="layui-form-label">选择框</label>
  17. <div class="layui-input-block">
  18. <select name="interest" lay-filter="aihao">
  19. <option value=""></option>
  20. <option value="0">写作</option>
  21. <option value="1">阅读</option>
  22. <option value="2">游戏</option>
  23. <option value="3">音乐</option>
  24. <option value="4">旅行</option>
  25. </select>
  26. </div>
  27. </div>
  28.  
  29. <div class="layui-form-item">
  30. <label class="layui-form-label">复选框</label>
  31. <div class="layui-input-block">
  32. <input type="checkbox" name="like[write]" title="写作">
  33. <input type="checkbox" name="like[read]" title="阅读">
  34. <input type="checkbox" name="like[daze]" title="发呆">
  35. </div>
  36. </div>
  37.  
  38. <div class="layui-form-item">
  39. <label class="layui-form-label">开关</label>
  40. <div class="layui-input-block">
  41. <input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
  42. </div>
  43. </div>
  44.  
  45. <div class="layui-form-item">
  46. <label class="layui-form-label">单选框</label>
  47. <div class="layui-input-block">
  48. <input type="radio" name="sex" value="男" title="男" checked="">
  49. <input type="radio" name="sex" value="女" title="女">
  50. </div>
  51. </div>
  52. <div class="layui-form-item layui-form-text">
  53. <label class="layui-form-label">文本域</label>
  54. <div class="layui-input-block">
  55. <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
  56. </div>
  57. </div>
  58.  
  59. <div class="layui-form-item">
  60. <div class="layui-input-block">
  61. <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
  62. </div>
  63. </div>
  64. </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. TortoiseSVN使用教程[多图超详细]

    安装及下载client 端 下载Windows 端程序:http://tortoisesvn.net/downloads.一般而言,如果是32-bit的Windows XP 应该使用TortoiseS ...

  2. ATL的GUI程序设计(1)

    from:http://blog.titilima.com/atlgui-1.html 第一章 不能免俗的"Hello, World!" 在这一章里,就像所有的入门级教程一样,我也 ...

  3. POJ_1050_最大子矩阵

    http://poj.org/problem?id=1050 这道题是最大子串的扩展,遍历过每一个子矩阵就好了,期间用了最大子串的方法. #include<iostream> #inclu ...

  4. HDU 1251 统计难题 (Trie树模板题)

    题目链接:点击打开链接 Problem Description Ignatius最近遇到一个难题,老师交给他很多单词(只有小写字母组成,不会有重复的单词出现),现在老师要他统计出以某个字符串为前缀的单 ...

  5. MySQL中遍历查询结果的常用API(c)

    本中所使用的table: MySQL中的错误处理函数 unsigned int mysql_errno(MYSQL *mysql) const char *mysql_error(MYSQL *mys ...

  6. 基于Go的马蜂窝旅游网分布式IM系统技术实践

    一.引言 即时通讯(IM)功能对于电商平台来说非常重要,特别是旅游电商. 从商品复杂性来看,一个旅游商品可能会包括用户在未来一段时间的衣.食.住.行等方方面面.从消费金额来看,往往单次消费额度较大.对 ...

  7. Sklearn--(SVR)Regression学习笔记

    今天介绍一个机器学习包,sklearn.其功能模块有regression\classification\clustering\Dimensionality reduction\data preproc ...

  8. kali重置root密码

    像这样,kali系统的root密码忘记了,只需一分钟时间,快速重置root密码 第一步: 电脑开机后kali系统会进入引导界面,这是我们只需 “e” 进入启动前编辑命令(若系统没有出现这个页面,大家在 ...

  9. pytorch之 RNN regression

    关于RNN模型参数的解释,可以参看RNN参数解释 1 import torch from torch import nn import numpy as np import matplotlib.py ...

  10. Vue+Webpack打包之后超过url-loader大小限制的图片在css的background-image中使用路径问题

    一个vue项目中有一张图片,在css中background-image中使用,大小超过了url-loader大小限制.npm run dev的时候一切正常.npm run build之后图片被直接放在 ...