浅谈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 div 弹出可拖动窗口
Feb 26 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
js模拟select下拉菜单控件的代码
May 08 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
Apr 12 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
微信小程序 删除项目工程实现步骤
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
给ECShop添加最新评论
2015/01/07 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
一个简单的jquery进度条示例
2014/04/28 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
vue请求本地自己编写的json文件的方法
2019/04/25 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
智能旅行箱:Horizn Studios
2018/04/30 全球购物
银行见习期自我鉴定
2014/01/29 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
检讨书范文300字
2015/01/28 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
早恋主题班会
2015/08/14 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
Mysql排序的特性详情
2021/11/01 MySQL
Redis基本数据类型String常用操作命令
2022/06/01 Redis