問題描述：通過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來進行控制，進行美工的設置