layui 解決如何從子頁面傳值回父頁面處理方法
阿新 • • 發佈：2020-08-14
前言
在WMS(ps:即倉儲管理系統)系統中，我們常會見這樣的一個場景：
當你選擇輸入客戶名稱的時候，它會彈出一個視窗，然後，在這個視窗中選擇或者查詢對應的客戶名稱。
類似於這樣的場景，我自己會把這個稱呼為參照。
前段時間，在使用layui框架進行開發的時候，就遇到這樣的問題：使用以前的方法怎麼也無法從子頁面傳值到父頁面。
後面，查了挺多資料後，才發現行之有效的方法。
具體實現
1.需要在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" name="uCompId" class="layui-input" id="uCompId" style="display:none;" /> <input type="text" name="cCompCode" lay-verify="required" placeholder="請選擇合同號碼" class="layui-input" onclick="ShowHTHM(this)" /> <i class="layui-icon icon"></i> </div> </div> </div>
2.觸發點選事件彈出層。如下程式碼所示：
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。
3.參照頁面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子頁面傳值父頁面的問題。
你知道的越多，你不知道的越多。我們不生產知識，我們只是知識的搬運工。