Teambiz中MyTable類
作者：何楊
撰寫日期：2012年2月26日
版本：1.00
更新日期：
第一部分：功能說(shuō)明
幫助程序員更輕松的操作前臺(tái)的表格。
第二部分：核心組件
| 名稱 | 路徑 | 說(shuō)明 |
| MyTable | teambiz\WebRoot\page\js\myTable.js | 一個(gè)JavaScript類，用于操作表格。實(shí)際上，它代表的是table的tbody部分，而不包括caption，thead，tfoot。 |
| MyTable | 同上文件的同名函數(shù) | 這是MyTable類的構(gòu)造函數(shù)，傳入tbody的id，得到表格的tbody部分。 |
| clear | 同上文件的同名函數(shù) | 一次性刪除tbody的所有行。 在查詢開(kāi)始前基本都有這一步以清除以往的數(shù)據(jù)。 |
| removeFirstRow | 同上文件的同名函數(shù) | 刪除tbody的第一行。 這個(gè)函數(shù)在實(shí)際中使用很少。 |
| getRowCount | 同上文件的同名函數(shù) | 得到tbody中所有行的個(gè)數(shù)。 當(dāng)需要計(jì)算當(dāng)前顯示多少行時(shí)可以用到。 |
| appendRow | 同上文件的同名函數(shù) | 在tbody底部添加一行，并且給奇偶行賦予不同的樣式。 逐行往表格中添加數(shù)據(jù)時(shí)常用到它。 |
| removeRow | 同上文件的同名函數(shù) | 刪除tr的id為傳入?yún)?shù)的行。 當(dāng)刪除對(duì)象成功時(shí)需要調(diào)用這一函數(shù)。 |
| refreshRowColor | 同上文件的同名函數(shù) | 給奇偶行賦予不同的樣式。 一般在appendRow和removeRow中被調(diào)用，外界也可主動(dòng)調(diào)用。 |
第三部分：實(shí)際運(yùn)用代碼說(shuō)明
以下代碼請(qǐng)參見(jiàn)teambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中search函數(shù)。
1. 得到表格并清除原有行：
var userTable=new MyTable("userTable");
userTable.clear();
以上代碼就是新建一個(gè)MyTable對(duì)象并清除原有行的過(guò)程，MyTable構(gòu)造函數(shù)接受一個(gè)tbody的id，請(qǐng)與頁(yè)面中tbody的實(shí)際ID相對(duì)應(yīng)。
2. 向表格添加行
userTable.appendRow(createStartSearchRowBy("page/img/waiting.gif","開(kāi)始查詢已經(jīng)發(fā)送的聯(lián)系..."));
userTable.appendRow(createNgRowBy("沒(méi)有查詢到已經(jīng)發(fā)送的聯(lián)系."));
以上代碼就是向tody中添加一個(gè)tr的過(guò)程，至于createStartSearchRowBy，createNgRowBy兩個(gè)函數(shù)我們將在后文詳述。
以上代碼路徑：teambiz\WebRoot\page\js\changePage.js
3. 向表格中添加一個(gè)完整的行。
var arr=tableDatas[i];
// 創(chuàng)建行
var row=document.createElement("tr");
// 加入復(fù)選框
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創(chuàng)建tr以及一個(gè)個(gè)td，并往td中添加對(duì)象的過(guò)程。根據(jù)實(shí)際情況的不同，我們可能會(huì)往行row中添加文本，鏈接，圖片，圖片鏈接等對(duì)象，TeamBiz為此類事務(wù)設(shè)計(jì)了一批函數(shù)以簡(jiǎn)化代碼編寫，這將在后面的文章詳述。
以上代碼位置：teambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中addDatasToTable函數(shù)。
4.頁(yè)面表格
<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>
總記錄數(shù)<span id="recordCount">0</span> 總頁(yè)數(shù)<span id="pageCount">0</span> 當(dāng)前第<span id="currentPage">0</span>頁(yè) <span id="pageData">0</span></caption>
<thead>
<tr>
<th width="28"><input type="checkbox" id="selectAllChk" onclick="selectAllCheckBox()"/></th>
<th width="17%">發(fā)送用戶</th>
<th width="16%">接收用戶</th>
<th width="16%">接收用戶郵件</th>
<th width="16%">接收所屬組名</th>
<th width="16%">接收所屬公司</th>
<th width="16%">聯(lián)系狀態(tài)</th>
</tr>
</thead>
<tbody id="userTable">
<tr class="odd">
<td colspan="40"><img src='page/jsp/relation/create/img/waiting.gif'/> 查詢中，請(qǐng)稍候...</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='轉(zhuǎn)到' />第<input type='text' id='pageIndexTxt' onchange='gotoPage()' size='1' />頁(yè) 頁(yè)碼:<span id="footPageData"></span>
</div>
</td>
</tr>
</tfoot>
</table>
以上代碼中，紅色粗體部分的“userTable”就是需要往MyTable構(gòu)造函數(shù)中傳入的參數(shù)，而黑色粗體部分就是MyTable類諸函數(shù)實(shí)際操作的區(qū)域。
以上代碼位置： teambiz\WebRoot\page\jsp\relation\sent\content.jsp
第四部分：使用步驟
| 步驟 | 說(shuō)明 | 參照 |
| 載入MyTable類 | 在teambiz中，這一載入一般放在style.css中。 | <script src="page/js/myTable.js" type="text/javascript"></script> |
| 創(chuàng)建MyTable對(duì)象 | 由于作用域的不同，這一過(guò)程可能會(huì)使用多次，但應(yīng)該避免使用全局的myTable對(duì)象。 | var table=new MyTable(“tableID”); |
| 操作MyTable對(duì)象 | 使用teambiz\WebRoot\page\js\myTable.js中定義的多個(gè)函數(shù)操作表格對(duì)象，如果這些函數(shù)不能滿足您的需求，可以參照原有行數(shù)的模式來(lái)創(chuàng)建新的函數(shù)。 | |
第五部分：小結(jié)
表格是前臺(tái)程序操作的主要對(duì)象之一，將表格的常用操作加以歸納綜合，就形成了MyTable類，它能減少重復(fù)代碼，減少出錯(cuò)的可能行，減輕勞動(dòng)和增加代碼的一致性，如果我們?cè)诰帉懗绦驎r(shí)多加歸納總結(jié)，還會(huì)誕生出更多相似的類出來(lái)。