LayUI- Modify a value in the parent page in the child page without refreshing the parent page
With
LayUIthe help of whatparent.方法名can be achieved: call the method in the parent page in the child page.
- Through
parentkeywords, the child page can call the variables and methods of the parent page, and can also refresh the parent page (for example:parent.location.reload();- Refresh the parent page in the child page).
1. Realize the effect
2. Implementation code
父页面：
1. Render the data table data
2. Click the number of days of leave in the data table, and a new page pop-up window will pop up
$('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,
});
})
【Supplementary knowledge】Through
parent, the method in the parent page can be called from the child page.
- For example: to
父页面encapsulate a methodchangeLeaveMoneyin it, just write it aswindow.changeLeaveMoney = function() {}; then, in子页面it, you canparent.changeLeaveMoney()call the method through ~- The following is the above method used to modify the value in the parent page in the child page without refreshing the parent page.
3. Encapsulate a function: change the corresponding leave days and leave deduction
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>