zoukankan      html  css  js  c++  java
  • 解决打开的小窗口回调参数的问题,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>
    子窗口代码

    这里没有放隐藏的标签,各位请自己增加,不然没有数据会报错

  • 相关阅读:
    2. 环形路加油
    1. 元素累加
    开始在线练习50题。
    C# 搜索关键词
    Python调用OpenCV几何变换
    Tensorflow加载多幅图像进一个tensor
    Cmake构建OpenCV测试例子
    Linux利用本地http下载解决一些需要联网下载的问题
    Python调用OpenCV算术操作
    Python调用OpenCV阈值化
  • 原文地址:https://www.cnblogs.com/myhomebo/p/9253954.html
Copyright © 2011-2022 走看看