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"> </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>
以上代码中，红色粗体部分的“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类，它能减少重复代码，减少出错的可能行，减轻劳动和增加代码的一致性，如果我们在编写程序时多加归纳总结，还会诞生出更多相似的类出来。