layui 解决从子页面传值回父页面方法

前言

在WMS(ps:即仓储管理系统)系统中，我们常会见这样的一个场景：当你选择输入客户名称的时候，它会弹出一个窗口，然后，在这个窗口中选择或者查询对应的客户名称。类似于这样的场景，我自己会把这个称呼为参照。前段时间，在使用layui框架进行开发的时候，就遇到这样的问题：使用以前的方法怎么也无法从子页面传值到父页面。后面，查了挺多资料后，才发现行之有效的方法。

具体实现

需要在input文本框中，绑定触发事件。如下代码所示：

<div class="layui-col-lg4 layui-col-md4 ">
 <div class="layui-form-item">
  <div class="layui-form-label"><span style="color:red;">*</span>合同号码</div>
    <div class="layui-input-block">
      <input type="text" class="layui-input" id="uCompId" style="display:none;" />
      <input type="text" lay-verify="required" placeholder="请选择合同号码" class="layui-input"  onclick="ShowHTHM(this)" />
      <i class="layui-icon icon">&#xe615;</i>
    </div>
  </div>
</div>

触发点击事件弹出层。如下代码所示：

function ShowHTHM() {
  //注意：这里需要加`parent`才能跳出当前的层
  parent.layer.open({
        type: 2,
        title: '合同信息',
        amin: 4,
        shadeClose: true,
        shade: 0.8,
        area: ['55%', '65%'],
        btn: ["确定", '关闭'],
        content: '../控制器/控制器视图',//这里是需要填写跳转页面地址，这里用的mvc，所以，跳转的是视图。
        success: function (layero, index) { },
        yes: function (index, layero) {
        var obj = $(layero).find("iframe")[0].contentWindow;
            $(layero).find("iframe")[0].contentWindow.$('#saveBtn').click();//执行子页面的按钮点击事件
            var mJson = obj.$('#uidsub').val();//获取子页面绑定的值
            if (mJson != "") {
                 var _mJson = $.parseJSON(mJson);//转成Json对象
                 $("#uCompId").val(_mJson[0].uCompId);//重新赋值
                 $("#cCompCode").val(_mJson[0].cCompCode);
                 $("#cCltName").val(_mJson[0].cCltName);
               }
         },
         cancel: function (index, layero) {
                // 取消的操作
          },
         end: function () { }
  });        
}

注意：在使用layui的layer弹出层的时候,必须要引用layer或者声明以后才能使用layer。

参照页面body标签下的所用内容。

    <div class="layui-fluid" style="margin-top:15px;">
        <div class="layui-col-12">
            <div class="layui-form">
                <div class="layui-form-item" style="margin-bottom:5px;" id="myform">
                    <div class="layui-form-label">筛选条件:</div>
                    <div class="layui-input-inline">
                        <select class="layui-select" id="selectKey">
                            <option value="">请输入筛选条件</option>
                            <option value="cCompCode" selected="selected">合同号码</option>
                        </select>
                    </div>
                    <div class="layui-form-label">筛选内容:</div>
                    <div class="layui-input-inline">
                        <input type="text" id="selectVale" querytype="text" class="layui-input" placeholder="输入内容可模糊查询" />
                    </div>
                </div>
                <div class="layui-form-item" style="text-align:center;margin-bottom:5px;">
                    <button class="layui-btn" id="btnQuery"><i class="layui-icon">&#xe615;</i>查询</button>
                    <button type="reset" class="layui-btn layui-btn-primary" id="btnReset">重置</button>
                </div>
            </div>
        </div>
        <div class="layui-col-12" style="margin-top: -10px;">
            <table id="tab" lay-filter="tab"></table>
            <input id="uidsub" class="form-control" name="uid" type="hidden" value="">
            <div class="layui-form-item" style="display:none;">
                <button class="layui-btn" id="saveBtn"></button>
                <button type="reset" class="layui-btn" id="reset"></button>
            </div>
            <script type="text/html" id="indexTpl">
                {{d.LAY_TABLE_INDEX+1}}
            </script>
        </div>
    </div>

    <!--引用jquery-->
    <script src="~/Content/js/jquery-1.12.4.min.js"></script>
    <!--引用layui-->
    <script src="~/Pulgs/layui/layui.js"></script>
    <!--引用公用的js-->
    <script src="~/Moduls/myCommon.js"></script>
    <script type="text/javascript">
        layui.use(['table', 'layer', 'form', 'laydate'], function () {
            var table = layui.table, form = layui.form, layer = layui.layer;
            /*请求数据加载信息*/
            table.render({
                elem: '#tab',
                url: '../控制器/控制器方法',
                cellMinWidth: 120,
                height: 'full-115',
                cols: [[
                    { type: 'radio' },
                    { field: '', title: '序号', templet: '#indexTpl', align: 'center' },
                    { field: '状态', title: '状态', sort: true },
                    { field: '合同号码', title: '合同号码', sort: true },
                    { field: '客户编码', title: '客户编码', sort: true },
                    { field: '客户名称', title: '客户名称', sort: true },
                    { field: '客户简称', title: '客户简称', sort: true },
                    { field: '签订日期', title: '签订日期', sort: true },
                ]],
                page: true,
                limit: 50,
            });
            /*点击确定*/
            $("#saveBtn").on('click', function () {
                var checkStatus = table.checkStatus('tab');
                if (!checkStatus.data.length) { //判断，如果没有选择提示
                    layer.msg('请选择数据', { icon: 7 }); return;
                } else {//否则，序列化为Json字符串，存放在视图页面中
                    $("#uidsub").val(JSON.stringify(checkStatus.data));
                    //关闭层
                    if($("#uidsub").val()!=null||$("#uidsub").val()!='')
                    {
                       var index = parent.layer.getFrameIndex(window.name);
                       parent.layer.close(index);      
                    }
                }
            });
            /*查询*/
            $("#btnQuery").click(function () {
                var mKey = $("#selectKey").val();
                var mValue = $("#selectVale").val();
                if (mKey == "" && mValue == "") { layer.msg("请输入查询条件", { icon: 7 }); }
                else {
                    table.render({
                        elem: '#tab',
                        url: '../控制器/控制器方法?mKey=' + mKey + '&mValue=' + mValue,
                        cellMinWidth: 110,
                        height: 'full-150',
                        cols: [[
                             { type: 'radio' },
                             { field: '', title: '序号', templet: '#indexTpl', align: 'center' },
                             { field: '状态', title: '状态', sort: true },
                             { field: '合同号码', title: '合同号码', sort: true },
                             { field: '客户编码', title: '客户编码', sort: true },
                             { field: '客户名称', title: '客户名称', sort: true },
                             { field: '客户简称', title: '客户简称', sort: true },
                             { field: '签订日期', title: '签订日期', sort: true }
                        ]],
                        page: true,
                        limit: 50,
                    });
                }
            });
            /*重置*/
            $("#btnReset").click(function () {
                $("#selectKey").val("");
                $("#selectVale").val("");
                form.render();
            });
        });
    </script>

效果如下如所示：

总结

最后，也不能说完美的解决子页面传值到父页面的问题。但也，解决了大部分layui子页面传值父页面的问题。

你知道的越多，你不知道的越多。我们不生产知识，我们只是知识的搬运工。