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

2023-05-29 09:23李琦李志卿劉磊高士琛鄧婕

電子技術(shù)與軟件工程 2023年7期

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

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

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

1 流程設(shè)計

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

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

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

2 技術(shù)方案

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

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

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

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

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

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

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

的id，然后調(diào)用步驟1 和步驟2 的方法，根據(jù)cookie 的信息控制列的顯示隱藏；④添加與步驟3 中的按鈕控件相對應(yīng)的執(zhí)行功能函數(shù)，所述執(zhí)行功能函數(shù)包括：列的顯示與隱藏的執(zhí)行功能函數(shù)、表格列數(shù)據(jù)顯示折行的執(zhí)行功能函數(shù)、表格顯示順序的執(zhí)行功能函數(shù)和設(shè)置表格列寬度的執(zhí)行功能函數(shù)；⑤當(dāng)執(zhí)行完表格列的初始化方法后，將添加的按鈕控件與相對應(yīng)的執(zhí)行功能函數(shù)進(jìn)行綁定。

3 Datatable的高級方法實現(xiàn)

Datatable 是一個基于jQuery 庫的表格插件，它可以在web 頁面中快速創(chuàng)建功能強大、高度靈活的數(shù)據(jù)表格[6]。除了基本的分頁、排序、搜索功能外，我們也可以通過擴展Datatable 組件或者基于其源碼進(jìn)行二次開發(fā)，以實現(xiàn)更加定制化的功能。例如，我們可以開發(fā)插件、自定義插件、重寫插件方法等，以滿足特定需求[7]。

3.1 添加列的顯示與隱藏的執(zhí)行功能

（1）獲取table 表格對象、table 表格標(biāo)簽的id 和模態(tài)框頂級

的id，實質(zhì)上是直接采用上述技術(shù)方案中步驟5 第③步table 表格列的初始化方法，相當(dāng)于形成循環(huán)，可以進(jìn)行多次修改和調(diào)整；

（2）將獲取的模態(tài)框頂級

的id 綁定click 點擊事件，實現(xiàn)點擊按鈕，與相關(guān)功能綁定；

（3）獲取列的接口對象，根據(jù)當(dāng)前列的顯隱狀態(tài)做出判斷：如果列的狀態(tài)為“顯示”，則添加對應(yīng)的CSS 和類屬性Class，并更改狀態(tài)為“隱藏”；如果列的狀態(tài)為“隱藏”，則刪除對應(yīng)的CSS 和類屬性Class，并更改狀態(tài)為“顯示”；

（4）將（1）中獲取的模態(tài)框頂級

的id 和③中的列的顯隱狀態(tài)存入數(shù)組，調(diào)用之前添加的設(shè)置cookie 的方法，進(jìn)行存儲。根據(jù)實際顯示需求，模塊應(yīng)用截圖如圖2 所示。

圖2：設(shè)置表格列的顯隱

3.2 添加表格列數(shù)據(jù)顯示折行的執(zhí)行功能

（1）獲取table 表格列顯示的

項目標(biāo)簽，將

項目標(biāo)簽與表格列數(shù)據(jù)顯示折行按鈕的狀態(tài)進(jìn)行綁定；

（2）點擊表格列數(shù)據(jù)顯示折行按鈕，傳遞標(biāo)識值；當(dāng)選擇折行時，傳遞的flag（標(biāo)識）值為1，此時為每列單元格添加如下CSS：“text-overflow”：“ellipsis”，“white-space”：“pre-wrap”；當(dāng)選擇不折行時，傳遞的flag（標(biāo)識）值為0，此時為每列單元格添加如下CSS：“text-overflow”：“inherit”，“white-space”：“nowrap”；

text-overflow 屬性的主要作用是：規(guī)定當(dāng)文本溢出包含元素時發(fā)生的事情，如果是ellipsis：顯示省略符號來代表被修剪的文本；如果是inherit：展示全部文本。

white-space 屬性的主要作用是：設(shè)置如何處理元素內(nèi)的空白，如果是pre-wrap：保留空白符序列，但是正常地進(jìn)行換行；如果是nowrap：文本不會換行，文本會在在同一行上繼續(xù)。

以table 表格中URL 列為例，根據(jù)實際顯示需求，模塊應(yīng)用截圖如圖3、圖4 所示。

圖3：Url 列單元格數(shù)據(jù)顯示不全

圖4：Url 列單元格數(shù)據(jù)全部顯示

3.3 添加設(shè)置表格顯示順序的執(zhí)行功能

（1）獲取表格列顯示的

項目標(biāo)簽標(biāo)簽，將

項目標(biāo)簽與設(shè)置table 表格顯示順序按鈕的狀態(tài)進(jìn)行綁定；

（2）獲取table 表格中的所有列的

的id，并設(shè)置對應(yīng)列的按鈕，以便拖動；

（3）將對應(yīng)列的按鈕與獲取的id 綁定，并設(shè)置相關(guān)CSS，實現(xiàn)拖動相關(guān)列，并將順序存入相應(yīng)的數(shù)組中；

（4）添加調(diào)取獲取每一列寬度的函數(shù)方法，以獲取每一列的寬度；

（5）當(dāng)拖動列，使列的順序發(fā)明變化后，保存③中列的順序，調(diào)用④中添加的函數(shù)方法和調(diào)用添加的設(shè)置cookie 的方法，將cookie 的value 值與id 一一對應(yīng)。

根據(jù)實際顯示需求，設(shè)置表格列顯示順序，拖動圖標(biāo)即可修改順序，模塊應(yīng)用截圖如圖5 所示。

圖5：編輯表格列顯示順序

3.4 添加設(shè)置表格列寬度的執(zhí)行功能

（1）獲取表格列顯示的

項目標(biāo)簽，將

項目標(biāo)簽與按鈕控件的狀態(tài)進(jìn)行綁定；

（2）獲取表格中的所有列的

的id，并設(shè)置對應(yīng)列的按鈕；并為每一列添加表單標(biāo)簽；所述按鈕為點擊按鈕，點擊后彈出input 對話框，可以由用戶填入相應(yīng)的寬度；

（3）將列寬度儲存到數(shù)組中，并將數(shù)組傳入并調(diào)用上述獲取每一列寬度的函數(shù)方法和步添加設(shè)置cookie的方法中。

根據(jù)實際顯示需求以及屏幕分辨率，模塊應(yīng)用截圖如圖6 所示。

圖6：設(shè)置列寬

4 分析總結(jié)

綜上所述，Datatable 是一個強大且靈活的表格組件，擁有廣泛的應(yīng)用前景。在實際開發(fā)中，我們可以根據(jù)具體需求，采取不同的措施優(yōu)化Datatable 的功能和性能，并進(jìn)行更加深入的擴展和二次開發(fā)。上述方法已在多個實際項目應(yīng)用，函數(shù)封裝較好，運行穩(wěn)定，在不脫離技術(shù)方案構(gòu)思的前提下，還可以做出若干變形和改進(jìn)，為近似類型的應(yīng)用提供了良好的設(shè)計思路和示范。

国产日韩欧美一区二区三区三州_亚洲少妇熟女av_久久久久亚洲av国产精品_波多野结衣网站一区二区_亚洲欧美色片在线91_国产亚洲精品精品国产优播av_日本一区二区三区波多野结衣 _久久国产av不卡