08.Teambiz中分页之前台处理

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

<response>

            <status>ok</status>

            <currentPage>0</currentPage>

            <recordCount>3</recordCount>

            <pageCount>1</pageCount>

            <node>

                        <id>92</id>

                        <fromusername>何杨</fromusername>

                        <name>汪大海</name>

                        <email>[email protected]</email>

                        <groupname>开发组</groupname>

                        <companyname>IBM</companyname>

                        <status>已同意</status>

            </node>

            <node>

                        <id>90</id>

                        <fromusername>何杨</fromusername>

                        <name>朱由检</name>

                        <email>[email protected]</email>

                        <groupname>管理组</groupname>

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

                        <status>请求中</status>

            </node>

            <node>

                        <id>91</id>

                        <fromusername>何杨</fromusername>

                        <name>张翼德</name>

                        <email>[email protected]</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="&nbsp;&nbsp;<a href='javascript:"+queryFunctionName+"(0)'>首页</a>";

            }

            else{

                        firstPage="&nbsp;&nbsp;首页";

            }

           

            pageIndex=currentPage-1;

            var prevPage;

            if(pageIndex>=0){

                     prevPage="&nbsp;&nbsp;<a href='javascript:"+queryFunctionName+"("+pageIndex+")'>上页</a>";

            }

            else{

                        prevPage="&nbsp;&nbsp;上页";

            }

           

            // 分页页码

            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="&nbsp;&nbsp;<a href='javascript:"+queryFunctionName+"("+pageIndex+")'>下页</a>";

            }

            else{

                        nextPage="&nbsp;&nbsp;下页";

            }

           

            pageIndex=currentPage;

            var lastPage;

            if(pageIndex<pageCount-1){

                        lastPage="&nbsp;&nbsp;<a href='javascript:"+queryFunctionName+"("+(pageCount-1)+")'>尾页</a>";

            }

            else{

                        lastPage="&nbsp;&nbsp;尾页";

            }

           

            $("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">&nbsp;</label>

                                                            <input type='button' name='gotoPageBtn' onchange='gotoPage()' value='转到' />第<input type='text' id='pageIndexTxt' onchange='gotoPage()' size='1' />页&nbsp;页码:<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展现数据,中间的数据转化,通道的完成和数据的传递基本可以看成是事务性工作,仅需不多的时间即可完成,而且不需要高超的程序技巧。

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

 

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