浅谈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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
JavaScript栈和队列相关操作与实现方法详解
Dec 07 Javascript
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
Sep 04 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 新手入门
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
php利用header函数下载各种文件
2016/08/24 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
分享15个最受欢迎的Python开源框架
2014/07/13 Python
python:print格式化输出到文件的实例
2018/05/14 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
Python构建图像分类识别器的方法
2019/01/12 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
python第三方库学习笔记
2020/02/07 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
幼儿教师思想汇报
2014/01/10 职场文书
工作时间上网检讨书
2014/02/03 职场文书
洗车工岗位职责
2014/03/15 职场文书
村抢险救灾方案
2014/05/09 职场文书
学校募捐倡议书
2014/05/14 职场文书
关键在于落实心得体会
2014/09/03 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
独生子女证明范本
2015/06/19 职场文书
元宵节晚会主持词
2015/07/01 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫