问题:
给用户新增优惠券,单个用户,单个优惠券,新增的话,用输入窗点击事件,点击后弹出一个子窗口列表页,选择数据后,点击确定,信息传回父窗口,主要是解决传值的问题。
解决思路:
使用的是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;">