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類，它能減少重復代碼，減少出錯的可能行，減輕勞動和增加代碼的一致性，如果我們在編寫程序時多加歸納總結，還會誕生出更多相似的類出來。