自定義計(jì)算Datatable表格數(shù)據(jù)的通用模塊設(shè)計(jì)與實(shí)現(xiàn)

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

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

0 引言

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

1 流程設(shè)計(jì)

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

圖1 流程設(shè)計(jì)圖

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

本文設(shè)計(jì)并實(shí)現(xiàn)的通用模塊可以使用戶在頁面上，根據(jù)實(shí)際使用需求，僅通過點(diǎn)擊按鈕的方式，靈活選擇某表頭或某幾個(gè)表頭或全選表頭，即可對所選表頭的每行數(shù)據(jù)進(jìn)行計(jì)算，并顯示在相應(yīng)位置。

2 技術(shù)方案

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

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

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

3) 給table 表格新增＜tbody＞表格內(nèi)容，用以存放計(jì)算后的數(shù)據(jù)，同時(shí)為其添加自定義類屬性：class="totalData"，與第2步中的新增＜thead＞表頭標(biāo)簽對應(yīng)，便于查找、存放數(shù)據(jù)。

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

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

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

任意勾選表頭選擇框，實(shí)現(xiàn)對該勾選列每行數(shù)據(jù)進(jìn)行計(jì)算，并顯示在對應(yīng)“合計(jì)”列，如圖2、圖3所示。

圖2 自定義列計(jì)算

圖3 自定義列計(jì)算

點(diǎn)擊“合計(jì)”表頭選擇框，實(shí)現(xiàn)對table表格所有表頭的全選，并對選擇列的每行數(shù)據(jù)進(jìn)行計(jì)算，并將結(jié)果顯示在“合計(jì)”列的對應(yīng)行，如圖4所示。

圖4 全選列計(jì)算

3 核心代碼實(shí)現(xiàn)

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

4 分析總結(jié)

綜上所述，Datatable 是一個(gè)強(qiáng)大且靈活的表格組件，可以為Web開發(fā)項(xiàng)目提供很大的幫助。通過對其進(jìn)行擴(kuò)展和二次開發(fā)，可以實(shí)現(xiàn)更加定制化的功能，滿足特定業(yè)務(wù)需求。在實(shí)際開發(fā)中，用戶可以根據(jù)具體需求采取不同的措施來優(yōu)化Datatable 的功能和性能，以提高用戶體驗(yàn)和項(xiàng)目效率。