layuimini tab切换刷新解决方案-根据需要刷新

问题:layuimini 管理页面框架iframe版本,当打开多个tab页面时候,从列表页tab打开编辑页tab,当修改完成后再次跳转到列表页tab,应该自动刷新,而不用手动刷新;

解决:利用父子iframe之间传递参数方式解决。

1.在index页面添加一个input输入框(实际需要隐藏hidden);

2.在编辑页tab跳转前给父页面input输入框赋值“refresh”;

3.在miniTab.js切换的时候判断父页面输入框值是否为“refresh”,如果是则刷新,刷新完成后设置为空值;

具体代码如下:

父页面:

<li class="layui-nav-item" lay-unselect="">
    <input id="refresh-inp" style="  width: 70px; border-color: #ff5722;">
</li>

编辑页:

parent.document.getElementById("refresh-inp").value="refresh";
miniTab.openNewTabByIframe({
	href: "/printRecord/list",
	title: "列表页面",
});

miniTab.js  监听tab切换 listenSwitch

/**
 * 监听tab切换
 * @param options
 */
listenSwitch: function (options) {
	options.filter = options.filter || null;
	options.multiModule = options.multiModule || false;
	options.urlHashLocation = options.urlHashLocation || false;
	options.listenSwichCallback = options.listenSwichCallback || function () {

	};
	element.on('tab(' + options.filter + ')', function (data) {
		debugger;
		var tabId = $(this).attr('lay-id');
		//切换到的焦点页能自动刷新--Start
		// $(".layui-tab-item.layui-show").find("iframe")[0].contentWindow.location.reload();
		var val = parent.document.getElementById("refresh-inp").value;
		if(val==="refresh") {
			//重新加载表格
			$(".layui-tab-item.layui-show").find("iframe")[0].contentWindow.location.reload();
			//清空数据
			parent.document.getElementById("refresh-inp").value="";
		}
		//切换到的焦点页能自动刷新--End
		if (options.urlHashLocation) {
			location.hash = '/' + tabId;
		}
		if (typeof options.listenSwichCallback === 'function') {
			options.listenSwichCallback();
		}
		// 判断是否为新增窗口
		if ($('.layuimini-menu-left').attr('layuimini-tab-tag') === 'add') {
			$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no')
		} else {
			$("[layuimini-href]").parent().removeClass('layui-this');
			if (options.multiModule) {
				miniTab.listenSwitchMultiModule(tabId);
			} else {
				miniTab.listenSwitchSingleModule(tabId);
			}
		}
		miniTab.rollPosition();
	});
},

参考:layuimini tab切换刷新解决方案_layui minitab_众纳的博客-CSDN博客

参考:Layui主窗口和Iframe层参数传递_weixin_30823227的博客-CSDN博客

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值