当前位置:首页 > 开发 > Web前端 > 前端 > 正文

异步加载子页面

发表于: 2014-02-13   作者:bsr1983   来源:转载   浏览:
摘要: 今天在编写运营后台的时候,遇到一个需要在同一页面中根据当前某条数据的Id,将关联的子表数据加载到同一页面中,想到的实现方式有两种,最终选择的是第二种方式,在此仅作记录 实现方式: (1)使用iframe实现 主数据列表中通过插入一个iframe元素,默认加载标示为0,在用户点击某一字段时,触发加载,一次加载后,改写加载标示为1,之后仅作显示即可。 主要代码: HTML部分 <tr

今天在编写运营后台的时候,遇到一个需要在同一页面中根据当前某条数据的Id,将关联的子表数据加载到同一页面中,想到的实现方式有两种,最终选择的是第二种方式,在此仅作记录

实现方式:

(1)使用iframe实现

主数据列表中通过插入一个iframe元素,默认加载标示为0,在用户点击某一字段时,触发加载,一次加载后,改写加载标示为1,之后仅作显示即可。

主要代码:

HTML部分

<tr id="mainData<s:property value="id" />" isShow="0" loadpage="0" style="display:none">
   <td colspan=17>
	<iframe id="mainDataFreame<s:property value="id" />" >
	</iframe>
   <td>
</tr>

 javaScript部分:

function showDataById(id)
{
	if($("#mainData"+id).attr("loadpage")=="0")
	{
		
		var url="dataAction!list?mainDataId="+id;
		var mainIframe = window.frames["mainIframe"+id];
		mainIframe.src=url;
		$("#mainData"+id).attr("loadpage","1");
	}
	if($("#mainData"+id).prop("isShow")=="1")
	{
		$("#mainData"+id).prop("isShow","0");
		$("#mainData"+id).hide();
	}
	else
	{
		$("#mainData"+id).prop("isShow","1");
		$("#mainData"+id).show();
	}
}

 (2)使用JQuery load方法加载html到div中

HTML代码部分:

<tr id="mainData<s:property value="id" />" tropen="0" loadpage="0" style="display:none">
    <td colspan=17>
	<div id="#mainDataDiv<s:property value="id" />" width="100%" height="500px">
    </div>
    <td>
</tr>

 Javascript部分:

function showDataById(id)
{
	if($("#mainData"+id).attr("loadpage")=="0")
	{
		
		var url="dataAction!list?mainDataId="+id;
		$("#mainDataDiv"+id).load(url);
		$("#mainData"+id).attr("loadpage","1");
	}
	if($("#mainData"+id).prop("isShow")=="1")
	{
		$("#mainData"+id).prop("isShow","0");
		$("#mainData"+id).hide();
	}
	else
	{
		$("#mainData"+id).prop("isShow","1");
		$("#mainData"+id).show();
	}
}

 

异步加载子页面

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号