基于jQuery框架的DataTable組件設(shè)計(jì)與開(kāi)發(fā)

李琦 李志卿 劉磊 高士琛 鄧婕

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

隨著互聯(lián)網(wǎng)技術(shù)的不斷進(jìn)步和企業(yè)信息化建設(shè)水平的發(fā)展，基于B/S 架構(gòu)下的Web 項(xiàng)目開(kāi)發(fā)，逐漸成為開(kāi)發(fā)的主流技術(shù)[1]。在實(shí)際項(xiàng)目開(kāi)發(fā)過(guò)程中，查詢結(jié)果的數(shù)據(jù)呈現(xiàn)是大多數(shù)系統(tǒng)的必備功能。Datatable 是一款jQuery 表格插件，它是一個(gè)當(dāng)前使用較為廣泛的表格工具，具備按行列顯示表格數(shù)據(jù)、分頁(yè)、篩選和排序等功能[2]。在現(xiàn)有的Datatable 表格插件中，表頭項(xiàng)基本在代碼中固定。當(dāng)表格列數(shù)目過(guò)多時(shí)，會(huì)出現(xiàn)屏幕溢出；當(dāng)表頭順序或顯隱需要調(diào)整時(shí)，需要在代碼中修改，靈活性、可修改性較差；各單元格如果內(nèi)容較多時(shí)，會(huì)出現(xiàn)顯示內(nèi)容不全，無(wú)法做到一目了然。現(xiàn)有的技術(shù)方案是通過(guò)開(kāi)發(fā)人員修改硬編碼實(shí)現(xiàn)，實(shí)際操作性、靈活性不強(qiáng)，且會(huì)因?yàn)樾枨笞兓?、屏幕分辨率不同等出現(xiàn)顯示異常，影響用戶體驗(yàn)。因此，基于jQuery 設(shè)計(jì)一個(gè)通用的表格插件功能方法，實(shí)現(xiàn)當(dāng)用戶業(yè)務(wù)需求發(fā)生變化時(shí)，不需重寫(xiě)代碼，只需在頁(yè)面上以點(diǎn)擊按鈕的方式修改樣式文件，達(dá)到動(dòng)態(tài)呈現(xiàn)數(shù)據(jù)的目的，此方法可以滿足個(gè)性化顯示需求，方便用戶使用。

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

依據(jù)基于jQuery 的組件設(shè)計(jì)通用思路，在此基礎(chǔ)上拓展Datatable 表格插件功能方法[3]。首先在HTML頁(yè)面，使用grid 網(wǎng)格控件搭建table 表格，完成table 表格的初始建立，搭建基本框架，并在JavaScript 中綁定基于jQuery 的Datatable 組件，實(shí)現(xiàn)Datatable 基本表格顯示功能。在HTML 頁(yè)面設(shè)置按鈕，按鈕個(gè)數(shù)與顯示的列項(xiàng)一一對(duì)應(yīng)。添加多個(gè)按鈕控件，將擴(kuò)展功能以函數(shù)的形式進(jìn)行封裝，以便調(diào)用，將相關(guān)方法與按鈕控件綁定；同時(shí)，將DataTable 組件與table 表格進(jìn)行綁定。最后重寫(xiě)DataTable 組件的JavaScript 和層疊樣式表CSS，以實(shí)現(xiàn)點(diǎn)擊不同的按鈕，實(shí)現(xiàn)的不同擴(kuò)展功能。使用者可以在頁(yè)面上，通過(guò)點(diǎn)擊按鈕的方式，根據(jù)實(shí)際使用需求，靈活修改表頭的顯隱，顯示順序，設(shè)置每一列的顯示寬度和顯示各單元格全部數(shù)據(jù)。流程設(shè)計(jì)圖如圖1 所示。

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

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

2 技術(shù)方案

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

（1）在HTML 頁(yè)面完成table 表格的初始建立，加載table 表格的網(wǎng)格控件grid，包括：表頭標(biāo)簽和表格內(nèi)容；

（2）在同一HTML 頁(yè)面，設(shè)置列按鈕，列按鈕需與表頭標(biāo)簽順序相同、內(nèi)容相同；

（3）添加按鈕控件，包括列的顯示按鈕，列的隱藏按鈕，表格列數(shù)據(jù)顯示折行按鈕，設(shè)置表格顯示順序按鈕和設(shè)置表格列寬度按鈕，便于點(diǎn)擊相應(yīng)按鈕實(shí)現(xiàn)相應(yīng)的功能；

（4）調(diào)用DataTable 組件的JavaScript 和CSS，與表格的id 進(jìn)行綁定，實(shí)現(xiàn)基本的顯示、分頁(yè)、排序和搜索功能；

（5）重寫(xiě)DataTable 的JavaScript 和層疊樣式表CSS：

①添加獲取cookie 的方法，獲取指定名稱的cookie值，當(dāng)獲取的是多個(gè)cookie 值時(shí)，保存的時(shí)候是以分號(hào)或空格分開(kāi)；②添加設(shè)置cookie 的方法，將cookie 的value 值與表格的id 一一對(duì)應(yīng)；③在執(zhí)行完上述步驟4的時(shí)候，觸發(fā)添加表格列的初始化方法：首先獲取table對(duì)象、table 標(biāo)簽的id 和模態(tài)框頂級(jí)