实例详解tab互操作:easyUI tab弹出新tab并刷新指定tab里的grid数据

实例详解tab互操作:easyUI tab弹出新tab并刷新指定tab里的grid数据

2064发表于2016-10-14

前段时间有这样的一个需求:

easyUI tab(tab A)里面的grid操作列,点击弹出一个新tab(tab B),在这个tab B里面操作成功后完成并手动关闭当前tab,然后自动刷新tab A里的grid数据。

管理页面如下图:

最右边的操作列对应的html:


<th field="t"  width="2"  formatter="operateFormatter">操作</th>



这个管理页面相关的部分js代码:


function refreshList(){
	$("#user-datagrid").datagrid("reload");//刷新grid
}
function operateFormatter(v, r, i) {
	var tmp= "<button onclick=\"modifyModel("+ r.id+",\'贷款ID:"+ r.id+"\')\">详细信息</button>";
	return tmp;
};
function modifyModel(id, title, evt) {

	var _url="/creditbank/borrower/profile?id=" + id+"&?rnd="+Math.random();

	var strHtml = '<iframe id="frmWorkArea" width="100%" height="100%" frameborder="0" scrolling="yes" src="'
			+ _url + '"></iframe>';
	var title=id+"-贷款详情";
	//判断Tab标签中是否有相同的数据标签
	var jq = top.jQuery;
	var main =jq("#tt");

	var isExist =main.tabs('exists', title);
	if (!isExist) {
		main.tabs('add', {
			title : title,
			fit : true,
			content : strHtml,
			closable : true
		});
	} else {
		main.tabs('select', title);
	}
  
}

代码解释:

操作列调用的是formatter调用的是operateFormatter,里面绑定的是modifyModel方法。

熟悉easyUI的同学都知道新增tab标签是可以通过调用$("tt").tabs('add', 实现,并在content属性添加一个iframe。

注意:

在tab页面里要使用top.jQuery获取到最外层页面的jquery对象才能找到tab的外层容器,才能通过jq("tt")获取到tab的引用,也就才能执行操作tab(添加,删除等操作)。

当我们点击“详细信息”后执行效果如下图:

这个新弹出的tab页面有两按钮,这个页面按钮要达到下面的目的:

点击“驳回”会弹出下面一个信息框。

要求输入驳回原因,保存成功后关闭这个新弹出的tab,然后刷新管理列表页面(贷款管理)的数据列表。

详情页面对应的js核心代码:


//.....省略业务代码

alert("审核成功");
var jq =window.top.jQuery;
var main =jq("#tt");

jq("iframe[src='/creditbank/borrower']")[0].contentWindow.refreshList();

main.tabs('close', objParams.id+"-贷款详情");
可以看到我们依然是通过top.jQuery和jq("#tt")获取tab对象,然后通过close来实现对详情tab关闭。


刷新管理页面的数据的代码是下面这行代码:


jq("iframe[src='/creditbank/borrower']")[0].contentWindow.refreshList();


我们是通过属性来找到这个iframe,因为使用的这个框架没有为tab里面的iframe指定id或name,所能只能通过src属性来查找。

对应的html源码如下图:

最后,要执行iframe里面js函数,要通过contentWindow获取到iframe里面的window对象再调用函数refreshList(),这个函数也好是文章开头的管理页面的函数。

使用技术总结:

1、easyUI在tab里面弹出新tab标签

2、在弹出新tab标签页面关闭当前tab

3、在其他tab(弹出新tab标签)调用原父tab或指定tab的页面的js代码。

4、js查找操作父iframe和子iframe。


小编蓝狐