easyui tab iframe 刷新

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

管理页面如下图：

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

 

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

 

 

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

 

1. function refreshList(){
2. $("#user-datagrid").datagrid("reload");//刷新grid
3. }
4. function operateFormatter(v, r, i) {
5. var tmp= "<button οnclick=\"modifyModel("+ r.id+",\'贷款ID："+ r.id+"\')\">详细信息</button>";
6. return tmp;
7. };
8. function modifyModel(id, title, evt) {
9.  
10. var _url="/creditbank/borrower/profile?id=" + id+"&?rnd="+Math.random();
11.  
12. var strHtml = '<iframe id="frmWorkArea" width="100%" height="100%" frameborder="0" scrolling="yes" src="'
13. + _url + '"></iframe>';
14. var title=id+"-贷款详情";
15. //判断Tab标签中是否有相同的数据标签
16. var jq = top.jQuery;
17. var main =jq("#tt");
18.  
19. var isExist =main.tabs('exists', title);
20. if (!isExist) {
21. main.tabs('add', {
22. title : title,
23. fit : true,
24. content : strHtml,
25. closable : true
26. });
27. } else {
28. main.tabs('select', title);
29. }
30.  
31. }

代码解释：

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

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

注意：

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

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

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

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

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

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

 

1. //.....省略业务代码
2.  
3. alert("审核成功");
4. var jq =window.top.jQuery;
5. var main =jq("#tt");
6.  
7. jq("iframe[src='/creditbank/borrower']")[0].contentWindow.refreshList();
8.  
9. main.tabs('close', objParams.id+"-贷款详情");

可以看到我们依然是通过top.jQuery和jq("#tt")获取tab对象，然后通过close来实现对详情tab关闭。

 

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

 

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

 

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

对应的html源码如下图：

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