layer.open弹窗关闭之后保留父页面查询条件并刷新 bootstrap
时间: 2024-09-14 21:16:11 浏览: 43
`layer.open` 是一个在前端开发中常用的弹窗插件,通常用于在页面上创建模态对话框、提示信息、加载层等。如果你希望在弹窗关闭后保留父页面的查询条件并进行刷新,可以通过以下步骤实现:
1. 在打开弹窗之前,首先保存当前父页面的查询条件。这可以通过将查询条件存储在全局变量、sessionStorage、localStorage 或者其他状态管理工具中来完成。
2. 打开弹窗,并在弹窗中进行相应的操作。
3. 当弹窗关闭时,触发一个事件或者使用弹窗提供的回调函数来读取保存的查询条件,并对父页面进行刷新操作。如果你使用的是JavaScript和jQuery,可以使用`layer.close`方法来关闭弹窗,并通过设置回调函数来执行刷新逻辑。
4. 在回调函数中,从之前保存的位置(如sessionStorage、localStorage等)获取查询条件,并更新父页面的相关内容。
示例代码如下:
```javascript
// 保存当前查询条件
var searchParams = {
keyword: $('#keyword').val(), // 假设查询条件是一个关键字
page: 1 // 假设还有分页信息
};
sessionStorage.setItem('searchParams', JSON.stringify(searchParams));
// 打开弹窗
layer.open({
// 弹窗的配置项
success: function(layero, index){
// 弹窗关闭后触发的回调函数
layer.close(index, function(){
// 从sessionStorage获取之前保存的查询条件
var savedParams = JSON.parse(sessionStorage.getItem('searchParams'));
// 更新父页面的查询条件并刷新页面
$('#keyword').val(savedParams.keyword);
// 假设有一个刷新父页面的方法refreshParentPage
refreshParentPage(savedParams);
});
}
});
function refreshParentPage(params) {
// 根据params中的信息刷新父页面的查询结果
// 例如使用Ajax请求获取新数据并更新DOM
}
```
阅读全文