layui 对弹窗 form表单赋值的实现方法
更新时间：2019年09月04日 20:25:33 作者：SLIGHTLE
今天小编就为大家分享一篇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表单赋值的实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于微信小程序页面返回传值的4种解决方案,小程序开发中经常会遇到这种场景,比如提交问题,然后需要返回之前页面,本文通过示例代码介绍的非常详细,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了go.js的基本使用方法,结合实例形式详细分析了go.js基本功能、原理及vue中使用方法,需要的朋友可以参考下2023-06-06
web-view内嵌H5与uniapp数据的实时传递解决方案
这篇文章主要介绍了web-view内嵌H5与uniapp数据的实时传递,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
经常有人问，百度地图JavaScript API能在同一页面显示多个地图吗？当然可以啊，为什么不可以呢？地图之于页面无非就是个div，我们可以在页面显示多个div，自然也可以显示多个地图。2013-04-04
这篇文章主要介绍了js获取元素外链样式的方法,分别在标准浏览器与IE浏览器两种情况下实现获取对应样式的功能,是非常实用的技巧,需要的朋友可以参考下2015-01-01
有时候页面需要打印功能，如果再做一个页面不利于优化，两个页面内容一样了，所以可以用js实现内容的打印不需要的就不打印。2010-04-04
本文梳理lodash中那些高频使用的超究极无敌好用方法,熟练使用下面的十个方法能够让你的代码原地起飞,为你的开发之旅极大的减轻心智负担,快跟随小编一起学习一下吧2024-01-01
在访问某个网站或者博客时，如果该站点为用户提供内容的评级或投票功能的话，可以增强用户参与的交互性之外，更可以给用户一种“主人”的亲切感，使得用户可以切实地参与到网站内容的评价体系中来。2010-01-01
今天小编就为大家分享一篇layui layer select 选择被遮挡的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了微信小程序自定义组件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
最新评论