浅谈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 相关文章推荐
js option删除代码集合
Nov 12 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
JavaScript 函数的执行过程
May 09 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
Vue $attrs & inheritAttr实现button禁用效果案例
Dec 07 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
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
PHP实现动态执行代码的方法
2016/03/25 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
PHP从零开始打造自己的MVC框架之类的自动加载实现方法详解
2019/06/03 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
Yii框架安装简明教程
2020/05/15 PHP
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
使用typescript构建Vue应用的实现
2019/08/26 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
使用Python的Twisted框架构建非阻塞下载程序的实例教程
2016/05/25 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
python中的print()输出
2019/04/12 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
python 实用工具状态机transitions
2020/11/21 Python
python通过cython加密代码
2020/12/11 Python
怎么写有吸引力的自荐信
2013/11/17 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
红色电影观后感
2015/06/18 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python