自定義計算Datatable表格數據的通用模塊設計與實現

李琦，陳柳洲，劉磊，韓睿

（中電科蓉威電子技術有限公司，四川 成都 610031)

0 引言

在互聯網技術不斷進步和企業信息化建設水平發展的背景下，基于B/S 架構下的Web 項目開發已成為主流技術[1]。在實際開發過程中，數據呈現是大多數系統必備的功能，Datatable 表格工具便是一款當前使用較為廣泛的解決方案，具備按行列顯示表格數據、分頁、篩選和排序等功能[2]?，F有的Datatable表格插件中，如果表格內容顯示為數字，當需要按照表頭計算該列每行數據時，無法自定義選擇某列、某幾列或全選列，以實現對所選列項的每行數據進行相應計算，并顯示在對應位置?，F有的技術方案無法根據需求變化，靈活選擇Datatable表格列項，實際操作性、便捷性不強，影響用戶體驗。針對目前背景技術中提出的問題，本文提供了一種自定義計算Datatable表格數據的方法，通過修改、完善原Datatable 的JavaScript 代碼，以調用函數的方式，應用于HTML顯示界面，使用戶可以在操作界面根據實際使用需求解決上述問題。

1 流程設計

依據基于jQuery的組件設計通用思路，在此基礎上拓展Datatable 表格插件功能方法[3]。首先在HTML頁面，使用grid 網格控件搭建table 表格，完成table 表格的初始建立，搭建基本框架，并在JavaScript 中綁定基于jQuery的Datatable 組件，實現Datatable 基本表格顯示功能。給table 表格新增一個＜thead＞表頭標簽，命名為“合計”，并為該表頭標簽添加class="checkbox-All"自定義屬性類；同時給table表格所有＜thead＞表頭標簽添加＜input type="checkbox"＞表單標簽，以提供選項框。給table 表格新增＜tbody＞表格主體內容，存放計算后的數據。通過JavaScript獲取table表格的唯一標識id；并給class="checkboxAll"屬性類綁定click 點擊事件，以實現用戶在操作界面點擊“合計”＜thead＞表頭標簽的選中框，可以全選table表格中所有列或全不選所有列，同時獲取選擇列的行數據，計算并顯示在“合計”列。流程設計圖如圖1所示。

圖1 流程設計圖

其中，JavaScript 簡稱JS，是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言，作用是：嵌入動態文本于HTML頁面，對用戶操作瀏覽器事件作出響應，實現相關功能[4]。CSS 是指層疊樣式表，作用是：描述HTML 文檔樣式，本文是通過調用原有的Datatable的CSS樣式，將表格顯示出來[5]。

本文設計并實現的通用模塊可以使用戶在頁面上，根據實際使用需求，僅通過點擊按鈕的方式，靈活選擇某表頭或某幾個表頭或全選表頭，即可對所選表頭的每行數據進行計算，并顯示在相應位置。

2 技術方案

除了基本的顯示、分頁、排序、搜索功能外，基于jQuery 的Datatable 組件還支持擴展和二次開發，以實現更加靈活的定制化功能。本文通過編寫Datatable組件的JavaScript 代碼，實現相關拓展功能，并輔以CSS 層疊樣式表，為HTML 頁面添加更多的功能和樣式?；谏鲜隽鞒淘O計的詳細技術方案如下：

1) 在HTML頁面完成table表格的初始建立，加載table表格的網格控件grid，包括：＜thead＞表頭標簽和＜tbody＞表格內容；給table表格所有＜thead＞表頭標簽添加＜input type="checkbox"＞表單標簽，實現通過以選擇框的形式可對該列進行勾選選擇；添加table表格的唯一標識id，并添加jQuery 表格插件Datatable 的JS 和CSS，實現Datatable 插件基礎功能，如：顯示、語言設置、分頁、排序、搜索等。

2) 給table表格新增＜thead＞表頭標簽，命名為“合計”，添加＜input type="checkbox"＞表單標簽，實現可對該列的選擇框進行選擇與取消，同時為其添加自定義類屬性：class="checkboxAll"；其中，checkbox 類型的 ＜input＞ 元素在默認情況下呈現為激活時被選中（打鉤）的方框，即為選中框。

3) 給table 表格新增＜tbody＞表格內容，用以存放計算后的數據，同時為其添加自定義類屬性：class="totalData"，與第2步中的新增＜thead＞表頭標簽對應，便于查找、存放數據。

4) 在JavaScript 中，通過函數document.getElementById()查找table 表格的唯一標識id，獲取table 表格的對象tableId，此處可以根據用戶習慣命名。

5) 在JavaScript 中，通過給屬性類class="checkboxAll"綁定click 點擊事件，實現點擊“合計”＜thead＞的選中框，即可實現全選所有列或全不選所有列：通過給相關具有check 屬性的表頭標簽賦值true($("input[type='checkbox']").attr({"checked":true})) ，實現全選所有列；通過給相關具有check 屬性的表頭標簽賦值 false($("input[type= 'checkbox']"). attr({"checked":false})) ，實現全不選所有列。其中，.attr()為相關屬性("input[type='checkbox']") 賦狀態(true/false) ，分別表達打勾和去勾；給HTML 頁面上所有的"input[type='checkbox']"綁定change觸發事件，實現當頁面任意選中框發生變化時（即選中/不選中狀態變化時），在JavaScript 中動態獲取每一列的行數據，并按列項分別保存至對應數組。

6) 獲取選擇列項的行數據，計算并顯示在“合計”列。由于用戶自定義選擇列項的隨機性，可在Java-Script 中申明動態數組cellData = {}，根據選擇列項的多少動態分配數組空間；通過查找"input[type='checkbox']"類屬性，給其綁定change 觸發事件，針對在HTML 頁面所有的"input[type='checkbox']"類屬性狀態變化時觸發，實現當頁面任意選中框發生變化時，即選中/不選中狀態變化時，可以動態獲取每一列的行數據，并按列項分別保存至對應數組：①通過獲取的table 表格對象，得到該table 表格對象的列數：tableId.rows[0].cells.length；②遍歷獲取對象的列數，調用之前申明的動態數組cellData{}，動態分配與列數相同的數組：cellData[array]；③利用選項屬性標識check，查看table 表格的每一列是否被選中：if(tableId.rows[0].cells[].children[0].checked，此處返回true 或false；④遍歷選中的列，獲取每一個選中列的行數據：tableId.rows[].cells[].innerHTML，并將行數據按列存放至數組cellData[array]中；⑤根據計算需求，遍歷每一個cellData[array]數組，對每一個數組按元素順序進行計算，并保存至存放結果的數組中totalData[]；⑥將totalData[]按順序賦值給類屬性為class="totalData"的＜tbody＞表單內容標簽以顯示：$($(".totalData")[]).HTML(totalData[])。

任意勾選表頭選擇框，實現對該勾選列每行數據進行計算，并顯示在對應“合計”列，如圖2、圖3所示。

圖2 自定義列計算

圖3 自定義列計算

點擊“合計”表頭選擇框，實現對table表格所有表頭的全選，并對選擇列的每行數據進行計算，并將結果顯示在“合計”列的對應行，如圖4所示。

圖4 全選列計算

3 核心代碼實現

根據上述流程設計和技術方案實現思路，針對自定義計算Datatable 表格數據功能實現，編寫了基于jQuery的Datatable組件JavaScript代碼，顯示如下：

4 分析總結

綜上所述，Datatable 是一個強大且靈活的表格組件，可以為Web開發項目提供很大的幫助。通過對其進行擴展和二次開發，可以實現更加定制化的功能，滿足特定業務需求。在實際開發中，用戶可以根據具體需求采取不同的措施來優化Datatable 的功能和性能，以提高用戶體驗和項目效率。