Teambiz中分頁(yè)之前臺(tái)處理
作者：何楊
撰寫日期：2012年2月25日
版本：1.02
更新日期： 2012年2月27日
第一部分：功能說(shuō)明
將后臺(tái)處理好的XML形式的分頁(yè)數(shù)據(jù)，展現(xiàn)在前臺(tái)頁(yè)面上。
第二部分：核心組件
| 名稱 | 路徑 | 說(shuō)明 |
| Ajax.Request,ajaxObj,ajaxObj.responseText,ajaxObj.responseXML,status,arr,tableDatas | 無(wú) | 已經(jīng)在《03.Teambiz中前臺(tái)頁(yè)面對(duì)XHR對(duì)象從后臺(tái)取回的XML的處理.docx》一文中進(jìn)行說(shuō)明。 |
| addDatasToTable | teambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中同名函數(shù) | 此函數(shù)用于將tableDatas中的數(shù)據(jù)(當(dāng)前頁(yè)的數(shù)據(jù))展現(xiàn)在頁(yè)面的表格中。 |
| currentPage | 無(wú) | 此變量是ajaxObj.responseXML中第一個(gè)currentPage元素的值，表示當(dāng)前頁(yè)的頁(yè)碼。 |
| recordCount | 無(wú) | 此變量是ajaxObj.responseXML中第一個(gè)recordCount元素的值，表示當(dāng)前頁(yè)的容納的記錄數(shù)。 |
| pageCount | 無(wú) | 此變量是ajaxObj.responseXML中第一個(gè)pageCount元素的值，表示總頁(yè)數(shù)。 |
| setPage | teambiz\WebRoot\page\js\changePage.js中同名函數(shù) | 利用currentPage，recordCount，pageCount前三個(gè)變量，通過(guò)運(yùn)算，在表格的caption部分顯示總記錄數(shù)，總頁(yè)數(shù)，當(dāng)前第幾頁(yè)，首頁(yè)，上頁(yè)，下頁(yè)，末頁(yè)等數(shù)據(jù)或鏈接；在表格的footer部分顯示分頁(yè)頁(yè)碼及跳轉(zhuǎn)按鈕。 第四個(gè)變量是查詢函數(shù)的名稱，當(dāng)生成翻頁(yè)鏈接的時(shí)候需要用到它。另外，如果頁(yè)面上有兩個(gè)翻頁(yè)表格，那么第四個(gè)變量能使翻頁(yè)鏈接不會(huì)混淆。 |
第三部分：關(guān)鍵代碼說(shuō)明
1. 從后臺(tái)傳來(lái)的XML：
<response>
<status>ok</status>
<currentPage>0</currentPage>
<recordCount>3</recordCount>
<pageCount>1</pageCount>
<node>
<id>92</id>
<fromusername>何楊</fromusername>
<name>汪大海</name>
<email>wy@138.com</email>
<groupname>開(kāi)發(fā)組</groupname>
<companyname>IBM</companyname>
<status>已同意</status>
</node>
<node>
<id>90</id>
<fromusername>何楊</fromusername>
<name>朱由檢</name>
<email>zjy1@163.com</email>
<groupname>管理組</groupname>
<companyname>聯(lián)通集成公司</companyname>
<status>請(qǐng)求中</status>
</node>
<node>
<id>91</id>
<fromusername>何楊</fromusername>
<name>張翼德</name>
<email>212@18.com</email>
<groupname>管理組</groupname>
<companyname>聯(lián)通集成公司</companyname>
<status>請(qǐng)求中</status>
</node>
</response>
這部分?jǐn)?shù)據(jù)和我們?cè)凇?/span>02.Teambiz中從Sql到XML的過(guò)程.docx》一文中看到的XML很相似，只是多了currentPage，recordCount，pageCount三個(gè)節(jié)點(diǎn)，前文說(shuō)過(guò)，這是在BaseService的pagedSearch或pagedSearch4DB2中產(chǎn)生的，目的是幫助顯示分頁(yè)相關(guān)的信息，他們的值將被頁(yè)面的JS函數(shù)setPage使用。其它的node數(shù)據(jù)將顯示在表格中（使用tableDatas作為載體）。
2. JavaScript函數(shù)setPage
/*****************************************************
* 設(shè)置分頁(yè)數(shù)據(jù)
* 何楊 2011年4月13日20:07:21
*****************************************************/
function setPage(recordCount,currentPage,pageCount,queryFunctionName){
recordCount=eval(recordCount);
currentPage=eval(currentPage);
pageCount=eval(pageCount);
$("recordCount").innerHTML=recordCount;
$("currentPage").innerHTML=1+currentPage;
$("pageCount").innerHTML=pageCount;
var pageIndex=0;
var firstPage;
if(currentPage!=0){
firstPage=" <a href='javascript:"+queryFunctionName+"(0)'>首頁(yè)</a>";
}
else{
firstPage=" 首頁(yè)";
}
pageIndex=currentPage-1;
var prevPage;
if(pageIndex>=0){
prevPage=" <a href='javascript:"+queryFunctionName+"("+pageIndex+")'>上頁(yè)</a>";
}
else{
prevPage=" 上頁(yè)";
}
// 分頁(yè)頁(yè)碼
var min=currentPage-5;
if(min<0){
min=0;
}
var max=min+10;
if(max>pageCount){
max=pageCount;
}
var continuePage="";
for(var i=min;i<max;i++){
if(i!=currentPage){
continuePage+=" <a href='javascript:"+queryFunctionName+"("+i+")'>"+(i+1)+"</a>";
}
else{
continuePage+=" "+(i+1)+"";
}
}
pageIndex=currentPage+1;
var nextPage;
if(pageIndex<=pageCount-1){
nextPage=" <a href='javascript:"+queryFunctionName+"("+pageIndex+")'>下頁(yè)</a>";
}
else{
nextPage=" 下頁(yè)";
}
pageIndex=currentPage;
var lastPage;
if(pageIndex<pageCount-1){
lastPage=" <a href='javascript:"+queryFunctionName+"("+(pageCount-1)+")'>尾頁(yè)</a>";
}
else{
lastPage=" 尾頁(yè)";
}
$("pageData").innerHTML=firstPage+prevPage+nextPage+lastPage;
$("footPageData").innerHTML=continuePage;
$("pageIndexTxt").value=currentPage+1;
}
以上代碼路徑：teambiz\WebRoot\page\js\changePage.js
3. JavaScript函數(shù)的addDatasToTable。
/**********************************************
* 將數(shù)據(jù)添加到表格
* 何楊，2012年1月8日18:35:06
**********************************************/
function addDatasToTable(tableDatas,userTable){
for(var i=0;i<tableDatas.length;i++){
var arr=tableDatas[i];
// 創(chuàng)建行
var row=document.createElement("tr");
// 加入復(fù)選框
var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("id",arr[0]);
var td=document.createElement("td");
td.appendChild(checkBox);
row.appendChild(td);
row.appendChild(createTextTd(arr[1]));
row.appendChild(createTextTd(arr[2]));
row.appendChild(createTextTd(arr[3]));
row.appendChild(createTextTd(arr[4]));
row.appendChild(createTextTd(arr[5]));
row.appendChild(createTextTd(arr[6]));
userTable.appendRow(row);
}
}
以上代碼位置：teambiz\WebRoot\page\jsp\relation\sent\javascript.jsp
根據(jù)實(shí)際情況的不同，我們可能會(huì)往行row中添加文本，鏈接，圖片，圖片鏈接等對(duì)象，TeamBiz為此類事務(wù)設(shè)計(jì)了一批函數(shù)以簡(jiǎn)化代碼編寫，這將在后面的文章詳述。
4.頁(yè)面表格
<table class="stocktable" width="100%" cellspacing="0">
<caption>
<select id="pageSizeCbo”>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="1000">1000</option>
</select>
總記錄數(shù)<span id="recordCount">0</span> 總頁(yè)數(shù)<span id="pageCount">0</span> 當(dāng)前第<span id="currentPage">0</span>頁(yè) <span id="pageData">0</span></caption>
<thead>
<tr>
<th width="28"><input type="checkbox" id="selectAllChk" onclick="selectAllCheckBox()"/></th>
<th width="17%">發(fā)送用戶</th>
<th width="16%">接收用戶</th>
<th width="16%">接收用戶郵件</th>
<th width="16%">接收所屬組名</th>
<th width="16%">接收所屬公司</th>
<th width="16%">聯(lián)系狀態(tài)</th>
</tr>
</thead>
<tbody id="userTable">
<tr class="odd">
<td colspan="40"><img src='page/jsp/relation/create/img/waiting.gif'/> 查詢中，請(qǐng)稍候...</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="40" align="right" width="100%">
<div class="submitDiv">
<label for="gotoPageBtn"> </label>
<input type='button' name='gotoPageBtn' onchange='gotoPage()' value='轉(zhuǎn)到' />第<input type='text' id='pageIndexTxt' onchange='gotoPage()' size='1' />頁(yè) 頁(yè)碼:<span id="footPageData"></span>
</div>
</td>
</tr>
</tfoot>
</table>
以上代碼很好理解，setPage函數(shù)將改變caption及tfooter中的內(nèi)容，而addDatasToTable函數(shù)將改寫tbody中的內(nèi)容。
第四部分：使用步驟
| 步驟 | 說(shuō)明 | 參照 |
| 將表格代碼復(fù)制到前臺(tái)頁(yè)面中 | 你可以改變節(jié)點(diǎn)的位置，如將caption中的翻頁(yè)鏈接轉(zhuǎn)移到下方tfooter中，但不要修改節(jié)點(diǎn)id。 表格的id可以任意修改。 | teambiz\WebRoot\page\jsp\relation\sent\content.jsp |
| 編寫向后臺(tái)請(qǐng)求的函數(shù) | 需要記住表格id與table對(duì)象的對(duì)應(yīng)關(guān)系。 | eambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中的search函數(shù)。 |
| 編寫填充表格數(shù)據(jù)的函數(shù) | | eambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中的addDatasToTable函數(shù)。 |
第五部分：小結(jié)
至此，我們看到了通過(guò)Ajax方式異步從后臺(tái)取出數(shù)據(jù)并在頁(yè)面上展現(xiàn)的過(guò)程，在后臺(tái)和前臺(tái)一系列類的幫助下，我們可以斷言這一過(guò)程并不復(fù)雜，主要的思考性工作在于后臺(tái)的SQL語(yǔ)句的編寫以及前臺(tái)使用DOM展現(xiàn)數(shù)據(jù)，中間的數(shù)據(jù)轉(zhuǎn)化，通道的完成和數(shù)據(jù)的傳遞基本可以看成是事務(wù)性工作，僅需不多的時(shí)間即可完成，而且不需要高超的程序技巧。
在前臺(tái)，也有一系列類在減輕程序員的負(fù)擔(dān)，在后繼文章中我將為大家一一展示。