layui 对弹窗 form表单赋值的实现方法


Posted in Javascript onSeptember 04, 2019

目的: 点击编辑按钮 实现 数据回显到弹出 子页面 表单 内。如下图:

layui 对弹窗 form表单赋值的实现方法

layui 对弹窗 form表单赋值的实现方法

Html 代码:

<body>
 <div class="layui-form" lay-filter="useradmin" id="useradmin">
  <div class="layui-form-item">
   <label class="layui-form-label">用  户 名</label>
   <div class="layui-input-inline">
    <input type="text" name="username" lay-verify="required" id="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
   </div>
  </div>
 其它省略...
 </div>
</body>

Js 代码:

layer.open({
    type: 2
    ,title: '编辑用户'
    ,content: 'xx.html'
    ,maxmin: true
    ,area: ['500px', '450px']
    ,btn: ['确定', '取消']
    ,yes: function(index, layero){
     
    省略...
    }
    ,success: function(layero, index){
   
      // 方式一 其实就是获取的 子页面的 div  
      var div = layero.find('iframe').contents().find('#useradmin'); // div.html() div里面的内容,不包含当前这个div
        
       // 方式二 
       var body = layer.getChildFrame('body', index); // body.html() body里面的内容 
   
       
       /* ---- 附加内容 看看就好 Begin ---- */
      var iframeWindow = window['layui-layer-iframe'+ index]  // 方式一: 得到iframe页的窗口对象
      var iframeWindow = window[layero.find('iframe')[0]['name']];  // 方式二: 得到iframe页的窗口对象
      /* ---- 附加内容 看看就好 End ---- */
 
      // 测试 :
      body.find("#username").val("admin"); // 方式一
   
      div.find("#username").val("admin"); // 方式二 
    }
 });

layui 表单数据获取 : 可参考layui 实例 : https://www.layui.com/demo/table/operate.html 。

这里建议 form表单 属性名 和 表格的属性名 最好一致, 获取的数据 遍历赋值时,只需一遍操作,避免当表单数据过多时,需要写多个 div.find("# id").val(" ");

以上这篇layui 对弹窗 form表单赋值的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于this和self的使用说明
Aug 01 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
微博@符号的用户名提示效果。(想@到谁?)
Nov 05 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 jQuery
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
JS实现京东商品分类侧边栏
Dec 11 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 #Javascript
layui table数据修改的回显方法
Sep 04 #Javascript
Vue实现商品详情页的评价列表功能
Sep 04 #Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 #Javascript
解决layui表格的表头不滚动的问题
Sep 04 #Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 #Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 #Javascript
You might like
php 移除数组重复元素的一点说明
2008/11/27 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python进行数据科学工作的简单入门教程
2015/04/01 Python
深入理解Python中装饰器的用法
2016/06/28 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
巴西网上药房:onofre
2016/11/21 全球购物
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
外贸业务员的岗位职责
2013/11/23 职场文书
国际贸易专业求职信
2014/06/04 职场文书
爱护花草树木的标语
2014/06/11 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
建议书范文
2015/02/05 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
导游词之太原天龙山
2020/01/02 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
springboot用户数据修改的详细实现
2022/04/06 Java/Android
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL