LayUI-親ページを更新せずに、子ページの親ページの値を変更します
LayUI達成できることの助けを借りて：parent.方法名子ページの親ページでメソッドを呼び出します。
- キーワードを介し
parentて、子ページは親ページの変数とメソッドを呼び出すことができ、親ページを更新することもできます（例：parent.location.reload();-子ページの親ページを更新します）。
1.効果を実現する
2.実装コード
父页面：
1.データテーブルデータをレンダリングします
。2。データテーブルで休暇の日数をクリックすると、新しいページのポップアップウィンドウがポップアップ表示されます。
$('body').on('click','.leaveDaysDetails',function () {
// 点击数据表格中的请假天数，弹出一个新页面弹窗
var id = $(this).attr('data-id'); // 获取到数据表格中当前行的id
var rowData = $(this).attr('data-row');
var index = JSON.parse(rowData).LAY_INDEX - 1; // 获取到数据表格中当前行的索引值index
layer.open({
type: 2, // 因为是以弹窗形式打开一个新页面，所以这儿应为2
title: '请假天数',
area: ['335px', '450px'], // 宽高
content: "{:url('editLeaveDetail')}?aid="+id+"&type=1&index="+index,
});
})
【補足知識】を介し
parentて、親ページのメソッドを子ページから呼び出すことができます。
- 例：
父页面メソッドをカプセル化するには、次changeLeaveMoneyのように記述しwindow.changeLeaveMoney = function() {}ます。次に、メソッドを〜で呼び出す子页面ことができます。parent.changeLeaveMoney()- 以下は、親ページを更新せずに子ページの親ページの値を変更するために使用される上記の方法です。
3.関数をカプセル化します。対応する休暇日数を変更し、休暇控除を行います
window.changeLeaveMoney = (v,i,count) => {
// v、i、count由子页面传过来
console.log(v);
console.log(i);
console.log(count);
$("div[lay-id='testReload']").find("tr[data-index="+i+"]").find('td[data-field="leave_money"] div').text(v); // 改变请假扣除的值（找到对应DOM节点，见下图）
$("div[lay-id='testReload']").find("tr[data-index="+i+"]").find('td[data-field="leaves"] div div').text(count); // 改变请假天数的值（找到对应DOM节点，见下图）
}
子页面：
<script>
var get_url = location.search; //获取url中"?"符及其后面的字符串 (比如：'?convenient=1')
var theRequest = new Object(); // 自定义一个空对象 {}
if ( get_url.indexOf( "?" ) != -1 ) {
// 如果get_url里面包含了"?"符
var str = get_url.substr(1); //substr()方法返回从参数值开始到结束的字符串，即去掉"?"符；
var strs = str.split("&");
for ( var i = 0; i < strs.length; i++ ) {
theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
}
}
console.log( theRequest ); //此时的theRequest就是我们需要的参数的对象合集 比如：{convenient: '1'}
// 点击提交按钮
function submitData() {
var data = {
type: theRequest.type, // 1-请假 2-迟到早退
aid: theRequest.aid, // 薪资id
}
var datas = {
:json_encode($data)}; // PHP写法-获取到后台传过来的数据$data
var values = [];
for(var i in datas) {
// 遍历对象
data[datas[i].id] = $(`input[name="${
datas[i].id}"]`).val(); // 对象添加动态属性
$(`input[name="${
datas[i].id}"]`).each(function () {
values.push($(this).val());
})
}
var count = values.reduce(function (pre,cur) {
// reduce高阶函数求和
return pre*1 + cur*1
},0)
console.log(count) // 加起来的总和，即修改后的请假天数总和
$.ajax({
url: '{:url("editLeaveDetail")}', // PHP写法-editLeaveDetail是请求地址
type: 'post',
dataType: 'json',
data: data,
success: function (res) {
if(res) {
if(res.sta == 2000) {
layer.msg(res.msg,{
time:1500},function () {
location.reload(); // 刷新页面数据
// console.log(res.data);
parent.changeLeaveMoney(res.data.leave_money,theRequest.index,count); // 调用父页面的方法
})
} else {
layer.msg(res.msg)
}
} else {
layer.msg('请求失败，请稍后再试')
}
},
error: function (err) {
console.log(err)
}
})
}
</script>