08.Teambiz中分页之前台处理

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：

<node>

<email>[email protected]</email>

</node>

<node>

<email>[email protected]</email>

<companyname>联通集成公司</companyname>

</node>

<node>

<email>[email protected]</email>

<companyname>联通集成公司</companyname>

</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.页面表格

</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="16%">接收用户邮件</th>

<th width="16%">接收所属组名</th>

<th width="16%">接收所属公司</th>

</tr>

</thead>

</tr>

</tbody>

<tfoot>

<tr>

</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展现数据，中间的数据转化，通道的完成和数据的传递基本可以看成是事务性工作，仅需不多的时间即可完成，而且不需要高超的程序技巧。

在前台，也有一系列类在减轻程序员的负担，在后继文章中我将为大家一一展示。

08.Teambiz中分页之前台处理

你可能感兴趣的:(08.Teambiz中分页之前台处理)