我用的框架是layui的框架,其实不管什么框架,都是一样的,特别简单;
问题描述:页面当中有新增按钮、修改、删除等,如果新增或修改成功,直接刷新列表用户体验会有一些差。
问题解决方向:我们的需求就是查询条件不变,页数不变,起初在网上搜集资料都说可以放到session域中然后当重新跳转到列表时去读取session域的数据,可是如果是后台管理系统当有很多表需要维护时,那这样就不是很合适了,因为将所有查询条件都放到session里难免会有重复,而且你放的越多,session空间也有待考虑,后期扩展不是很好。
问题解决:
1.通过考虑,是否可以当新增成功后,返回列表时加一个方法,不直接reload父页面,我们可以实现将子页面关闭,重新加载列表数据;
2.将子页面关闭可以实现;重新加载列表数据我们也可以写table.reolad方法、还有一种就是比较简单,直接调用查询按钮的click事件不就什么都解决了嘛;
3.思路有了,我们就可以动手试一试;
将子页面关闭:
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
调用父页面查询按钮的click事件:
(我在父页面写了一个aa方法,在其中调用查询按钮的click事件,然后在子页面新增成功后直接调用aa这个方法)
parent.aa();
以上代码是写在一起的。
function aa(){
$(".searchBtn").click();
}
还有就是保留分页的页码
var ss = $(".layui-laypage-em").next().html();//这个就是当页页码
dataTable.reload({
where: searchData,
page: {
curr: 1 //重新从第 1 页开始
}
});
放到page当中的curr当中,那返回后台的时候就是当前的页数
dataTable是layui中通过 var dataTable= table.render(options) 得到的。
参数 options 即为各项基础参数,比如页数,当前页等等。
隐含问题:当删除按钮删除数据时,假如也调用了查询条件,那会有一个问题,就是当删除的数据是在第二页,吧第二页的数据全部删除,那就页码数还是第二页就不对了。
其实没有必要调用查询条件的click事件,可以自己单独写一个。