问题描述:通过ajax的异步处理来切换多张报表的模型,类似润乾中的报表组样式,不过却别在于导出时可以每张报表逐一导出打印等。
具体实现:
首先先做两张普通的raq报表,用于之后展现所用。
在最终展现的页面中加入两个标签,分别通过触发js来进行异步处理,分别传入之前两张报表展现的url。
<body>
<div id=”tabdiv”>
<span class=”tab” οnclick=”switchPage(this, ‘showReport.jsp?raq=g1.raq’)”>标签1</span>
<span class=”tab” οnclick=”switchPage(this, ‘showReport.jsp?raq=g2.raq’)”>标签2</span>
</div>
<div id=”pageInfo”>点击标签动态加载内容。</div>
</body>
然后实现javascript代码:
<script type=”text/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.length; i++) {
tabs[i].className = “tab”;
}
}
</script>
服务器端相应则可直接使用润乾默认展现报表的showReport.jsp来进行处理将结果返回。
在页面中第一次展现时只是个空页面
点击标签后异步加载不同的报表页面。
这样还可以分别在报表中添加导出等功能按钮,分别调用。实现了异步处理展现累死报表组风格的报表。
ps:当然标签边框等风格可以通过css来进行控制,进行美工的设置