浅谈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的文件是什么文件
Dec 06 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
js实现格式化金额,字符,时间的方法
Feb 26 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
Vue表情输入组件 微信face表情组件
Feb 11 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
smarty获得当前url的方法分享
2014/02/14 PHP
深入理解PHP中的global
2014/08/19 PHP
php curl 上传文件代码实例
2015/04/27 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
JQuery live函数
2010/12/24 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
Python中用于转换字母为小写的lower()方法使用简介
2015/05/19 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
大四自我鉴定
2014/02/08 职场文书
出纳员岗位职责
2014/03/13 职场文书
小学母亲节活动方案
2014/03/14 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
远程教育培训心得体会
2016/01/09 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书