浅谈layer的iframe弹窗给里面的标签赋值的问题


Posted in Javascript onNovember 10, 2016

说到这一篇,真的是颠覆了我的思维。

官方文档,没有介绍这一部分的操作,大致上提了一下。

我的思路是把页面的数据传过去,在iframe弹窗的页面拿到接收到的数据,然后赋值,但是这样就会有个问题,

怎么传值呢?

想到了url传参,但是我的数据太长了,这样不保险。

第二种动作方法去数据库读取,然后在传递,可是我实在是不想已经有的数据还去一次数据库,那不是浪费性能么,

然后询问了无数群友,才有了这个方法

先上效果图

浅谈layer的iframe弹窗给里面的标签赋值的问题

然后上代码

function editUser(i) { //编辑按钮的方法
    var rows = $("#userGrid").datagrid("getRows");
    layer.open({
      title: false,
      type: 2,
      closeBtn: false,
      area: ['420px', '560px'],
      skin: 'layui-layer-rim', //加上边框
      content: ['/Admin/ShowForm/EditUserInfo', 'no'],
      success: function (layero, index) {
        var body = layer.getChildFrame('body', index); //巧妙的地方在这里哦
        body.contents().find("#userName").val(rows[i].UserName);
        body.contents().find("#mail").val(rows[i].MailBox);
        if (rows[i].Tel != "-") {
          body.contents().find("#tel").val(rows[i].Tel);
        }
        if (rows[i].Mobile != "-") {
          body.contents().find("#mobile").val(rows[i].Mobile);
        }
        body.contents().find("#addr").val(rows[i].Addr);
        body.contents().find("#isstutas").val(rows[i].IsStatus);

      }
    });
  }

先得到整个页面,然后把id拿出来一个个赋值是不是很好呢!

以上就是小编为大家带来的浅谈layer的iframe弹窗给里面的标签赋值的问题全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
jQuery 对象中的类数组操作
Apr 27 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
jQuery实现拖拽效果插件的方法
Mar 23 Javascript
javascript搜索框效果实现方法
May 14 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
Sep 05 Javascript
总结JavaScript中布尔操作符||与&&的使用技巧
Nov 17 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
使用js在layui中实现上传图片压缩
Jun 18 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 #Javascript
实现easyui的datagrid导出为excel的示例代码
Nov 10 #Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 #Javascript
VueJS全面解析
Nov 10 #Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 #Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 #Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 #Javascript
You might like
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
第十四节--命名空间
2006/11/16 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
JS+CSS实现仿msn风格选项卡效果代码
2015/10/22 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
实例Python处理XML文件的方法
2015/08/31 Python
Python变量和数据类型详解
2017/02/15 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
利用python实现周期财务统计可视化
2019/08/25 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
python如何写出表白程序
2020/06/01 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
同程旅游英文网站:LY.com
2018/11/13 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
高三教师工作总结2015
2015/07/21 职场文书
爱国主题班会教案
2015/08/14 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers