第五章 BIRT文本類報表

5.1 基本的文本報表

我們構建一個報表ProductLinesAfter.rptdesign，使用示例數據庫，空白模板，sql選擇查詢作爲數據源，新建數據集Data Set：

select *

from CLASSICMODELS.PRODUCTLINES

查詢數據源資源管理器，注意到表PRODUCTLINES中有一個字段HTMLDESCRIPTION是CLOB字段的：

存儲內容爲html格式的字符文檔，其中prodcutline爲Vintage Cars的htmldescription如下：

[html] view plain copy

<html>
<h4><font face="Verdana">Vintage Cars</font></h4><p>
<font face="Times New Roman">Our Vintage Car models realistically portray automobiles produced from the early</font>
<b><font face="Arial" size="2">1900s</font></b> <font face="Times New Roman">through the</font> <b>
<font face="Arial" size="2">1940s</font></b>.<font face="Times New Roman"> Materials used include
<i><b>Bakelite<sup>®</sup>, diecast, plastic and wood</b></i>. Most of the replicas are in the </font>
<b><font face="Arial" size="2">1:18</font></b> and <b>
<font face="Arial" size="2">1:24</font></b> <font face="Times New Roman">scale sizes, which provide the optimum in detail and accuracy. Prices range from</font>
<i><b><font face="Arial" color="#009933" size="2">$30.00</font></b></i> up to <i><b>
<font color="#009933" face="Arial" size="2">$180.00</font></b></i>
<font face="Times New Roman">for some <i><b>special limited edition replicas</b></i>. All models include a
<i><b>certificate of authenticity</b></i> from their manufacturers and <i><b>come fully assembled</b></i> and ready for display in the home or office.</font></p>
<font face="Times New Roman">
<u><b>Additional Information</b></u>
</font>
<ul>
<li><font face="Times New Roman">No Toxic Materials</font></li>
<li><font face="Times New Roman">Monogram Service Available</font></li>
<li><font face="Times New Roman">Suitable for Children Above 10 Years of Age</font></li>
<li><font color="#FF0000" face="Times New Roman"><i><b>90 Day Money Back Guarantee</b></i></font></li>
</ul>
</html>

佈局報表：

插入一個1行3列的網格，其中第一列插入一個圖片，爲url嵌入的名爲Classic-Models-Minimal-S.jpg，第二列插入一個標籤，名爲Product Lines，第三列插入一個名爲Classic Models Inc的標籤和一個無格式的動態文本701 Gateway Blvd,

South San Francisco, CA 94080

如下所示：

然後網格下方插入一個1行4列的表，合併頁眉，插入標籤Product Lines

詳細數據行，第一列拖入dataSetRow["PRODUCTLINE"]，第二列插入文本，選擇HTML格式的動態文本，輸入<H5><VALUE-OF>row["TEXTDESCRIPTION"]</VALUE-OF></H5>

第三列插入動態文本，輸入row["HTMLDESCRIPTION"]

第四列插入圖像，

作適當的佈局和美化，效果如下：

在web查看器中查看報表，運行效果如下：

這說明了我們可以在文本和動態文本中通過插入html格式的字符串來實現一些特效。

例如我們可以在中間插入一列文本，文本是html格式的，內容如下：

[html] view plain copy

<html>
<script language='JavaScript' type='text/JavaScript'>
function printproduct(str){alert(str);}
</script>
<body>
<center>
<form>
<input type='button' value='單擊可以獲取行信息' onclick="alert('<VALUE-OF>row["PRODUCTLINE"]</VALUE-OF>：<VALUE-OF>row["TEXTDESCRIPTION"]</VALUE-OF>')">
</form>
<a href='' title='<VALUE-OF>row["TEXTDESCRIPTION"]</VALUE-OF>' onclick="printproduct('<VALUE-OF>row["TEXTDESCRIPTION"]</VALUE-OF>')" ><b><i><u><VALUE-OF>row["PRODUCTLINE"]</VALUE-OF></u></i></b></a>
</center>
</body>
</html>

佈局和預覽分別如下：

把鼠標放在超鏈接上會有幫助文本出現，當然單擊按鈕和超鏈接一樣可以獲得產品線文本描述。

上面的一段html說明了，在文本中可以輸入html，可以自定義javascript腳本，在需要行信息的時候，只需要加上[<VALUE-OF>列綁定</VALUE-OF>]即可，html在運行調用之前會把[<VALUE-OF>列綁定</VALUE-OF>]替換成一個不帶引號的字符串常量。

這意味着我們可以在birt中編寫網頁，只要在需要數據集的地方插入數據集即可，這樣我們可以編寫豐富的文本類報表，比如會計憑證，信箋封面，信箋正文，甚至添加ajax特性。

5.2 交互式文本報表

下文詳細說明標籤，文本，動態文本，數據的差別。

標籤只能插入文字，無法包含任何格式信息；

動態文本能把clob中的字符顯示出來，如果clob字段包含HTML標籤，則顯示瀏覽器解釋後的HMTL效果；

數據能把clob中的字符顯示出來，如果clob字段中包含html標籤，則連同標籤一起顯示出來，不區分是否爲html文本；

而文本，對於clob中包含html標籤，則既能顯示成瀏覽器解釋後的效果，也能顯示成帶html標籤的純文本。從顯示的效果來看，插入動態文本類似於插入文本-HTML格式動態文本，在編輯區輸入：<VALUE-OF format="HTML">row["HTMLDESCRIPTION"]</VALUE-OF>

而插入數據則相當於插入文本-HTML格式動態文本，編輯成如下內容：<VALUE-OF >row["HTMLDESCRIPTION"]</VALUE-OF>

只是用文本的方式刪除了html中的換行。

然而，動態文本和數據仍然是不可缺少的元素，它們有各自的優勢。

動態文本的優勢在於，我們可以在編輯動態文本時加入javascript邏輯，如下所示，我們插入動態文本：

if (row.__rownum%2==0){

displayString = row["HTMLDESCRIPTION"]

}

else{

displayString = "這是一個行數爲奇數的行，老夫不想顯示"

}

則顯示效果如下：

數據的優勢在於，我們在插入數據的時候必須進行列綁定，這意味着我們可以在其他地方（文本，動態文本，數據）需要處理數據的時候用到這個列綁定。例如我們可以新插入一列，插入[數據]用的不是數據集，而是可用列綁定，把這個處理後的可用列幫東命名爲fifthbinding：

我們再插入第六列，插入動態文本，用的可用列綁定：row["fifthbinding"].substr(0,2)+row["HTMLDESCRIPTION"]

查看效果：

下面詳細描述文本的格式。

類型有三個，HTML格式，無格式，自動

HTML格式代表編輯區域的文本是包含HTML標籤的，需要解釋後顯示；無格式代表文本是純文本，就算有HTML標籤也連同標籤直接顯示，自動錶示會檢測識別。通常選HTML即可。

內容編輯區的工具欄有五類標籤可用，格式化，佈局，內容，列表，動態文本。

熟悉HTML標籤的人應該很好理解格式化，佈局，內容，列表這四類標籤的含義。實際上這四類標籤僅作幫助，編輯區可以使用任何HTML標籤，例如下面的文本，

Shipped Orders Report

</B></span><BR>

<FONT size="small">For the month of March</FONT></CENTER>

在BIRT中顯示如下：

重點講解<value-of>標籤，只要是想調用javascript腳本或者列綁定的地方，都可以插入<value-of>標籤，例如我們可以插入下面這句：

Report generated on <VALUE-OF>new Date()</VALUE-OF>

輸出：Report generated on 2013-1-2 下午4:53

還能插入下面這句：

Dear <VALUE-OF>row["Sex"] == "M" ? "Mr." : "Ms."</VALUE-OF>

<VALUE-OF>row["Name"]</VALUE-OF>,

輸出：

Dear Mr. Scott Johnson,

Dear Ms. Ella Parker,

也可以這樣寫：

Dear <VALUE-OF>if(row["Sex"] == "M"){

Title = "Mr."

}

else{

Title = "Ms."

}</VALUE-OF>

<VALUE-OF>row["Name"]</VALUE-OF>

我們可以在文本中多次使用<VALUE-OF>標籤：

Dear <VALUE-OF>row["contact_firstname"]</VALUE-OF>,

<p>

Thank you for your recent order. Order <VALUE-OF>

row["orderID"]</VALUE-OF> will be shipped by <VALUE-OF>

row["shipByDate"]</VALUE-OF>.

輸出：

Dear Bob,

Thank you for your recent order. Order 1115 will be shipped

by Apr 17, 2009 12:00AM.

<VALUE-OF>標籤還可以指定格式化的樣式

<VALUE-OF format="MM-dd-yy">new Date()</VALUE-OF><br>

<VALUE-OF format="$#,###.00">row["orderTotal"]</VALUE-OF><br>

<VALUE-OF format="(@@@) @@@-@@@@">row["phone"]</VALUE-OF>

輸出:

04-17-05

$321,000.00

(415) 123-5555

具體的樣式格式，參看下一章數據的格式化。

<VALUE-OF format="HTML">表示該可用列綁定裏面的html標籤需要先解釋再顯示，用法如下。

<VALUE-OF format="HTML">row["HTMLDESCRIPTION"]</VALUE-OF>

我們現在做一個稍微複雜的例子。

構建報表customer.rptdesign,空白模板，示例數據庫，sql選擇查詢數據源，數據集customer:

select CLASSICMODELS.CUSTOMERS.CUSTOMERNUMBER,CLASSICMODELS.CUSTOMERS.CUSTOMERNAME,CLASSICMODELS.CUSTOMERS.CONTACTLASTNAME,CLASSICMODELS.CUSTOMERS.CONTACTFIRSTNAME,CLASSICMODELS.CUSTOMERS.PHONE,CLASSICMODELS.CUSTOMERS.ADDRESSLINE1,CLASSICMODELS.CUSTOMERS.CREDITLIMIT,CLASSICMODELS.CUSTOMERS.COUNTRY,CLASSICMODELS.CUSTOMERS.STATE,CLASSICMODELS.CUSTOMERS.CITY

,CLASSICMODELS.CUSTOMERS.POSTALCODE from CLASSICMODELS.CUSTOMERS

where CLASSICMODELS.CUSTOMERS.CUSTOMERNUMBER=?

新建報表靜態文本框參數customernumber，默認值114

綁定數據集參數和報表參數customernumber。

插入1行5列的表，佈局如下：

構建報表oders.rptdesign,空白模板，示例數據庫，sql選擇查詢數據源，數據集orders:

select CLASSICMODELS.ORDERS.ORDERNUMBER,CLASSICMODELS.ORDERS.ORDERDATE,CLASSICMODELS.ORDERS.REQUIREDDATE,CLASSICMODELS.ORDERS.SHIPPEDDATE,CLASSICMODELS.ORDERS.STATUS,CLASSICMODELS.ORDERS.COMMENTS,CLASSICMODELS.ORDERS.CUSTOMERNUMBER

from CLASSICMODELS.ORDERS

插入1行6列的表，佈局如下：

構建報表oderdetails.rptdesign,空白模板，示例數據庫，sql選擇查詢數據源，數據集orderdetails：

select CLASSICMODELS.ORDERDETAILS.ORDERNUMBER,CLASSICMODELS.ORDERDETAILS.PRODUCTCODE,CLASSICMODELS.ORDERDETAILS.QUANTITYORDERED,CLASSICMODELS.ORDERDETAILS.PRICEEACH,CLASSICMODELS.ORDERDETAILS.ORDERLINENUMBER

from CLASSICMODELS.ORDERDETAILS

where CLASSICMODELS.ORDERDETAILS.ORDERNUMBER=?

新建報表靜態文本框參數ordernumber，默認值10100

綁定數據集參數和報表參數ordernumber。

插入1行5列的表，佈局如下：

構建報表product.rptdesign,空白模板，示例數據庫，sql選擇查詢數據源，數據集product：

select CLASSICMODELS.PRODUCTS.PRODUCTCODE,CLASSICMODELS.PRODUCTS.PRODUCTNAME,CLASSICMODELS.PRODUCTS.PRODUCTLINE,CLASSICMODELS.PRODUCTS.PRODUCTSCALE,CLASSICMODELS.PRODUCTS.PRODUCTDESCRIPTION,CLASSICMODELS.PRODUCTS.BUYPRICE

from CLASSICMODELS.PRODUCTS

where CLASSICMODELS.PRODUCTS.PRODUCTCODE=?

新建報表靜態文本框參數productcode，默認值S10_1678

綁定數據集參數和報表參數productcode。

插入1行6列的表，佈局如下：

構建報表productline.rptdesign,空白模板，示例數據庫，sql選擇查詢數據源，數據集product：

select *

from CLASSICMODELS.PRODUCTLINES

where CLASSICMODELS.PRODUCTLINES.PRODUCTLINE=?

新建報表參數productline，默認值Vintage Cars

綁定數據集參數到報表參數productline。

插入1行5列的表，如前文所述做佈局如下：

我們現在想做一個網頁，通過訂單，可以瞭解客戶詳細信息，也可以瞭解訂單明細，產品明細，產品線明細，而不用轉跳到別的網頁，也不用完全的刷新頁面。單擊一個客戶號即可刷新一個客戶詳細信息。單擊一個訂單號即可刷新一個訂單明細，單擊一個產品號即可刷新一個產品詳細信息；單擊一個產品線號即可刷新一個產品線的明細。我們在1個jsp上嵌入5個frame來實現。

我們新建jsp文件allorders.jsp，內容如下：

[html] view plain copy

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="/birt.tld" prefix="birt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="en-us">
<title>BIRT JSP Tag Lib Mashup</title>
<style>
.pageHeader {
position: absolute;
width: 1020px;
text-align: center;
color: #224499;
font-size: xx-large;
font-weight: bold;
}
.mashupContainer {
position: absolute;
font-family: Verdana, Tahoma, Arial;
font-size: 11px;
border: 1px solid #87AFDA;
margin: 3px;
}
.mashupTitle {
position: absolute;
background: #D4E6FC;
font-size: 14px;
font-weight: bold;
color: #224499;
padding: 3px;
border-bottom: 1px solid #87AFDA;
}
.mashupContent {
position: absolute;
padding: 3px;
}
</style>
</head>
<body>
<div class="mashupContainer" id="orders" style="top: 50px; left: 20px; width: 655px; height: 400px;">
<div class="mashupTitle" style="width: 99.1%; height: 20px;">orders</div>
<div class="mashupContent" id="ordersDiv" style="top: 24px; left: 0px; width: 99%; height: 380px;">
<birt:viewer id="birtViewer1"
reportDesign="orders.rptdesign"
baseURL="<%= request.getContextPath( )%>"
pattern="run"
height="367"
width="645"
format="html"
frameborder="false"
isHostPage="false"
isReportlet="true"
showParameterPage="false"
>
</birt:viewer>
</div>
</div>
<div class="mashupContainer" id="orderdetails" style="top: 50px; left: 700px; width: 650px; height: 400px;">
<div class="mashupTitle" style="width: 99.1%; height: 20px;">orderdetails</div>
<div class="mashupContent" id="orderdetailsDiv" style="top: 24px; left: 0px; width: 99%; height: 380px;">
<birt:viewer id="birtViewer2"
reportDesign="orderdetails.rptdesign"
baseURL="<%= request.getContextPath( )%>"
pattern="run"
height="367"
width="650"
format="html"
frameborder="false"
isHostPage="false"
isReportlet="true"
showParameterPage="false"
>
</birt:viewer>
</div>
</div>
<div class="mashupContainer" id="customer" style="top: 460px; left: 20px; height: 100px; width: 655px;">
<div class="mashupTitle" style="width: 99.4%; height: 90px;">customer</div>
<div class="mashupContent" id="customerDiv" style="top: 25px; width: 99%; height: 80px; align: middle; text-align: center;">
<birt:viewer id="birtViewer3"
reportDesign="customer.rptdesign"
baseURL="<%= request.getContextPath( )%>"
pattern="run"
height="70"
width="645"
format="html"
frameborder="false"
isHostPage="false"
isReportlet="true"
showParameterPage="false"
>
</birt:viewer>
</div>
</div>
<div class="mashupContainer" id="product" style="top: 460px; left: 700px; width: 655px; height: 100px;">
<div class="mashupTitle" style="width: 99.1%; height: 90px;">product</div>
<div class="mashupContent" id="productDiv" style="top: 24px; left: 0px; width: 99%; height: 80px;">
<birt:viewer id="birtViewer4"
reportDesign="product.rptdesign"
baseURL="<%= request.getContextPath( )%>"
pattern="run"
height="70"
width="645"
format="html"
frameborder="false"
isHostPage="false"
isReportlet="true"
showParameterPage="false"
>
</birt:viewer>
</div>
</div>
<div class="mashupContainer" id="productline" style="top: 570px; left: 20px; height: 650px; width: 1200px;">
<div class="mashupTitle" style="width: 99.4%; height: 20px;">productline</div>
<div class="mashupContent" id="productlineDiv" style="top: 25px; width: 99%; height: 40px; align: middle; text-align: center;">
<birt:viewer id="birtViewer5"
reportDesign="productline.rptdesign"
baseURL="<%= request.getContextPath( )%>"
pattern="run"
height="600"
width="1200"
format="html"
frameborder="false"
isHostPage="false"
isReportlet="true"
showParameterPage="false"
>
</birt:viewer>
</div>
</div>
</body>
</html>

我們訪問http://localhost:8080/WebViewerExample/allorders.jsp

則能看到如下的效果：

但是此時這五個frame還不能聯動，要對報表進行相應的修改。

對於orders.rptdesign，修改訂單號頁眉下的詳細數據項，刪除綁定的數據項，插入文本，內容如下：

[html] view plain copy

<html>
<script language='JavaScript' type='text/JavaScript'>
function printproduct(paravalue){var origUrl = parent.frames['birtViewer2'].location.toString();var pos = origUrl.indexOf('&__overwrite=true');if (pos > 0) { parent.frames['birtViewer2'].location = origUrl.substr(0, pos) + '&__overwrite=true&ordernumber='+paravalue ;} else {parent.frames['birtViewer2'].location = origUrl+ '&__overwrite=true&ordernumber='+ paravalue;};}
</script>
<body>
<center>
<a href='' title='<VALUE-OF>row["ORDERNUMBER"]</VALUE-OF>' onclick="printproduct('<VALUE-OF>row["ORDERNUMBER"]</VALUE-OF>')" ><b><i><u><VALUE-OF>row["ORDERNUMBER"]</VALUE-OF></u></i></b></a>
</center>
</body>
</html>

說明：插入了一個超鏈接，單擊觸發事件，javascript腳本的含義是修改id爲birtViewers2的報表地址，拼接上參數ordernumber爲當前報表行row["ORDERNUMBER"]，這樣就實現了動態刷新嵌入有orderdetails.rptdesign的frame，讓報表只顯示單擊後的訂單號的訂單明細。

同樣的道理，我們修改客戶號頁眉下的詳細數據項，刪除綁定的數據項，插入文本如下：

[html] view plain copy

<html>
<script language='JavaScript' type='text/JavaScript'>
function printproduct1(paravalue){var origUrl = parent.frames['birtViewer3'].location.toString();var pos = origUrl.indexOf('&__overwrite=true');if (pos > 0) { parent.frames['birtViewer3'].location = origUrl.substr(0, pos) + '&__overwrite=true&customernumber='+paravalue ;} else {parent.frames['birtViewer3'].location = origUrl+ '&__overwrite=true&customernumber='+ paravalue;};}
</script>
<body>
<center>
<a href='' title='<VALUE-OF>row["CUSTOMERNUMBER"]</VALUE-OF>' onclick="printproduct1('<VALUE-OF>row["CUSTOMERNUMBER"]</VALUE-OF>')" ><b><i><u><VALUE-OF>row["CUSTOMERNUMBER"]</VALUE-OF></u></i></b></a>
</center>
</body>
</html>

說明：插入了一個超鏈接，單擊觸發事件，javascript腳本的含義是修改id爲birtViewers3的報表地址，拼接上參數customernumber爲當前報表行row["CUSTOMERNUMBER"]，這樣就實現了動態刷新嵌入有customer.rptdesign的frame，讓報表只顯示單擊後的客戶號的客戶明細。

依次類推，我們修改orderdetails.rptdesign，修改產品號下面的數據項，刪除數據綁定，插入文本如下：

[html] view plain copy

<html>
<script language='JavaScript' type='text/JavaScript'>
function printproduct(paravalue){var origUrl = parent.frames['birtViewer4'].location.toString();var pos = origUrl.indexOf('&__overwrite=true');if (pos > 0) { parent.frames['birtViewer4'].location = origUrl.substr(0, pos) + '&__overwrite=true&productcode='+paravalue ;} else {parent.frames['birtViewer4'].location = origUrl+ '&__overwrite=true&productcode='+ paravalue;};}
</script>
<body>
<center>
<a href='' title='<VALUE-OF>row["PRODUCTCODE"]</VALUE-OF>' onclick="printproduct('<VALUE-OF>row["PRODUCTCODE"]</VALUE-OF>')" ><b><i><u><VALUE-OF>row["PRODUCTCODE"]</VALUE-OF></u></i></b></a>
</center>
</body>
</html>

說明：插入了一個超鏈接，單擊觸發事件，javascript腳本的含義是修改id爲birtViewers4的報表地址，拼接上參數productcode爲當前報表行row["PRODUCTCODE"]，這樣就實現了動態刷新嵌入有product.rptdesign的frame，讓報表只顯示單擊後的產品號的產品明細。

最後修改product.rptdesign，刪除產品流水線頁眉下的數據項，插入文本，內容如下：

[html] view plain copy

<html>
<script language='JavaScript' type='text/JavaScript'>
function printproduct(paravalue){var origUrl = parent.frames['birtViewer5'].location.toString();var pos = origUrl.indexOf('&__overwrite=true');if (pos > 0) { parent.frames['birtViewer5'].location = origUrl.substr(0, pos) + '&__overwrite=true&productline='+paravalue ;} else {parent.frames['birtViewer5'].location = origUrl+ '&__overwrite=true&productline='+ paravalue;};}
</script>
<body>
<center>
<a href='' title='<VALUE-OF>row["PRODUCTLINE"]</VALUE-OF>' onclick="printproduct('<VALUE-OF>row["PRODUCTLINE"]</VALUE-OF>')" ><b><i><u><VALUE-OF>row["PRODUCTLINE"]</VALUE-OF></u></i></b></a>
</center>
</body>
</html>

說明：插入了一個超鏈接，單擊觸發事件，javascript腳本的含義是修改id爲birtViewers5的報表地址，拼接上參數productline爲當前報表行row["PRODUCTLINE"]，這樣就實現了動態刷新嵌入有productline.rptdesign的frame，讓報表只顯示單擊後的產品流水線的明細。

就這樣，我們最終實現了一個四級聯動的異步刷新的報表。

初始頁面如下圖：

我們分別單擊訂單號：10114，客戶號：128，頁面如下：

再單擊產品號：S24_2840，頁面如下：

最後單擊產品流水號：Classic Cars，頁面如下：

整個過程沒有刷新過整個頁面，而是有條件的異步刷新。

5.3 文本運用導航欄數據

我們還能利用導航欄的jsp，在頁面上生成頁碼。

頁面效果：

組件腳本變量似乎於javascript不能用，要獲取組件設置的屬性還需要繞些彎彎，下面以製作表格分頁信息爲例說明。製作表格及樣式的部分在些就省略不提了，大家都懂的。

本文的分頁信息放到Master Page裏，以便在每一頁都可以看得到：

圖中標示的部分是一個Text組件，選擇HTML類型，輸入如下內容：

[javascript] view plain copy

<div id="pageInfo" />
<script type="text/javascript">
// 腳本先於pageNumber和totalPage執行，所以需要延時。
setTimeout(function(){
// pageNumber和totalPage是report-viewer/NavigationbarFragment.jsp裏的元素，分別顯示當前頁和總頁數。
var pageNumber = parseInt(document.getElementById("pageNumber").innerText);
var totalPage = parseInt(document.getElementById("totalPage").innerText);
// pageSize來自於位於table頭部的text（html類型）的腳本（非js腳本）。
// 通過table的onPrepare腳本獲取其設置的pageBreakInterval（分頁間隔，即分頁大小）值，然後通過table裏的text元素將其讀出並傳到js腳本里（保存爲js公共域的變量即可），需保證其在本text標籤前完成渲染。
var firstIndex = pageSize * (pageNumber - 1) + 1;
var lastIndex = pageSize * pageNumber;
lastIndexlastIndex = lastIndex > total ? total : lastIndex;
var str = "power by fbpang 共 " + total + " 條記錄，當前顯示 " + firstIndex + " ~ " + lastIndex + " 條記錄第 "
+ pageNumber + " 頁，共 " + totalPage + " 頁";
document.getElementById("pageInfo").innerText = str;
}, 100);
</script>

腳本里主要解決的就是獲取當前分面（pageNumber）、分頁總數（totalPage）和分頁大小（pageSize）。

獲取當前分面和分頁總數可查看NavigationbarFragment.jsp文件，在WebRoot/report-viewer/birt/pages/control目錄下(birt3.7.2，其他版本的自己找)，這個文件是報表驅動（report engine）裏的文件，用於控制分頁的導航頁，即下圖部分：

打開NavigationbarFragment.js文件，找到如下代碼：

[html] view plain copy

<TD WIDTH="100%" NOWRAP>
<B>
<%
if ( attributeBean.getBookmark( ) != null )
{
%>
<%=
BirtResources.getMessage( "birt.viewer.navbar.prompt.one" )
%>
<SPAN ID='pageNumber'></SPAN>
<%= BirtResources.getMessage( "birt.viewer.navbar.prompt.two" )%>
<SPAN ID='totalPage'></SPAN>
<%
}
else
{
%>
<%= BirtResources.getMessage( "birt.viewer.navbar.prompt.one" )%>
<SPAN ID='pageNumber'><%= ""+attributeBean.getReportPage( ) %></SPAN>
<%= BirtResources.getMessage( "birt.viewer.navbar.prompt.two" )%>
<SPAN ID='totalPage'></SPAN>
<%
}
%>
</B>
</TD>

這就是下圖所標示部分的代碼：

其中pageNumber是當前頁碼，totalPage是分頁總數，在js腳本里通過如下代碼獲取：

var pageNumber = parseInt(document.getElementById("pageNumber").innerText);

var totalPage = parseInt(document.getElementById("totalPage").innerText);

獲取分頁大小有些繞彎，在table的onPrepare腳本里獲取分頁間隔（pageBreakInterval，也就是分頁大小）的值：

reportContext.setGlobalVariable("pageBreakInterval",this.getUserProperty("pageBreakInterval"));

分頁間隔（pageBreakInterval）是在table的Page Break屬性裏設置的，如下圖：

再在table的列頭裏添加一個Text組件，組件不寫任何值，其任務就是做組件Script腳本和html頁面js腳本的信使：

在其onPrepare腳本里寫下如下代碼，其目的是通組件Script腳本將獲取的table屬性保存到js腳本變量以備使用，因爲table的onPrepare先於其裏面的組件的onPrepare執行，所以可以這樣獲取值：

[html] view plain copy

this.contentType = "html";
this.content = "<script type=\"text/javascript\">var pageSize = "
+ reportContext.getGlobalVariable("pageBreakInterval") + "</script>";

然後就可以在Master Page裏的Text使用了，使用setTimeout延遲100ms是因爲Master Page裏的Text會先於NavigationbarFragment.jsp裏的分頁導航渲染，爲保證讀取到當前分頁和分頁總數，必須延遲這段代碼的執行。

第五章 BIRT文本類報表

5.1 基本的文本報表

5.2 交互式文本報表

5.3 文本運用導航欄數據

測試人員都是畫畫大神，讓我看看誰還不會用代碼圖？

Object.values()對象遍歷

第十一章 BIRT數據綁定與腳本，事件機制詳解

第五章 BIRT文本類報表

第八章 BIRT交叉報表

第十五章高級特性-開放源碼：BIRT報表CVS構建

第六章 BIRT普通網格報表

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結