解决打开的小窗口回调参数的问题，layui

最新推荐文章于 2023-10-18 09:57:59 发布

wangmj518

最新推荐文章于 2023-10-18 09:57:59 发布

阅读量476

点赞数

分类专栏： java layui

本文链接：https://blog.csdn.net/wangmj518/article/details/107513849

版权

java 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

layui

3 篇文章 0 订阅

订阅专栏

问题：

给用户新增优惠券，单个用户，单个优惠券，新增的话，用输入窗点击事件，点击后弹出一个子窗口列表页，选择数据后，点击确定，信息传回父窗口，主要是解决传值的问题。

解决思路：

使用的是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>

<dl>

<dd>

<asp:TextBox ID="txt_user" runat="server" CssClass="input normal" datatype="*" οnclick="selectUser()"></asp:TextBox>

</dd>

</dl>

            <dl>

<dt>选择优惠券</dt>

<dd>

<asp:TextBox ID="txt_coupons" runat="server" CssClass="input normal" datatype="*" οnclick="selectCoupons()"></asp:TextBox>

</dd>

</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 () {
                    //右上角关闭回调
                }

            });
        }

        // 选择用户

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 () {

//右上角关闭回调

}

});

然后，我们在点击开的子窗口的页面，加上如下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>

var callbackdata = function () {

var data = {

id: $('#couponsID').val(),

title:$('#couponsName').val()

};

return data;

}