浅谈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 相关文章推荐
用jquery来定位
Feb 20 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
Javascript节点关系实例分析
May 15 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
详解JavaScript中双等号引起的隐性类型转换
May 30 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
Apr 12 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
Vue可自定义tab组件用法实例
Oct 24 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中cookies使用指南
2007/03/16 PHP
php下载文件的代码示例
2012/06/29 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
python调用API实现智能回复机器人
2018/04/10 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
人力资源部培训专员岗位职责
2014/01/02 职场文书
运动会入场词50字
2014/02/20 职场文书
合伙协议书范本
2014/04/21 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
幼儿园见习总结
2015/06/23 职场文书
好人好事新闻稿
2015/07/17 职场文书
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js