润乾ajax,通过异步请求实现报表组功能
问题描述:通过ajax的异步处理来切换多张报表的模型,类似润乾中的
具体实现:
首先先做两张普通的raq报表,用于之后展现所用。
在最终展现的页面中加入两个标签,分别通过触发js来进行异步处理,分别传入之前两张报表展现的url。
标签1
标签2
然后实现javascript代码:
var xmlHttp; //用于保存XMLHttpRequest对象的全局变量
//用于创建XMLHttpRequest对象
function createXmlHttp() {
//根据window.XMLHttpRequest对象是否存在使用不同的创建方式
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式
} else {
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);//IE浏览器支持的创建方式
}
}
//获取页面信息的调用函数
function switchPage(srcTab, pageName) {
resetTabs();
srcTab.className = “tab tabsel”;
createXmlHttp(); //创建XmlHttpRequest对象
writePageInfo(“正在加载……”); //显示提示信息
xmlHttp.onreadystatechange = writePageInfo;
xmlHttp.open(“GET”, pageName, true);
xmlHttp.send(null);
}
//获取页面信息的回调函数
function writePageInfo(pageInfo) {
//如果没有传入pageInfo参数,则读取xmlHttp对象的响应结果
if (pageInfo == undefined) {
if (xmlHttp.readyState == 4) {
var pageInfo = xmlHttp.responseText;
document.getElementById(“pageInfo”).innerHTML = pageInfo;
}
} else {
document.getElementById(“pageInfo”).innerHTML = pageInfo;
}
}
//恢复所有标签的class属性
function resetTabs() {
//获取tabdiv下的所有span节点
var tabs = document.getElementById(“tabdiv”).getElementsByTagName(“span”);
//遍历span节点,将class属性恢复为”tab”
for (var i=0; i
tabs[i].className = “tab”;
}
}
服务器端相应则可直接使用润乾默认展现报表的showReport.jsp来进行处理将结果返回。
在页面中第一次展现时只是个空页面
点击标签后异步加载不同的报表页面。
这样还可以分别在报表中添加导出等功能按钮,分别调用。实现了异步处理展现累死报表组风格的报表。
ps:当然标签边框等风格可以通过css来进行控制,进行美工的设置。
润乾ajax,通过异步请求实现报表组功能相关推荐
- [转]掌握Ajax 第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 [IBM]
转自:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步 ...
- ajax发送异步请求四个步骤,深入理解ajax异步请求的五个步骤(详细代码)
在前端工作中,经常会用到ajax,其实很多人只知道ajax是异步请求,不知道应该如何用它,它的基本步骤有哪些,ajax请求过程是怎样的?接下来这篇文章就给大家介绍Ajax的请求步骤,以及ajax请求步 ...
- 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求
转http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 ...
- ajax异步详解同步请求,ajax async异步请求和同步请求
ajax async异步请求和同步请求 ajax是指异步加载.这个异步是相对于页面来说的,页面不刷新就加载服务器数据.ajax中的请求又分为同步请求和异步请求,这里是相对于进程来说的,ajax异步请求 ...
- AJAX的异步请求小例子
JSP页面: <%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8&quo ...
- ajax发送异步请求与ajax发送同步请求
async (默认: true) 默认设置下,所有请求均为异步请求.如果需要发送同步请求,请将此选项设置为 false.注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行. ajax发 ...
- Ajax实现异步请求步骤
一.原生JS实现: var request = new XMLHttpRequest(); //创建XMLHttpRequest()对象 //启动一个HTTP请求,但未发送请求到服务端,最后一个参数默 ...
- 阿贾克斯(Ajax)异步请求数据
js文件中: 1.接受数据,分割拼接处理 2.var xhr = XMLHTTPRequest() 3.判断请求类型,get or post:get 的url里有参数,post里边没有(不能被用户直接 ...
- 润乾实现简单自定义动态列报表
需求背景: 用户生成的报表样式比较固定是较常见的网格式报表,但是要求可以选择报表的数据来源(数据表),并可以选择需要展现哪些列.根据用户选择结果生成报表查询结果. 实现思路: 1. 利用宏可控制数据集 ...
最新文章
- 一堆让人惊喜的实用工具,也许你还不知道
- 最新清华大学arXiv上传的深度学习摄像头运动估计论文
- my-large.cnf
- 那些陌生的C++关键字
- Python学习 - 之 数据封装和私有属性
- 3.2.4 页面分配策略
- 从零开始——电子商务平台01
- fs-extra导出换行txt文件
- 原创--DataGrid自动分页例子,通过存储过程
- 超强一代JupyterLab发布,可视化调试、中文显示、简单交互界面
- OBJECTPROPERTY OBJECT_ID TEXTPTR【转载】
- mysql解压包安装出现 No such file or directory错误的解决办法
- 抓取Amazon产品评论的神器
- 想做程序员?不同方向入门路线全解
- 在校大学生如何用编程赚钱?| 我的大学赚钱之路
- macOS 终端打开提示:zsh compinit: insecure directories
- flutter能开发游戏吗_Flutter Flame游戏开发上手(1)
- 163vip邮箱登录,163邮箱怎么登陆?如何登录163vip邮箱?
- python陆股通_要闻:11月“陆股通”渠道外资净买入A股579亿元
- C语言例题100道(1~20)
热门文章
- 为什么Note.js 里面没有sap.ui.core.Control.extend()这样的代码,但是runtime有自动生成有
- 继承的CSS类在Chrome开发者工具里的显示
- 如何查找SAP Fiori launchpad Designer的准确路径即url地址
- Quiz 92 - twisted
- 在Chrome console里修改Vue界面元素,更新如何刷新回UI?
- SAP CRM和C4C的订单Number range
- SAP CRM里Lead通过工作流自动创建Opportunity的原理讲解
- c语言除法效率问题,【图片】今天写几个性能测试,为什么C语言跑得这么慢呢??【c语言吧】_百度贴吧...
- 包含重复数字序列的全排列Python解法
- 复制出来的文本都是大写_vi或vim怎么复制粘贴