关于layer.js使用心得-向弹出框传值问题
更新时间：2022年11月08日 10:23:09 作者：returningprodigal
这篇文章主要介绍了关于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;
})
}
})以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript学习笔记之数组随机排序的相关资料,需要的朋友可以参考下2016-03-03
这篇文章主要为大家详细介绍了javascript实现全屏页面滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要为大家详细介绍了AjaxUpLoad.js实现文件上传的具体代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-03-03
这篇文章主要为大家介绍了JS前端首屏优化技巧，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了JavaScript实现汉字转换为拼音及缩写的方法,结合实例形式分析了javascript数组遍历、转换实现汉字转拼音相关操作技巧,需要的朋友可以参考下2019-03-03
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
这篇文章主要介绍了js日期相关函数dateAdd,dateDiff,dateFormat等介绍,需要的朋友可以参考下2016-09-09
列表的响应式排版，首先每行固定好个数，然后随页面宽度调整个数和大小，保证图片的的可读性及美观。接下来小编给大家带来实现思路介绍，一起看看吧2016-09-09
这篇文章主要介绍了JS引用传递与值传递的区别与用法,结合实例形式较为详细的对比分析了javascript引用传递与值传递的原理、区别、使用方法及相关操作注意事项,需要的朋友可以参考下2018-06-06
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。被 JavaScript 验证的这些典型的表单数据有：用户是否已填写表单中的必填项目？用户输入的邮件地址是否合法？用户是否已输入合法的日期？用户是否在数据域 (numeric field) 中输入了文本？2014-09-09
用jscript实现获取登录时间的脚本2008-05-05
最新评论