更新盛事
我很高興宣布 DataTables 擴充功能和網站發布多項重大更新,這標誌著整個專案向前邁進了一大步。這已經規劃和編寫了好幾個月,所以終於能夠充分分享這些更新,真的令人感到高興。
此版本的重點在於一致性 - 主要體現在擴充功能的初始化方式以及它們的 API 的呈現方式,現在這些都與 DataTables 的初始化選項和 API 結構緊密結合。樣式也是關鍵,DataTables 及其所有擴充功能現在完全支援四種樣式框架 (計畫支援更多框架)
- DataTables 自己的樣式
- Bootstrap
- Foundation
- jQuery UI
在這篇文章中,我將總結這些變更和新版本,並在未來幾週的後續文章中撰寫更多關於每個變更和新版本的詳細資訊 (有很多新功能!)。
網站
DataTables 網站已更新,以作為在 DataTables 及其擴充功能之間提供一致性的努力之一。現在提供新的下載產生器和更新的參考章節。
下載產生器
您在使用新軟體時可能注意到的第一個變更是當您前往下載時。現在提供新的下載產生器,讓您可以使用點擊介面選擇您想要使用的軟體。產生的檔案可以下載到本機,或託管在 DataTables CDN 上。下載產生器將有助於解決任何相依性,並優化檔案的載入,因為它們可以串連到單一的縮小檔案中。
下載產生器的設計旨在讓您更容易使用 DataTables 擴充功能,特別是最近的更新,為各種樣式框架提供完全的樣式支援。決定您需要包含哪些檔案現在是一個簡單的點擊操作,而不是查看下載套件並個別包含檔案。
因此,您可以使用下載產生器選擇您想要與 DataTables 一起使用的樣式框架,它將自動為您包含所有正確的程式碼。現在,使用 Bootstrap 樣式的表格非常容易!
參考
該網站的參考章節也已更新,以包含有關 DataTables 核心以及所有擴充功能的選項、API、事件和按鈕 (請參閱下方的新按鈕擴充功能) 的資訊。這些選項都有清楚的標示,讓您知道每個屬性需要哪些軟體,並讓您更容易找到您需要的內容!
Editor
今天也發布了 Editor 1.5.0 - 這是 Editor 軟體的主要更新,引入了許多新功能
- 多列編輯!
- 同時編輯表格中的多列!
- 透過 API 完全公開,允許 AutoFill 和 RowReorder 與 Editor 一起運作
- 伺服器端事件,可在發生特定動作時執行操作 - 提供 PHP 和 .NET 文件。
- 現在使用
upload
和uploadMany
欄位類型,核心函式庫內建每個欄位的一個或多個檔案的檔案上傳支援。 - 如果沒有變更,則選擇不將資料提交到伺服器 (預設會為內嵌編輯啟用) -
form-options
)。
請注意,在 Editor 1.5 中新增多列編輯的升級需要變更 Editor 使用的用戶端/伺服器通訊協定。如果您僅使用 Editor 函式庫而不存取原始資料,則不需要進行任何變更。但是,如果您直接存取資料,則必須為此更新程式碼,或停用多列編輯並使用舊版協定。從 1.4 版升級的使用者,請參閱升級文件。
新擴充功能
此版本已建立三個新的擴充功能,大大提高了 DataTables 的實用性。
按鈕
按鈕以及新的 選取擴充功能,取代了現已停用的 TableTools 和 ColVis 擴充功能。按鈕提供了一個通用 API 和樣式框架,以顯示以某種方式與 DataTable 互動的按鈕。它分為核心軟體 (本身幾乎沒有任何作用,但它提供了定義您自己的按鈕的框架) 和 四個模組,這些模組可以選擇性地包含 (使用下載產生器!)
- HTML5 匯出選項 - 這可能是 DataTables 最常要求的功能之一!舊的 TableTools 擴充功能使用 Flash 進行匯出,而 Flash 現在已逐漸淘汰,並且 HTML API 開始提供我們建立本機檔案所需的功能。可以從表格中包含的資料建立 CSV、XLSX 和 PDF 檔案。XLSX 檔案需要 JSZip,而 PDF 檔案需要 pdfmake - 缺點是這些檔案會顯著增加您頁面上的 Javascript 需求量,但它們提供了很大的彈性,例如 PDF 中的影像!
- Flash 匯出選項 - HTML5 匯出選項需要 IE10+ 或其中一個永久更新的瀏覽器 (Chrome、Firefox、Edge、Safari、Opera),因此對於舊版瀏覽器,仍然可以選擇使用 Flash 匯出。Excel 匯出選項已從 TableTools 升級為匯出真正的 XLSX 檔案。
- 列印檢視 - 顯示可列印的表格
- 欄位可見性控制項 - 這是取代舊的 ColVis 函式庫的模組,並確保按鈕的樣式與頁面上的所有其他按鈕相同。
RowReorder
RowReorder 將 DataTables 系列引入一個全新的功能 - 能夠透過點擊並拖曳重新排序列。它主要用於排序循序清單,因此採用資料交換原則 (即,放下資料列時,會從它取代的資料列取得資料,並且表格中的其他資料列會移動以維持順序)。
它還具有與 Editor 的多列編輯的完整整合,因此單一點擊並拖曳事件可以更新資料庫中的多列。
選取
選取取代了已停用的 TableTools 擴充功能的資料列選取方面,並透過提供選取欄和儲存格以及資料列的功能來擴展它。可以使用單一點擊來執行資料列選取,或使用更複雜的選項,例如 shift 點擊來選取範圍,以及 cmd/ctrl 點擊來切換個別項目。
選取還具有與 DataTables API 的 緊密整合,讓您非常容易取得有關已選取項目的資訊。例如
var table = $('#myTable').DataTable();
table.rows( { selected: true } ).data();
將會從已選取的資料列收集資料。
重寫的擴充功能
除了上述介紹的三個全新擴充功能之外,三個老朋友也已完全重寫,以利用 DataTables 1.10 提供的功能,並與其選項和 API 提供緊密整合。
請注意,這些重寫不向後相容。請參閱它們個別的文件頁面,以取得有關如何使用每個擴充功能的指示。
AutoFill
AutoFill 2,具有比原始版本更精簡、更簡單的程式碼庫。它仍然提供與 DataTable 相同的基本互動 - 點擊並拖曳以使用資料填滿儲存格 - 但是 v2 透過其新的多重填滿選項增加了很多彈性。使用者現在可以選擇他們希望如何填滿資料 (例如,水平、垂直或使用遞增值),並且可以輕鬆新增新的填滿樣式。現在也可以使用與 DataTables 支援的樣式框架的完整樣式整合。
KeyTable
KeyTable 2 也進行了重寫,以簡化和擴展其程式碼庫的功能。KeyTable 仍然提供相同的基本功能 - 試算表式 DataTable 導覽,但現在它做得更好!
KeyTable 現在也直接支援 Editor 的內嵌編輯模式。keys.editor
選項可用於傳遞要使用的 Editor 執行個體,立即新增內嵌編輯所需的一切。
FixedHeader
FixedHeader 3 已重寫為使用一種新的方法,將表格的標頭和頁尾固定到頁面。它現在將「真實」元素移到浮動容器中,並將預留位置複製到原始表格中,以避免它跳動,而不是顯示複製的元素。
這樣做最大的好處是原始元素會一直顯示給終端使用者,因此將輸入放入元素等複雜行為仍然有效。例如,DataTables 附加到欄標頭的排序監聽器會自動運作,因為顯示的是原始標頭。
下一步
我認為這是 DataTables 的史詩級版本,這是近一年長期規劃和四個月直接工作的成果。此版本由 12 個獨立的軟體和 5 萬行程式碼組成。規劃它是從您自己和使用 DataTables 的其他開發人員的角度進行演變,但同時對於剛接觸 DataTables 的開發人員和新專案而言,也產生了顯著的差異。
仍然有很多工作需要規劃,但是在我開始考慮 DataTables 的下一個主要版本之前,我會先評估此版本。無可避免地會有需要修正的錯誤,並且我計劃引入更好的瀏覽器/ npm 支援,這將構成未來幾個月計劃工作的大部分。
祝您使用愉快!