浅谈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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
javascript屏蔽右键代码
May 15 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
JS面向对象编程详解
Mar 06 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
js实现百度搜索提示框
Feb 05 Javascript
angular.fromJson与toJson方法用法示例
May 17 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
Dec 07 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
WebPack工具运行原理及入门教程
Dec 02 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 获取本机外网/公网IP的代码
2010/05/09 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
php获取随机数组列表的方法
2014/11/13 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
Javascript----文件操作
2007/01/18 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
2015/11/30 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
初探nodeJS
2017/01/24 NodeJs
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
python实现简单的计时器功能函数
2015/03/14 Python
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
支部鉴定材料
2014/06/02 职场文书
中秋节活动总结
2014/08/29 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
Python 数据可视化之Matplotlib详解
2021/11/02 Python
python三子棋游戏
2022/05/04 Python