浅谈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验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
jquery+Jscex打造游戏力度条
Sep 12 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
Angularjs过滤器实现动态搜索与排序功能示例
Dec 13 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
2015/11/29 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
vue-router实现组件间的跳转(参数传递)
2017/11/07 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python匹配中文的正则表达式
2016/05/11 Python
简单谈谈python的反射机制
2016/06/28 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
详解Django+Uwsgi+Nginx的生产环境部署
2018/06/25 Python
Python list运算操作代码实例解析
2020/01/20 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
中学生自我鉴定
2014/02/04 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
小学生操行评语
2014/04/22 职场文书
统计专业自荐书
2014/07/06 职场文书
初三语文教学计划
2015/01/22 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android