layui标签页切换并自动刷新

layui每打开一个页面就会以标签页的形式保留在导航条上，然而我们在其他的标签页改了数据，再切换回去页面数据还是以前的，这里就需要一个切换标签页显示并自动刷新当前标签页咯，保证每次切换回来就能看到新数据，而不是要手动去点顶部的页面刷新。

这个问题困扰了我几天，就在刚刚准备提个问了，上面那段话就是我的问题原话，我都准备发布了，我看到了我的最后一句话，让我看到了希望并随后解决了问题。

F12直接找到顶部刷新：

<li class="layui-nav-item" lay-unselect><a href="javascript:;" layadmin-event="refresh" title="刷新"><i class="layui-icon layui-icon-refresh-3"></i></a>
</li>

发现事件：refresh，果断全局搜索，结果就是在admin.js中找到了：

 //刷新refresh: function () {var iframe = admin.tabsBody(admin.tabsPage.index).find(".layadmin-iframe");iframe[0].contentWindow.location.reload(true);}

这就是当前标签页的重载方法，但是需要标签页的下标index，又在admin.js中一阵寻觅，成功找到：

   //监听 tab 组件切换，同步 indexelement.on('tab(' + FILTER_TAB_TBAS + ')', function (data) {admin.tabsPage.index = data.index;});

这正是切换标签页的监听事件，设置当前显示的标签页的下标，下标现成，那还不是简简单单啊：

   //监听 tab 组件切换，同步 indexelement.on('tab(' + FILTER_TAB_TBAS + ')', function (data) {admin.tabsPage.index = data.index;//1.调用刷新事件events.refresh();//2.显示标签页重载//var iframe = admin.tabsBody(admin.tabsPage.index).find(".layadmin-iframe");//iframe[0].contentWindow.location.reload(true);});

除了页面切换回来，页面刷新数据表格有一次跳动外，其他都挺好。

如果是弹窗的话就更简单了，只需要在弹窗关闭回调中写一个表格重载就好了：

//关闭回调
cancel: function(){ table.reload('表格的ID');
}

又发现个问题，上面的关闭回调，只有点击弹窗右上角的X才会触发，所以还是用销毁后回调比较好：

无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。

//销毁后回调
end: function(){ table.reload('表格的ID');
}

如有其他更好的方法，还请告知！！！

layui标签页切换并自动刷新相关推荐

php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
BootStrap之标签页切换
标签页切换标签页切换标签页插件第一个官方例子调用tab("show")显示tab-pane中的内容第一个例子的HTML+CSS代码 fade in效果函数介绍前提条件 ...
JavaScript 实现标签页切换效果
JavaScript 实现标签页切换效果构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id="tab">& ...
【Axure RP9基础】 Axure标签页切换详解
[Axure RP9基础] 标签页切换在设计原型中,PC和APP端标签页切换是常用的功能,那么在用Axure画原型时我们可以用矩形和动态面板做出标签页切换的效果. 最终效果:点击标签页,显示标签页选 ...
微信小程序中标签页切换效果是怎么做出来的
于传统网页开发中的标签页切换效果不同的是,小程序的标签页切换更接近原生APP的交互体验!也就是可以通过左右滑动页面进行切换,类似于网页开发中的焦点图切换的效果. --这当然是通过微信小程序强大的组件和 ...
Python爬虫之selenium对标签页切换、切换frame标签、cookie处理、执行js代码、开启无界面、以及使用代理ip和替换user-agent等方法
一.selenium对标签页切换.切换frame标签.cookie处理.执行js代码.开启无界面.以及使用代理ip和替换user-agent等方法 (一).selenium标签页的切换当seleni ...
[ElementPlus] 多标签页切换
版本 "element-plus": "2.1.9" Store export interface Tab {title: stringcontent: str ...
bootstrap --- 标签页切换
很多时候,我们希望写一个简单的标签页.以下使用bootstrap来实现- 首先导入bootstrap的依赖:jquery的依赖.bootstrap的依赖注意: jquery的依赖要在bootstra ...
ocx控件 postmessage消息会消失_实战经验：如何检测CMFCTabCtrl控件标签页切换事件...
MFC库中经常会使用到的一个控件是Tab标签页控件,这个控件在展现多个平级数据集非常合适. 与控件对应的,是MFC库中的两个类:CMFCTabCtrl和CMFCBaseTabCtrl,其中CMFCTa ...

layui标签页切换并自动刷新

layui标签页切换并自动刷新相关推荐

最新文章

热门文章