當(dāng)柳上原的風(fēng)吹向天際的時候...

          真正的快樂來源于創(chuàng)造

            BlogJava :: 首頁 :: 聯(lián)系 :: 聚合  :: 管理
            368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks

          公告


          常用鏈接

          留言簿(3)

          最新隨筆

          積分與排名

          • 積分 - 394685
          • 排名 - 145

          最新評論

          閱讀排行榜

           

           

           

           

           

           

          Teambiz中MyTable類

           

           

           

           

           

           

           

          作者:何楊

          撰寫日期:2012年2月26日

          版本:1.00

          更新日期:  

           

           

          第一部分:功能說明

          幫助程序員更輕松的操作前臺的表格。

          第二部分:核心組件

          名稱

          路徑

          說明

          MyTable

          teambiz\WebRoot\page\js\myTable.js

          一個JavaScript類,用于操作表格。實際上,它代表的是table的tbody部分,而不包括caption,thead,tfoot。

          MyTable

          同上文件的同名函數(shù)

          這是MyTable類的構(gòu)造函數(shù),傳入tbody的id,得到表格的tbody部分。

          clear

          同上文件的同名函數(shù)

          一次性刪除tbody的所有行。

          在查詢開始前基本都有這一步以清除以往的數(shù)據(jù)。

          removeFirstRow

          同上文件的同名函數(shù)

          刪除tbody的第一行。

          這個函數(shù)在實際中使用很少。

          getRowCount

          同上文件的同名函數(shù)

          得到tbody中所有行的個數(shù)。

          當(dāng)需要計算當(dāng)前顯示多少行時可以用到。

          appendRow

          同上文件的同名函數(shù)

          tbody底部添加一行,并且給奇偶行賦予不同的樣式。

          逐行往表格中添加數(shù)據(jù)時常用到它。

          removeRow

          同上文件的同名函數(shù)

          刪除tr的id為傳入?yún)?shù)的行。

          當(dāng)刪除對象成功時需要調(diào)用這一函數(shù)。

          refreshRowColor

          同上文件的同名函數(shù)

          給奇偶行賦予不同的樣式。

          一般在appendRow和removeRow中被調(diào)用,外界也可主動調(diào)用。

           

          第三部分:實際運用代碼說明

          以下代碼請參見teambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中search函數(shù)。

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

          var userTable=new MyTable("userTable");

          userTable.clear();

          以上代碼就是新建一個MyTable對象并清除原有行的過程,MyTable構(gòu)造函數(shù)接受一個tbody的id,請與頁面中tbody的實際ID相對應(yīng)。

           

          2. 向表格添加行

          userTable.appendRow(createStartSearchRowBy("page/img/waiting.gif","開始查詢已經(jīng)發(fā)送的聯(lián)系..."));

          userTable.appendRow(createNgRowBy("沒有查詢到已經(jīng)發(fā)送的聯(lián)系."));

          以上代碼就是向tody中添加一個tr的過程,至于createStartSearchRowBy,createNgRowBy兩個函數(shù)我們將在后文詳述。

           

          以上代碼路徑:teambiz\WebRoot\page\js\changePage.js

           

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

          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以及一個個td,并往td中添加對象的過程。根據(jù)實際情況的不同,我們可能會往行row中添加文本,鏈接,圖片,圖片鏈接等對象,TeamBiz為此類事務(wù)設(shè)計了一批函數(shù)以簡化代碼編寫,這將在后面的文章詳述。

           

          以上代碼位置:teambiz\WebRoot\page\jsp\relation\sent\javascript.jsp中addDatasToTable函數(shù)。

           

          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>

                      總記錄數(shù)<span id="recordCount">0</span> 總頁數(shù)<span id="pageCount">0</span> 當(dāng)前第<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%">發(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'/> 查詢中,請稍候...</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='轉(zhuǎn)到' />第<input type='text' id='pageIndexTxt' onchange='gotoPage()' size='1' />頁&nbsp;頁碼:<span id="footPageData"></span>

                                                          </div>

                                              </td>

                                  </tr>

                      </tfoot>

          </table>

          以上代碼中,紅色粗體部分的“userTable”就是需要往MyTable構(gòu)造函數(shù)中傳入的參數(shù),而黑色粗體部分就是MyTable類諸函數(shù)實際操作的區(qū)域。

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

           

          第四部分:使用步驟

          步驟

          說明

          參照

          載入MyTable類

          teambiz中,這一載入一般放在style.css中。

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

          創(chuàng)建MyTable對象

          由于作用域的不同,這一過程可能會使用多次,但應(yīng)該避免使用全局的myTable對象。

          var table=new MyTable(“tableID”);

          操作MyTable對象

          使用teambiz\WebRoot\page\js\myTable.js中定義的多個函數(shù)操作表格對象,如果這些函數(shù)不能滿足您的需求,可以參照原有行數(shù)的模式來創(chuàng)建新的函數(shù)。

           

           

           

           

          第五部分:小結(jié)

          表格是前臺程序操作的主要對象之一,將表格的常用操作加以歸納綜合,就形成了MyTable類,它能減少重復(fù)代碼,減少出錯的可能行,減輕勞動和增加代碼的一致性,如果我們在編寫程序時多加歸納總結(jié),還會誕生出更多相似的類出來。

           

          posted on 2012-02-29 10:37 何楊 閱讀(345) 評論(0)  編輯  收藏 所屬分類: Teambiz
          主站蜘蛛池模板: 酉阳| 金乡县| 津南区| 临漳县| 吉林市| 资源县| 左贡县| 方山县| 东阳市| 宜丰县| 治县。| 汝南县| 乌什县| 图片| 呼玛县| 休宁县| 舒兰市| 敦化市| 饶阳县| 韩城市| 来宾市| 调兵山市| 石台县| 三河市| 神农架林区| 玉树县| 方城县| 房山区| 海盐县| 水富县| 乡宁县| 嘉祥县| 阿克陶县| 乐平市| 五华县| 岗巴县| 中宁县| 肃南| 满洲里市| 塔河县| 灵石县|