当柳上原的风吹向天际的时候...

真正的快乐来源于创造

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks

 

 

 

 

 

 

Teambiz中MyTable类

 

 

 

 

 

 

 

作者:何杨

撰写日期:2012年2月26日

版本:1.00

更新日期:  

 

 

第一部分:功能说明

帮助程序员更轻松的操作前台的表格。

第二部分:核心组件

名称

路径

说明

MyTable

teambiz\WebRoot\page\js\myTable.js

一个JavaScript类,用于操作表格。实际上,它代表的是table的tbody部分,而不包括caption,thead,tfoot。

MyTable

同上文件的同名函数

这是MyTable类的构造函数,传入tbody的id,得到表格的tbody部分。

clear

同上文件的同名函数

一次性删除tbody的所有行。

在查询开始前基本都有这一步以清除以往的数据。

removeFirstRow

同上文件的同名函数

删除tbody的第一行。

这个函数在实际中使用很少。

getRowCount

同上文件的同名函数

得到tbody中所有行的个数。

当需要计算当前显示多少行时可以用到。

appendRow

同上文件的同名函数

tbody底部添加一行,并且给奇偶行赋予不同的样式。

逐行往表格中添加数据时常用到它。

removeRow

同上文件的同名函数

删除tr的id为传入参数的行。

当删除对象成功时需要调用这一函数。

refreshRowColor

同上文件的同名函数

给奇偶行赋予不同的样式。

一般在appendRow和removeRow中被调用,外界也可主动调用。

 

第三部分:实际运用代码说明

以下代码请参见teambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中search函数。

1. 得到表格并清除原有行

var userTable=new MyTable("userTable");

userTable.clear();

以上代码就是新建一个MyTable对象并清除原有行的过程,MyTable构造函数接受一个tbody的id,请与页面中tbody的实际ID相对应。

 

2. 向表格添加行

userTable.appendRow(createStartSearchRowBy("page/img/waiting.gif","开始查询已经发送的联系..."));

userTable.appendRow(createNgRowBy("没有查询到已经发送的联系."));

以上代码就是向tody中添加一个tr的过程,至于createStartSearchRowBy,createNgRowBy两个函数我们将在后文详述。

 

以上代码路径:teambiz\WebRoot\page\js\changePage.js

 

3. 向表格中添加一个完整的行。

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);

以上代码完整显示使用DOM创建tr以及一个个td,并往td中添加对象的过程。根据实际情况的不同,我们可能会往行row中添加文本,链接,图片,图片链接等对象,TeamBiz为此类事务设计了一批函数以简化代码编写,这将在后面的文章详述。

 

以上代码位置:teambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中addDatasToTable函数。

 

4.页面表格

<table class="stocktable" width="100%" cellspacing="0">

            <caption>

                        <select id="pageSizeCbo" onchange='fetchDatas(0)'>

                                    <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>

以上代码中,红色粗体部分的“userTable”就是需要往MyTable构造函数中传入的参数,而黑色粗体部分就是MyTable类诸函数实际操作的区域。

以上代码位置: teambiz\WebRoot\page\jsp\relation\sent\content.jsp

 

第四部分:使用步骤

步骤

说明

参照

载入MyTable类

teambiz中,这一载入一般放在style.css中。

<script src="page/js/myTable.js" type="text/javascript"></script>

创建MyTable对象

由于作用域的不同,这一过程可能会使用多次,但应该避免使用全局的myTable对象。

var table=new MyTable(“tableID”);

操作MyTable对象

使用teambiz\WebRoot\page\js\myTable.js中定义的多个函数操作表格对象,如果这些函数不能满足您的需求,可以参照原有行数的模式来创建新的函数。

 

 

 

 

第五部分:小结

表格是前台程序操作的主要对象之一,将表格的常用操作加以归纳综合,就形成了MyTable类,它能减少重复代码,减少出错的可能行,减轻劳动和增加代码的一致性,如果我们在编写程序时多加归纳总结,还会诞生出更多相似的类出来。

 

posted on 2012-02-29 10:37 何杨 阅读(332) 评论(0)  编辑  收藏 所属分类: Teambiz

只有注册用户登录后才能发表评论。


网站导航: