Teambiz中分页之前台处理
作者：何杨
撰写日期：2012年2月25日
版本：1.02
更新日期： 2012年2月27日
第一部分：功能说明
将后台处理好的XML形式的分页数据，展现在前台页面上。
第二部分：核心组件
| 名称 | 路径 | 说明 |
| Ajax.Request,ajaxObj,ajaxObj.responseText,ajaxObj.responseXML,status,arr,tableDatas | 无 | 已经在《03.Teambiz中前台页面对XHR对象从后台取回的XML的处理.docx》一文中进行说明。 |
| addDatasToTable | teambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中同名函数 | 此函数用于将tableDatas中的数据(当前页的数据)展现在页面的表格中。 |
| currentPage | 无 | 此变量是ajaxObj.responseXML中第一个currentPage元素的值，表示当前页的页码。 |
| recordCount | 无 | 此变量是ajaxObj.responseXML中第一个recordCount元素的值，表示当前页的容纳的记录数。 |
| pageCount | 无 | 此变量是ajaxObj.responseXML中第一个pageCount元素的值，表示总页数。 |
| setPage | teambiz\WebRoot\page\js\changePage.js中同名函数 | 利用currentPage，recordCount，pageCount前三个变量，通过运算，在表格的caption部分显示总记录数，总页数，当前第几页，首页，上页，下页，末页等数据或链接；在表格的footer部分显示分页页码及跳转按钮。 第四个变量是查询函数的名称，当生成翻页链接的时候需要用到它。另外，如果页面上有两个翻页表格，那么第四个变量能使翻页链接不会混淆。 |
第三部分：关键代码说明
1. 从后台传来的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>开发组</groupname>
<companyname>IBM</companyname>
<status>已同意</status>
</node>
<node>
<id>90</id>
<fromusername>何杨</fromusername>
<name>朱由检</name>
<email>zjy1@163.com</email>
<groupname>管理组</groupname>
<companyname>联通集成公司</companyname>
<status>请求中</status>
</node>
<node>
<id>91</id>
<fromusername>何杨</fromusername>
<name>张翼德</name>
<email>212@18.com</email>
<groupname>管理组</groupname>
<companyname>联通集成公司</companyname>
<status>请求中</status>
</node>
</response>
这部分数据和我们在《02.Teambiz中从Sql到XML的过程.docx》一文中看到的XML很相似，只是多了currentPage，recordCount，pageCount三个节点，前文说过，这是在BaseService的pagedSearch或pagedSearch4DB2中产生的，目的是帮助显示分页相关的信息，他们的值将被页面的JS函数setPage使用。其它的node数据将显示在表格中（使用tableDatas作为载体）。
2. JavaScript函数setPage
/*****************************************************
* 设置分页数据
* 何杨 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)'>首页</a>";
}
else{
firstPage=" 首页";
}
pageIndex=currentPage-1;
var prevPage;
if(pageIndex>=0){
prevPage=" <a href='javascript:"+queryFunctionName+"("+pageIndex+")'>上页</a>";
}
else{
prevPage=" 上页";
}
// 分页页码
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+")'>下页</a>";
}
else{
nextPage=" 下页";
}
pageIndex=currentPage;
var lastPage;
if(pageIndex<pageCount-1){
lastPage=" <a href='javascript:"+queryFunctionName+"("+(pageCount-1)+")'>尾页</a>";
}
else{
lastPage=" 尾页";
}
$("pageData").innerHTML=firstPage+prevPage+nextPage+lastPage;
$("footPageData").innerHTML=continuePage;
$("pageIndexTxt").value=currentPage+1;
}
以上代码路径：teambiz\WebRoot\page\js\changePage.js
3. JavaScript函数的addDatasToTable。
/**********************************************
* 将数据添加到表格
* 何杨，2012年1月8日18:35:06
**********************************************/
function addDatasToTable(tableDatas,userTable){
for(var i=0;i<tableDatas.length;i++){
var arr=tableDatas[i];
// 创建行
var row=document.createElement("tr");
// 加入复选框
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
根据实际情况的不同，我们可能会往行row中添加文本，链接，图片，图片链接等对象，TeamBiz为此类事务设计了一批函数以简化代码编写，这将在后面的文章详述。
4.页面表格
<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>
总记录数<span id="recordCount">0</span> 总页数<span id="pageCount">0</span> 当前第<span id="currentPage">0</span>页 <span id="pageData">0</span></caption>
<thead>
<tr>
<th width="28"><input type="checkbox" id="selectAllChk" onclick="selectAllCheckBox()"/></th>
<th width="17%">发送用户</th>
<th width="16%">接收用户</th>
<th width="16%">接收用户邮件</th>
<th width="16%">接收所属组名</th>
<th width="16%">接收所属公司</th>
<th width="16%">联系状态</th>
</tr>
</thead>
<tbody id="userTable">
<tr class="odd">
<td colspan="40"><img src='page/jsp/relation/create/img/waiting.gif'/> 查询中，请稍候...</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='转到' />第<input type='text' id='pageIndexTxt' onchange='gotoPage()' size='1' />页 页码:<span id="footPageData"></span>
</div>
</td>
</tr>
</tfoot>
</table>
以上代码很好理解，setPage函数将改变caption及tfooter中的内容，而addDatasToTable函数将改写tbody中的内容。
第四部分：使用步骤
| 步骤 | 说明 | 参照 |
| 将表格代码复制到前台页面中 | 你可以改变节点的位置，如将caption中的翻页链接转移到下方tfooter中，但不要修改节点id。 表格的id可以任意修改。 | teambiz\WebRoot\page\jsp\relation\sent\content.jsp |
| 编写向后台请求的函数 | 需要记住表格id与table对象的对应关系。 | eambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中的search函数。 |
| 编写填充表格数据的函数 | | eambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中的addDatasToTable函数。 |
第五部分：小结
至此，我们看到了通过Ajax方式异步从后台取出数据并在页面上展现的过程，在后台和前台一系列类的帮助下，我们可以断言这一过程并不复杂，主要的思考性工作在于后台的SQL语句的编写以及前台使用DOM展现数据，中间的数据转化，通道的完成和数据的传递基本可以看成是事务性工作，仅需不多的时间即可完成，而且不需要高超的程序技巧。
在前台，也有一系列类在减轻程序员的负担，在后继文章中我将为大家一一展示。