浅谈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 相关文章推荐
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
Mar 17 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
Javascript学习笔记之相等符号与严格相等符号
Nov 23 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 Javascript
javascript实现前端分页功能
Nov 26 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中的一些数组排序方法分享
2012/07/20 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
javascript面向对象之二 命名空间
2011/02/08 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
2011/02/26 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
初步认识Python中的列表与位运算符
2015/10/12 Python
解决python 输出是省略号的问题
2018/04/19 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
Python jieba库分词模式实例用法
2021/01/13 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
思想品德课教学反思
2014/02/10 职场文书
大学生工作求职信
2014/06/23 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
现役军人家属慰问信
2015/03/24 职场文书