解决打开的小窗口回调参数的问题,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>
点击后触发下面代码,使用的是http://www.layui.com/doc/modules/layer.html,中的方法,
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,解决解决子窗口回调参数问题。
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>
这里没有放隐藏的标签,各位请自己增加,不然没有数据会报错