前言
在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"></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"></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子頁面傳值父頁面的問題。
你知道的越多，你不知道的越多。我們不生產知識，我們只是知識的搬運工。