关于layer.js使用心得-向弹出框传值问题
layer.js使用心得-向弹出框传值
问题背景
实现弹出对话框加载页面,所以我选择了独立组件layer.js。
基于layer.js组件弹出了一个新的iframe的窗口(假设name为LayerFrame,方便后面称呼),但需要从之前的页面传入参数
注:'#sayHello'元素是在主窗口下的 HomeFram(HomeFrame是主窗口下的子 iframe) 里
代码如下:
$('#sayHello').click(function () { top.layer.open({ id: "layer_say_hello", type: 2, title: '打招呼', shadeClose: true, shade: 0.8, area: ['500px', '400px'], content: '/Findfriend/Part_SayHello', //iframe的url success: function (layero, index) { //传入参数,并赋值给iframe的元素 } }); })
问题描述
在success回调函数中使用jquery选取不到弹出的 ifram 的元素
问题分析
经过下午的头破 血流,终于被我给分析出来了,功夫不负有心人啊。废话少说,重点来了。
原因是:
success回调函数的上下文并不是 主窗口的上下文, 而是 HomeFrame 的上下文。所以在success回调函数中是可以直接找到 HomeFrame 中的元素。
如果要找到 LayerFrame 的元素,就必须先找到 LayerFrame 的Dom对象,然后方可找到 LayerFrame 的 document ,最后再去找 LayerFrame 的元素
正确代码如下:
$('#sayHello').click(function () { top.layer.open({ id: "layer_say_hello", type: 2, title: '打招呼', shadeClose: true, shade: 0.8, area: ['500px', '400px'], content: '/Findfriend/Part_SayHello', //iframe的url success: function (layero, index) { var her_uli_id = $("#headico").attr("data-uli-id"); //headico 是 HomeFrame的元素 var her_nickname = $("#nickname").text(); //nickname 是 HomeFrame的元素 // layero.find("iframe") 找到iframe的jquery对象 // layero.find("iframe")[0] 将jqeruy对象转化为Dom对象 // contentWindow 获取当前 iframe 的 内容 window对象(Dom对象) //.send-hello 是 LayerFrame 的元素 var jquerySendHelloButton = $(".send-hello", layero.find("iframe")[0].contentWindow.document); jquerySendHelloButton.attr("data-her-uli-id", her_uli_id); jquerySendHelloButton.attr("data-her-nick-name", her_nickname); } }); })
layui传值的一些经验,也没怎么整理:表格渲染数据,弹出框
1.layui向表格渲染数据的格式转换
buffer.append("{\"code\":0,\"msg\":\"\",\"count\":" + countTotal + ",\"data\":[" + buffer2 + "]}"); StringBuffer buffer = new StringBuffer(); StringBuffer buffer2 = new StringBuffer(); try { if (takenumberlist.size() != 0 && takenumberlist != null) { buffer2 = JsonUtils.listTojson(buffer2, takenumberlist); } buffer.append("{\"code\":0,\"msg\":\"\",\"count\":" + countTotal + ",\"data\":[" + buffer2 + "]}"); } catch (IllegalArgumentException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } model.addAttribute("buffer", buffer.toString()); System.out.println("layui传值执行成功!"); return buffer.toString();
需要引入一个工具栏JsonUtils.java
界面接收:<table class="layui-hide" id="demo" lay-filter="test">
js:
table.render({ elem: '#demo' ,width : 430 ,height: 535 ,url: "http://localhost:8080/hospital/takenumber.do?ks_code=${dept_code}" //数据接口 ,page: true //开启分页 ,autoSort: true//自动排序 , initSort: {field:'id', type:'asc'} /* ,totalRow: true *///开启合计行 ,cols: [[ //表头 {type: 'checkbox', fixed: 'left'} ,{field: 'id', title: '编号', width:80, sort: true, totalRow: true} ,{field: 'person_name', title: '姓名', width:85} ,{field: 'queue_code', title: '取号号码', width: 115, sort: true, totalRow: true} ,{field: 'specify_doctor_code', title: '医生工号', width: 96, sort: true, totalRow: true} /* ,{field: 'doctor_name', title: '医生', width:80, sort: true} */ /* ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'} */ ]] });
2. layui弹出框,并且在表格里选中
弹出框:
<script type="text/html" id="move-dialog"> <form class="layui-form" action="" lay-filter="move-form"> <div class="layui-form-item"> <label class="layui-form-label" style="width:110px;text-align:center">姓名</label> <div class="layui-input-block"> <input type="hidden" name="id" required lay-verify="required" placeholder="姓名" class="layui-hidden" disabled> <input type="text" name="person_name" lay-verify="" placeholder="姓名" class="layui-input" disabled> </div> </div> <div class="layui-form-item"> <label class="layui-form-label" style="width:110px;text-align:center">取号号码</label> <div class="layui-input-block"> <input type="text" name="queue_code" lay-verify="" placeholder="取号号码" class="layui-input" disabled> </div> </div> <div class="layui-form-item"> <label class="layui-form-label" style="width:110px;text-align:center">当前排序号</label> <div class="layui-input-block"> <input type="number" name="order_by_num" lay-verify="move" placeholder="排序号" class="layui-number" > </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="but-move-submit">保存</button> <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> --> </div> </div> </form> </script>
触发弹出框:
$("#but-appoint").click(function(){ var array = table.checkStatus('demo').data; if(array.length==0){ layer.msg('请选择要操作的记录'); }else if(array.length != 1){ layer.msg('每次只能选择一行'); }else{ console.log(array); layer.open({//定义一个对话框 type : 1, title : '医生指定', content : $("#appoint-dialog").html(),//加载表格元素给content area : ['600px','450px'] }) form.val('appoint-form',{//填充表单 "id" : array[0].id, "person_name" : array[0].person_name, "queue_code" : array[0].queue_code, "doctor_name01" : array[0].doctor_name, "specify_doctor_code" : array[0].specify_doctor_code }) form.on('submit(but-appoint-submit)',function(data){//提交表单到后台 console.log(data.field.id); console.log(data.field.doctor_name); console.log(data.field.doctor_code); console.log(data.field.specify_doctor_code); $.post('http://localhost:8080/hospital/appoint.do',data.field,function(flag){ if(flag){ layer.msg('操作成功',{icon: 6}); console.log(data.field.doctor_code); layer.closeAll();//关闭弹出框 table.reload('demo',{});//重新加载 }else{ layer.msg('操作失败',{icon: 5}); } }) return false; }) } })
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/ReturningProdigal/article/details/5354
相关文章
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了微信小程序自定义底部弹出框动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-16
- 这篇文章主要介绍了Vue父子组件传值的一些坑,帮助大家更好的理解和使用vue父子组件,感兴趣的朋友可以了解下...2020-09-16
Framework7 设置是否允许点击弹出框外部区域,关闭弹出层
下面我们来看一篇关于 Framework7 设置是否允许点击弹出框外部区域,关闭弹出层的使用例子,具体的细节步骤如下文介绍。 1,Framework7中三大类弹出框 (1)模态框(moda...2016-10-02- 这篇文章主要给大家介绍了关于C#窗体间常用的几种传值方式及委托与事件的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-25
解决element DateTimePicker+vue弹出框只显示小时
这篇文章主要介绍了解决element DateTimePicker+vue弹出框只显示小时,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-16- 这篇文章主要介绍了C# WPF 通过委托实现多窗口间的传值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02- 这篇文章主要介绍了uniapp 仿微信的右边下拉选择弹出框的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-12
- 这篇文章主要介绍了基于Vue中的父子传值问题解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-10-14
- 这篇文章主要给大家介绍了关于Vue组件传值过程中丢失数据的分析与解决方案,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-17
- 这篇文章主要给大家介绍了关于微信小程序页面间传值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-09
- ASP.NET 页面传值的方式有很多,本文整理了一些比较常用方法,大家可以根据自己需求自由选择...2021-09-22
- 这篇文章主要介绍了解决java main函数中的args数组传值问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-21
- 这篇文章主要给大家介绍了关于C语言中传值与传指针的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用C语言具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-04-25
- .NET中利用js让子窗体向父页面传值的实现方法,需要的朋友可以参考一下...2021-09-22
Angular+Ionic使用queryParams实现跳转页传值的方法
这篇文章主要介绍了Angular+Ionic使用queryParams实现跳转页传值的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-09-05- 这篇文章主要为大家详细介绍了Android实现信息弹出框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-22
- Vue组件之间是有联系的,避免不了组件之间要互相传值,那么如何实现Vue两个同级组件传值,本文就来介绍一下,感兴趣的可以了解一下...2021-07-16
- 这篇文章主要为大家分享了两款带遮罩的jQuery弹出框,jQuery遮罩层在现在的网站中十分常见,感兴趣的小伙伴们可以参考一下...2016-01-02