今天在编写运营后台的时候,遇到一个需要在同一页面中根据当前某条数据的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(); } }
相关推荐
支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree 的节点移动、编辑、删除 支持任意更换皮肤 / 个性化图标(依靠css) 支持极其灵活的 checkbox 或 radio 选择功能 简单的参数...
同时,对于子模块,我们还可以使用延时加载,这样可以减少初始加载的文件的大小。在这篇文章中,我们就来看看在Angular2框架下怎么实现子模块及其延时加载。 可以在这里查看本文使用的实例 。该实例基于上篇文章...
本篇文章主要给大家分享了Angular结合zTree异步加载节点数据的难点以及方法,有这方面需求的朋友参考下吧。
异步加载演示 如今,创建一个加载大量供应商脚本和CSS的网站是很常见的,但是此类功能最多只能在一个页面或两个页面中使用。 该演示的特点是我对进行了调整,该脚本是我在研究异步加载非常繁重的图形库的解决方案时...
zTree 的页面上,编写 beforeAsync(treeId, treeNode) 函数(函数名可以自定义),并配置在 setting 的 callback 参数内,即可在触发 zTree 的 异步加载事件之前得到相应信息,并根据自己的需求确定是否该节点可以...
* 【修改】异步加载 规则,不再仅仅依靠父节点的子节点数来判定,增加内部属性 zAsync,保证默认状态下父节点及时无子节点也只能异步加载一次,除非使用 reAsyncChildNodes 方法强行控制异步加载。 * 【修改】放大...
* 【修改】异步加载时,对于未加载子节点的父节点使用 expandNode 方法时, sonSign 设置为 true后,导致异步加载的节点无法正常显示的bug * 【修改】一次性加载全部数据,如果父节点 A 未展开,但下一级的父节点 ...
JS性能优化是指在JavaScript代码的编写和执行过程中,通过一系列的优化策略和技术手段,提高代码的执行效率和性能,从而提升网页或应用程序的响应...使用异步加载:通过异步加载脚本文件、图片等资源,可以提高页面的
具有HttpPost获取网络数据、使用JSON解析、Fragment页面、AsyncTask异步加载图片、Handler、Listview展示界面,上拉获取更多数据等功能。该案例是一个综合性较为全面的应用,通过该案例的学习可以对基础只是做一个...
本设计为“基于Ajax的博客应用系统的设计与实现”,本博客系统的开发基于Ajax技术,采用异步通信,在不刷新整个页面的前提下局部更新页面数据,带给用户快速良好的交互体验。本系统将实现以下功能: (1) 博客来访...
异步文件加载-为了防止阻止页面加载,并在后台加载大型库以加快加载过程。 可能还提供了回调方法-它不会阻止页面加载,但可用于检查外部库是否成功初始化。 什么?! 除了客户端的server , public和private子
8.18 级联AJAX数据异步加载 8.19 取消AJAX异步请求 第9章 jQuery常用算法 9.1 jQuery遍历算法 9.2 jQuery祖先算法 9.3 jQuery后代算法 9.4 jQuery同胞算法 9.5 jQuery过滤算法 9.6 对一个列表进行排序 9.7 实现JSN...
主要介绍了antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
异步在页面底部加载原始的@font-face声明CSS,将其移出关键路径 当前支持的字体服务: Google字体 本地字体(使用 ) 如果您知道使用自由字体使用许可的字体服务,请打开一个问题,我们将为其提供支持 安装 获取...
Ajax-E-Learning-Management-System.zip,这是一个用于电子学习的web应用程序。它有三种类型的用户,如管理员、教师和学生仪表板以及所有这些...它用于创建动态网页,其中网页的小部分在不重新加载网页的情况下更改。
Ajax-GuidetoCS.zip,我把这个项目作为我的学术课程的一部分。该项目主要是一个电子学习门户网站,主要为计算机专业本科生提供基础课程,包括...它用于创建动态网页,其中网页的小部分在不重新加载网页的情况下更改。
当 Web 浏览器遇到 iframe 元素时,它会创建一个新的 HTML 文档...](https://www.theserverside.com/definition/cascading-style-sheet-CSS)它们也可以从父站点异步刷新和加载。 父站点可以定义 iframe 的各个方面.
通过自定义回调和错误处理来管理异步和可传递依赖项加载。 触发您通过Promise接口指定的回调。 可以按顺序加载传递依赖关系,也可以一次加载一组依赖关系,也可以加载单个路径。 允许JavaScript在运行时添加更多...
当然功能还是很简单的,在响应式设计和异步加载的情况下,还是有很多资源没有能够下载,需要根据实际情况处理下 首先当然是下载 nodejs 和 phantomjs 下面是 phantomjs.exe 执行的 down.js var page = require('...
异步加载,通过异步加载外部网站的多张图片,来介绍和演示Android环境下如何去实现文件异步加载功能,想搞Android软件开发的新手,有必要掌握 的一个技巧,程序中考虑到捕获RejectedExecutionException同时加载的...