Layui关闭弹窗返回值的两种方式（一）

        根据实际操作小编遇到的返回值方式是两种：

1、直接操作打开的窗口获取值

2、操作弹窗打开的子页面返回值

        下面就讲解两个实例，以作总结，以不变应万变：

一、直接操作打开的窗口获取值

        Layui内有两种点击事件，第一种是jquery中的click方式第二种是按钮监听组的方式，上篇已经做过讲解了，此处不再做过多赘述。废话不多说，直接贴例子总结：

        场景：点击input框弹窗显示列表，关闭弹窗选择值填入inout框内。即点击图一到图二的场景

                                                                              图一 input框

                                                                                          图二 弹窗

1、html页面代码

<div class="layui-row layui-col-xs8">
    <label style="margin-top: -1.5%;" class="layui-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span class="myspan">*</span>涉案部门及案件性质</label>
    <input class="layui-col-xs6 layui-input myDialog" type="text" id="caseNature" name="caseNature" required lay-verify="required" style="width: 75%;" placeholder="请选择涉案部门及案件性质" autocomplete="off" data-type="selectCaseNature">
</div>

2、js代码

        此处同样还是用的按钮监听组激活弹窗的方式。

 var panelaction = {
    selectCaseNature:function () {//选择涉案部门属性
        var tit = '涉案部门性质';
        var url = 'case_nature.html';
        var index = larryms.open({
            title: tit,
            type: 2,
            shadeClose: false,
            area: ['763px', '460px'],
            content: url,
            btn: ['确定','关闭'],
            yes: function(index){
                //当点击‘确定'按钮的时候，获取弹出层返回的值
                var iframeWindow = window['layui-layer-iframe'+ index];
                var checkStatus = iframeWindow.layui.table.checkStatus('case_nature');
                var data = checkStatus.data;
                if(data.length==1){
                    layer.msg(data[0].caseNature);
                    $("#caseNature").html(data[0].caseNature);
                }else{
                    layer.msg("请选择一个值！");
                }
                //最后关闭弹出层
                layer.close(index);
            },
            cancel: function(){
                //右上角关闭回调
            }
        });
    }
}

        做一下总结，先通过var iframeWindow锁定当前的弹窗，然后再通过checkStatus获取状态，再一句状态的obj锁定data属性来做数据逻辑的判断以及操作。

3、此处为了方便自己使用，子页面也做一下记录

3-1 html页面

        此处一定要把要操作的放在“内容了”和“内容结束哦”两标签之内，因为不加的话弹窗样式会不好看（此处仅针对我本地做描述，各位看官按照自己的情况调样式即可）

    <!-- 面板 -->
    <div class="layui-row larryms-panel">
        <div class="larry-container">
            <div class="layui-row layui-col-space15 larryms-data-top">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
                    <section class="layui-card">
                        <!-- <div class="layui-card-header">涉案人员列表</div>-->
                        <div class="layui-card-body">
                            <!-- 内容了 -->
                            <table id="case_nature" name="case_nature" lay-filter="case_nature" data-url="../../../../larryms/data/letters_query.json"></table>
                            <!-- 内容结束哦 -->
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </div>

3-2 js 代码

        即一个控制列表展示的js。

var table;
var larryms;
layui.define(['jquery', 'table', 'larryms','forms'], function(exports) {
    var $ = layui.$,
        forms = layui.forms;
    table = layui.table;
    larryms = layui.larryms;


    //接收案件
    var mUrl_accept = $('#case_nature').data('url');
    //mUrl = dataportal_caseQuery;
    mIns_accept = table.render({
        elem: '#case_nature',
        id: "case_nature",
        cellMinWidth: 95,
        url: mUrl_accept,
        method: 'get',
        height: "full-100",
        page: true,
        limits: [15, 30, 45, 60, 75, 90, 105, 120],
        limit: 15,
        response: { //定义后端 json 格式，详细参见官方文档
            statusName: 'code', //状态字段名称
            statusCode: 200, //状态字段成功值
            msgName: 'msg', //消息字段
            countName: 'count', //总数字段
            dataName: 'data' //数据字段
        },
        cols: [
            [
                {
                    type: "radio",
                    fixed: 'center',
                    width: 60
                },
                {
                    type: "numbers",
                    fixed: 'center',
                    title: '序号',
                    width: 60
                }, {
                    field: 'caseNature',
                    title: '性质',
                    minWidth: 100,
                    align: 'center'
            }]
        ]
    });


});

        由于篇幅过长，第二种方法置于下一面文章进行总结讲解。