浅谈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 相关文章推荐
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
js 小数取整的函数
May 10 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
vue双向绑定简要分析
Mar 23 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 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 join函数应用
2011/05/04 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
解析php中static,const与define的使用区别
2013/06/18 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
qTip2 精致的基于jQuery提示信息插件
2012/02/17 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
JavaScript实现类似淘宝的购物车效果
2017/03/16 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
javascript实现简易数码时钟
2020/03/30 Javascript
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
对Python函数设计规范详解
2019/07/19 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
python-地图可视化组件folium的操作
2020/12/14 Python
实习自我鉴定模板
2013/09/28 职场文书
法律进企业活动方案
2014/03/04 职场文书
本科应届生求职信
2014/08/05 职场文书
2014年加油站工作总结
2014/12/04 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
mysq启动失败问题及场景分析
2021/07/15 MySQL
Nginx源码编译安装过程记录
2021/11/17 Servers
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers