浅谈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 相关文章推荐
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
JavaScript生成二维码图片小结
Dec 27 Javascript
浅谈js的异步执行
Oct 18 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
关于vue-cli3打包代码后白屏的解决方案
Sep 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
mysql5的sql文件导入到mysql4的方法
2008/10/19 PHP
php+mysql数据库查询实例
2015/01/21 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
Vue中使用vee-validate表单验证的方法
2018/05/09 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
python的unittest测试类代码实例
2017/12/07 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
小学生班会演讲稿
2014/01/09 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
主题班会演讲稿
2014/05/22 职场文书
财务负责人任命书
2014/06/06 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
小学美术教学反思
2016/02/17 职场文书
幼儿园语言教学反思
2016/02/23 职场文书
MySQL优化之如何写出高质量sql语句
2021/05/17 MySQL
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android