解决打开的小窗口回调参数的问题，layui
问题：
给用户新增优惠券，单个用户，单个优惠券，新增的话，用输入窗点击事件，点击后弹出一个子窗口列表页，选择数据后，点击确定，信息传回父窗口，主要是解决传值的问题。
解决思路：
使用的是layui的前端框架，如下代码：给输入框增加 selectUser()事件，
<dl>
<dt>选择用户</dt>
<dd>
<asp:TextBox ID="txt_user" runat="server" CssClass="input normal" datatype="*" onclick="selectUser()"></asp:TextBox>
<input type="hidden" name="userId" value="" id="userId"/>
</dd>
</dl>
<dl>
<dt>选择优惠券</dt>
<dd>
<asp:TextBox ID="txt_coupons" runat="server" CssClass="input normal" datatype="*" onclick="selectCoupons()"></asp:TextBox>
<input type="hidden" name="couponsId" value="" id="couponsId"/>
</dd>
</dl>x
1
<dl>
2
<dt>选择用户</dt>
3
<dd>
4
<asp:TextBox ID="txt_user" runat="server" CssClass="input normal" datatype="*" onclick="selectUser()"></asp:TextBox>
5
<input type="hidden" name="userId" value="" id="userId"/>
6
</dd>
7
</dl>
8
9
<dl>
10
<dt>选择优惠券</dt>
11
<dd>
12
<asp:TextBox ID="txt_coupons" runat="server" CssClass="input normal" datatype="*" onclick="selectCoupons()"></asp:TextBox>
13
<input type="hidden" name="couponsId" value="" id="couponsId"/>
14
</dd>
15
</dl>
点击后触发下面代码，使用的是http://www.layui.com/doc/modules/layer.html，中的方法，
// 选择用户
function selectUser() {
layer.open({
type: 2,
title: '选择用户',
shadeClose: true,
shade: 0.8,
area: ['52%', '70%'],
content: '../selectInfo/user_personal_list.aspx', //iframe的url
btn: ['确定', '关闭'],
yes: function (index) {
//当点击‘确定’按钮的时候，获取弹出层返回的值
var res = window["layui-layer-iframe" + index].callbackdata();
$('#txt_user').val(res.title);
$('#userId').val(res.id);
//打印返回的值，看是否有我们想返回的值。
console.log($('#userId').val());
//最后关闭弹出层
layer.close(index);
},
cancel: function () {
//右上角关闭回调
}
});
}x
1
// 选择用户
2
function selectUser() {
3
layer.open({
4
type: 2,
5
title: '选择用户',
6
shadeClose: true,
7
shade: 0.8,
8
area: ['52%', '70%'],
9
content: '../selectInfo/user_personal_list.aspx', //iframe的url
10
btn: ['确定', '关闭'],
11
yes: function (index) {
12
//当点击‘确定’按钮的时候，获取弹出层返回的值
13
var res = window["layui-layer-iframe" + index].callbackdata();
14
$('#txt_user').val(res.title);
15
$('#userId').val(res.id);
16
//打印返回的值，看是否有我们想返回的值。
17
console.log($('#userId').val());
18
//最后关闭弹出层
19
layer.close(index);
20
},
21
cancel: function () {
22
//右上角关闭回调
23
}
24
25
});
26
}
然后，我们在点击开的子窗口的页面，加上如下js代码，check事件，是选择事件，选中哪一行后，获取相应信息，然后把值传递给hidden的标签，然后把数据放入callbackdata回调函数，传给父窗口，OK，解决解决子窗口回调参数问题。
<script type="text/javascript">
var callbackdata = function () {
var data = {
id: $('#couponsID').val(),
title:$('#couponsName').val()
};
return data;
}
function check(obj) {
var son = $(obj).parent();
var id = son.next('input').val();
var title = son.parent().next('td').find('a').html();
$('#couponsID').val(id);
$('#couponsName').val(title);
}
</script>x
1
<script type="text/javascript">
2
var callbackdata = function () {
3
var data = {
4
id: $('#couponsID').val(),
5
title:$('#couponsName').val()
6
};
7
return data;
8
}
9
10
function check(obj) {
11
var son = $(obj).parent();
12
var id = son.next('input').val();
13
var title = son.parent().next('td').find('a').html();
14
$('#couponsID').val(id);
15
$('#couponsName').val(title);
16
}
17
</script>
<wiz_tmp_tag id=”wiz-table-range-border” contenteditable=”false” style=”display: none;”>
版权声明：本文为myhomebo原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。