layui解决从⼦页⾯传值回⽗页⾯⽅法
前⾔
在WMS(ps：即仓储管理系统)系统中，我们常会见这样的⼀个场景：当你选择输⼊客户名称的时候，它会弹出⼀个窗⼝，然后，在这个窗⼝中选择或者查询对应的客户名称。类似于这样的场景，我⾃⼰会把这个称呼为参照。前段时间，在使⽤layui框架进⾏开发的时候，就遇到这样的问题：使⽤以前的⽅法怎么也⽆法从⼦页⾯传值到⽗页⾯。后⾯，查了挺多资料后，才发现⾏之有效的⽅法。
具体实现
需要在input⽂本框中，绑定触发事件。如下代码所⽰：
<div class="layui-col-lg4 layui-col-md4 ">
<div class="layui-form-item">
<div class="layui-form-label"><span >*</span>合同号码</div>
<div class="layui-input-block">
<input type="text" class="layui-input" id="uCompId" />
<input type="text" lay-verify="required" placeholder="请选择合同号码" class="layui-input"  onclick="ShowHTHM(this)" />
<i class="layui-icon icon"></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();//执⾏⼦页⾯的按钮点击事件
jquery弹出div窗口
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" >
<div class="layui-col-12">
<div class="layui-form">
<div class="layui-form-item" 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" >
<button class="layui-btn" id="btnQuery"><i class="layui-icon"></i>查询</button>
<button type="reset" class="layui-btn layui-btn-primary" id="btnReset">重置</button>
</div>
</div>
</div>
<div class="layui-col-12" >
<table id="tab" lay-filter="tab"></table>
<input id="uidsub" class="form-control" name="uid" type="hidden" value="">
<div class="layui-form-item" >
<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;
/*请求数据加载信息*/
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 = FrameIndex(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 {
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("");
});
});
</script>
效果如下如所⽰：
总结
最后，也不能说完美的解决⼦页⾯传值到⽗页⾯的问题。但也，解决了⼤部分layui⼦页⾯传值⽗页⾯的问题。你知道的越多，你不知道的越多。我们不⽣产知识，我们只是知识的搬运⼯。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。