怎样让编辑窗口最大化（覆盖左侧和上部）
分享
收藏
评论
作者 🐼
wsnzz
-
1、让编辑窗口最大化（覆盖左侧和上部）。
2、保存后刷新列表体现更改。
我能实现第一步骤，方法是 easy-admin.js中，layer = layui.layer改为layer = parent.layui.layer。 但实现不了第二步，只能手动刷新。请问怎样保存后刷新列表？
在 EasyAdmin + Layui 架构中，实现“编辑窗口最大化”和“保存后自动刷新父级列表”的核心在于**跨窗体对象调用**。你第一步修改为 `parent.layui.layer` 是正确的方向，第二步的关键是在表单提交的 `success` 回调中，通过 `parent` 访问父页面并触发表格重载。
以下是完整实现方案：
### 🔑 核心思路
1. 保存成功后，获取父页面的 `layui` 实例
2. 调用父页面表格的 `reload()` 方法刷新数据
3. 正确关闭当前最大化的弹窗层
4. （可选）重置父级表格的分页或搜索条件
---
### 💻 代码实现（以 Layui 表单提交为例）
```javascript
// 假设你的表单设置了 lay-filter="editForm"
form.on('submit(editForm)', function(data) {
$.ajax({
url: '/api/your-save-endpoint', // 替换为你的实际保存接口
type: 'POST',
data: data.field,
dataType: 'json',
success: function(res) {
// ⚠️ 根据你后端实际返回状态码调整，通常 EasyAdmin 默认 code === 0 表示成功
if (res.code === 0 || res.status === 1) {
// ✅ 1. 刷新父级列表表格（将 'listTable' 替换为你父页面 table.render 时的 id）
parent.layui.table.reload('listTable', { page: { curr: 1 } });
// ✅ 2. 关闭当前弹窗层
var idx = parent.layui.layer.getFrameIndex(window.name);
parent.layui.layer.close(idx);
// ✅ 3. 提示成功（在父页面弹出）
parent.layui.layer.msg('保存成功', { icon: 1, time: 1500 }, function(){
// 可在此添加额外逻辑，如跳转等
});
} else {
parent.layui.layer.msg(res.msg || '保存失败', { icon: 2 });
}
},
error: function(xhr) {
parent.layui.layer.msg('网络请求异常', { icon: 2 });
}
});
return false; // 阻止表单默认提交
});
```
---
### 📌 关键细节说明
| 步骤 | 注意事项 |
|------|----------|
| **表格ID** | `parent.layui.table.reload('表格外层div的id', {})` 必须与父页面 `table.render({ elem: '#xxx' })` 中的 `id` 或外层容器 ID 完全一致 |
| **分页重置** | 加上 `page: { curr: 1 }` 可让列表回到第一页，避免停留在编辑前的第N页导致数据错位 |
| **获取层索引** | `parent.layui.layer.getFrameIndex(window.name)` 是 Layui 官方推荐的跨框架获取当前层索引的方法，比手动传参更稳定 |
| **响应格式** | 若你的后端遵循 EasyAdmin 规范，返回结构通常为 `{ code: 0, msg: '', data: {} }`；请按需调整判断条件 |
---
### 🛠 如果你使用的是 EasyAdmin 官方版内置方法
EasyAdmin 封装了统一的请求模块，推荐使用以下方式替代原生 `$.ajax`：
```javascript
admin.post('/api/your-save-endpoint', data.field).done(function(res) {
if (res.code === 0) {
parent.layui.table.reload('listTable', { page: { curr: 1 } });
var idx = parent.layui.layer.getFrameIndex(window.name);
parent.layui.layer.close(idx);
parent.layui.layer.msg('保存成功', { icon: 1 });
} else {
parent.layui.layer.msg(res.msg || '操作失败', { icon: 2 });
}
}).fail(function(err) {
parent.layui.layer.msg('请求失败', { icon: 2 });
});
```
---
### 🔍 常见问题排查
1. **刷新无效？** 检查控制台是否有 `Table data reloading...` 日志；确认 `reload` 的第一个参数确实是 DOM 容器 ID（不是 `table.render` 里返回的变量名）。
2. **报错 `Cannot read property 'table' of undefined`？** 说明 `parent.layui` 未加载完成，可在刷新前加延时或改用事件监听，但通常同一域名下不会出现。
3. **最大化后位置偏移？** 建议结合 `maxmin: true` 和 `title: false` 使用，并在打开时追加参数：
```javascript
var index = parent.layui.layer.open({
type: 2,
title: false,
area: ['100%', '100%'],
content: './edit.html',
maxmin: true
});
parent.layui.layer.full(index); // 强制最大化
```
按上述方式改造后，保存即可无缝刷新列表。如需针对你的具体路由结构或 Layui 版本微调，可提供 `table.render` 片段或后端返回格式，我会帮你精准适配。
