李琦 李志卿 劉磊 高士琛 鄧婕
(中電科蓉威電子技術有限公司 四川省成都市 610031)
隨著互聯網技術的不斷進步和企業信息化建設水平的發展,基于B/S 架構下的Web 項目開發,逐漸成為開發的主流技術[1]。在實際項目開發過程中,查詢結果的數據呈現是大多數系統的必備功能。Datatable 是一款jQuery 表格插件,它是一個當前使用較為廣泛的表格工具,具備按行列顯示表格數據、分頁、篩選和排序等功能[2]。在現有的Datatable 表格插件中,表頭項基本在代碼中固定。當表格列數目過多時,會出現屏幕溢出;當表頭順序或顯隱需要調整時,需要在代碼中修改,靈活性、可修改性較差;各單元格如果內容較多時,會出現顯示內容不全,無法做到一目了然?,F有的技術方案是通過開發人員修改硬編碼實現,實際操作性、靈活性不強,且會因為需求變化、屏幕分辨率不同等出現顯示異常,影響用戶體驗。因此,基于jQuery 設計一個通用的表格插件功能方法,實現當用戶業務需求發生變化時,不需重寫代碼,只需在頁面上以點擊按鈕的方式修改樣式文件,達到動態呈現數據的目的,此方法可以滿足個性化顯示需求,方便用戶使用。
依據基于jQuery 的組件設計通用思路,在此基礎上拓展Datatable 表格插件功能方法[3]。首先在HTML頁面,使用grid 網格控件搭建table 表格,完成table 表格的初始建立,搭建基本框架,并在JavaScript 中綁定基于jQuery 的Datatable 組件,實現Datatable 基本表格顯示功能。在HTML 頁面設置按鈕,按鈕個數與顯示的列項一一對應。添加多個按鈕控件,將擴展功能以函數的形式進行封裝,以便調用,將相關方法與按鈕控件綁定;同時,將DataTable 組件與table 表格進行綁定。最后重寫DataTable 組件的JavaScript 和層疊樣式表CSS,以實現點擊不同的按鈕,實現的不同擴展功能。使用者可以在頁面上,通過點擊按鈕的方式,根據實際使用需求,靈活修改表頭的顯隱,顯示順序,設置每一列的顯示寬度和顯示各單元格全部數據。流程設計圖如圖1 所示。
圖1:設計流程圖
其中,JavaScript 簡稱“JS”,是一種具有函數優先的輕量級,解釋型或即時編譯型的編程語言,作用是嵌入動態文本于HTML 頁面,對用戶操作瀏覽器事件做出響應,實現相關功能[4]。CSS 是指層疊樣式表,作用是描述HTML 文檔樣式,本文是通過調用原有的Datatable 的CSS 樣式,將表格顯示出來[5]。
除了基本的顯示、分頁、排序、搜索功能外,基于jQuery 的Datatable 組件還支持擴展和二次開發,以實現更加靈活的定制化功能。本文通過編寫Datatable 組件的JavaScript 代碼,實現相關拓展功能,并輔以CSS層疊樣式表,為HTML 頁面添加更多的功能和樣式?;谏鲜隽鞒淘O計的詳細技術方案如下:
(1)在HTML 頁面完成table 表格的初始建立,加載table 表格的網格控件grid,包括:表頭標簽和
表格內容;(2)在同一HTML 頁面,設置列按鈕,列按鈕需與表頭標簽順序相同、內容相同; (3)添加按鈕控件,包括列的顯示按鈕,列的隱藏按鈕,表格列數據顯示折行按鈕,設置表格顯示順序按鈕和設置表格列寬度按鈕,便于點擊相應按鈕實現相應的功能; (4)調用DataTable 組件的JavaScript 和CSS,與表格的id 進行綁定,實現基本的顯示、分頁、排序和搜索功能; (5)重寫DataTable 的JavaScript 和層疊樣式表CSS: ①添加獲取cookie 的方法,獲取指定名稱的cookie值,當獲取的是多個cookie 值時,保存的時候是以分號或空格分開;②添加設置cookie 的方法,將cookie 的value 值與表格的id 一一對應;③在執行完上述步驟4的時候,觸發添加表格列的初始化方法:首先獲取table對象、table 標簽的id 和模態框頂級 Datatable 是一個基于jQuery 庫的表格插件,它可以在web 頁面中快速創建功能強大、高度靈活的數據表格[6]。除了基本的分頁、排序、搜索功能外,我們也可以通過擴展Datatable 組件或者基于其源碼進行二次開發,以實現更加定制化的功能。例如,我們可以開發插件、自定義插件、重寫插件方法等,以滿足特定需求[7]。 (1)獲取table 表格對象、table 表格標簽的id 和模態框頂級 (2)將獲取的模態框頂級 (3)獲取列的接口對象,根據當前列的顯隱狀態做出判斷:如果列的狀態為“顯示”,則添加對應的CSS 和類屬性Class,并更改狀態為“隱藏”;如果列的狀態為“隱藏”,則刪除對應的CSS 和類屬性Class,并更改狀態為“顯示”; (4)將(1)中獲取的模態框頂級 圖2:設置表格列的顯隱 (1)獲取table 表格列顯示的 (2)點擊表格列數據顯示折行按鈕,傳遞標識值;當選擇折行時,傳遞的flag(標識)值為1,此時為每列單元格添加如下CSS:“text-overflow”:“ellipsis”,“white-space”:“pre-wrap”;當選擇不折行時,傳遞的flag(標識)值為0,此時為每列單元格添加如下CSS:“text-overflow”:“inherit”,“white-space”:“nowrap”; text-overflow 屬性的主要作用是:規定當文本溢出包含元素時發生的事情,如果是ellipsis:顯示省略符號來代表被修剪的文本;如果是inherit:展示全部文本。 white-space 屬性的主要作用是:設置如何處理元素內的空白,如果是pre-wrap:保留空白符序列,但是正常地進行換行;如果是nowrap:文本不會換行,文本會在在同一行上繼續。 以table 表格中URL 列為例,根據實際顯示需求,模塊應用截圖如圖3、圖4 所示。 圖3:Url 列單元格數據顯示不全 圖4:Url 列單元格數據全部顯示 (1)獲取表格列顯示的 (2)獲取table 表格中的所有列的 (3)將對應列的按鈕與獲取的id 綁定,并設置相關CSS,實現拖動相關列,并將順序存入相應的數組中; (4)添加調取獲取每一列寬度的函數方法,以獲取每一列的寬度; (5)當拖動列,使列的順序發明變化后,保存③中列的順序,調用④中添加的函數方法和調用添加的設置cookie 的方法,將cookie 的value 值與id 一一對應。 根據實際顯示需求,設置表格列顯示順序,拖動圖標即可修改順序,模塊應用截圖如圖5 所示。 圖5:編輯表格列顯示順序 (1)獲取表格列顯示的 (2)獲取表格中的所有列的 (3)將列寬度儲存到數組中,并將數組傳入并調用上述獲取每一列寬度的函數方法和步添加設置cookie的方法中。 根據實際顯示需求以及屏幕分辨率,模塊應用截圖如圖6 所示。 圖6:設置列寬 綜上所述,Datatable 是一個強大且靈活的表格組件,擁有廣泛的應用前景。在實際開發中,我們可以根據具體需求,采取不同的措施優化Datatable 的功能和性能,并進行更加深入的擴展和二次開發。上述方法已在多個實際項目應用,函數封裝較好,運行穩定,在不脫離技術方案構思的前提下,還可以做出若干變形和改進,為近似類型的應用提供了良好的設計思路和示范。3 Datatable的高級方法實現
3.1 添加列的顯示與隱藏的執行功能
3.2 添加表格列數據顯示折行的執行功能
3.3 添加設置表格顯示順序的執行功能
3.4 添加設置表格列寬度的執行功能
4 分析總結