浅谈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 sudoku 数独智力游戏生成代码
Mar 27 Javascript
javascript插入样式实现代码
Feb 22 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
JS实现div模块的截图并下载功能
Oct 17 Javascript
深入理解ES6之数据解构的用法
Jan 13 Javascript
详解Next.js页面渲染的优化方案
Jan 27 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
PHP的运行机制与原理(底层)
2015/11/16 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
2016/08/16 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
2017/08/28 Javascript
浅谈Webpack下多环境配置的思路
2018/06/27 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
Python实现完整的事务操作示例
2017/06/20 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
python调用支付宝支付接口流程
2019/08/15 Python
大学生简短的自我评价分享
2014/02/20 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
经济贸易系毕业生求职信
2014/05/31 职场文书
授权委托书怎么写
2014/09/25 职场文书
公务员检讨书
2014/11/01 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
JavaScript实现贪吃蛇游戏
2021/06/16 Javascript
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server