easyui框架jsp父页面使用iframe标签嵌套子页面传值并加载data-grid数据问题

最新做项目遇到使用easyui渲染太慢,当页面内容太多,全部写在一个界面上会严重的影响界面的加载速度,于是想到了使用<iframe>标签嵌套的方法。但是界面顶部的查询框是公共的,那么子页面的grid数据怎么从父页面传到子页面呢?
通过查询资料找到了解决办法,现将自己做的过程简单记录下来,供大家参考,同时也供自己后期学习。
我的界面展示如下:

如上图,父级的第二个tab页通过iframe标签嵌套进来一个页面,嵌套进来的界面又有三个tab,当每次点击子页面不同的tab时,通过父页面查询的条件不同,并将查询的结果显示在对应的子页面各tab中对应的grid表格中。

父级jsp页面中使用<iframe>标签嵌套子页面的操作代码为:

<div title="tab标题" style="padding:0px;" id="Tab的ID" data-options="iconCls:'icon-ok'">
<iframe src="子页面的访问地址" width=100% height=100% frameborder="0"></iframe>
</div>

如何将父级的查询传递给子页面呢,实现代码如下:
1.父级界面中调用子页面的方法:
switch (GV.tabType){
		case 'YRZ':
		searchVar.mtype="T";
		document.getElementsByTagName("iframe")[0].contentWindow.FN.loadGrid(searchVar);//传给子页面查询指令
		break;
}

可见,当父级GV.tabType="YRZ"时传进来的json参数增加了一个属性mtype='T',此时开始获取子页面的的window对象,并调用其的FN.loadGrid(param)方法,实现对子页面grid的数据填充。

2.子页面的具体操作代码如下:

FN.loadGrid = function(param){//加载表格数据
		switch (GV.tabType){
			case 'YFH':
				param.flag="B";
				EL.oGrid1.datagrid('loadData', { total: 0, rows: [] });//首先清空Grid
				EL.oGrid1.datagrid('options').url = URLS.commonSearch;
				EL.oGrid1.datagrid('load',param);//填充表格
				break;
			case 'YSGQ':
				param.flag="C";
				EL.oGrid2.datagrid('loadData', { total: 0, rows: [] });//首先清空Grid
				EL.oGrid2.datagrid('options').url = URLS.commonSearch;
				EL.oGrid2.datagrid('load',param);//填充表格
				break;
			default:
				param.flag="A";
				EL.oGrid3.datagrid('loadData', { total: 0, rows: [] });//首先清空Grid
				EL.oGrid3.datagrid('options').url = URLS.commonSearch;
				EL.oGrid3.datagrid('load',param);//填充表格
				break;
		}
	};
同样,通过代码可见,子页面FN.loadGrid()方法中也是针对用户点击不同的tab,拼接不同的param.flag的值,然后调用easyui-datagrid相应的方法为其表格加载相应的数据。最终完美的解决了页面加载缓慢的问题,同时界面也比较清爽!

本次只是个人使用iframe的一点小小总结,有什么不妥或者见解的地方,欢迎各位大神指点,互相学习!谢谢!


最后附上几篇比较有参考价值的博客,供大家查阅:
参考资料1:iframe document对象获取及使用

参考资料2:iframe父子页面相互调用示例


参与评论 您还未登录,请先 登录 后发表或查看评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

Jack·Chengb

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值