当前位置:首页 > 开发 > 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

    震惊

    震惊

编辑推荐
效果如图      在注册或登录网站时,当我们输入错误格式的账号或信息时,会看到这种提示。   
最近在做一个ext的项目,刚开时学ext,做一个树形显示列表,要求异步加载,在网上找了好久都没找到
工程结构: JSP <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <
最近在写一个zTree 异步加载的小例子,纠结了两三天,终于给纠结出来了!现将经验及代码分享如下:
最近在做一个ext的项目,刚开时学ext,做一个树形显示列表,要求异步加载,在网上找了好久都没找到
异步任务相信大家应该不会陌生,那么本章内容MOMO将带领大家学习Unity中的一些异步任务。在同步加载
这是一篇原创翻译文章。原文地址。 我们会经常使用iframes来加载第三方的内容、广告或者插件。使用i
  我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为它可以和主页面并行
unitTreeStore = Ext.create('Ext.data.TreeStore', { storeId:'unitTreeStore', nodeParam: 'pid',
rails+coffeescript+zTree 1.新建rails项目Ztree(rails new Ztree) 2.gemfile中添加ztree的引用 #
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号