DHTMLX Spreadsheet是用純JavaScript編寫的開源電子表格小部件，可讓您快速在網頁上添加類似于Excel的可編輯數據表。高度可定制的JavaScript電子表格組件，具有優雅的Material樣式，可安全、方便地編輯和格式化數據。本文給大家講解DHTMLX Gantt的任務內容如何顯示，歡迎大家下載最新版試用體驗。

DHTMLX Spreadsheet正版試用下載https://www.evget.com/product/4251/download

DHTMLX Spreadsheet 5.0 迎來重大發布。此次重大更新主要側重于擴展動態修改電子表格結構和輕松管理表格數據的功能列表。例如，新版JavaScript 電子表格庫允許搜索和過濾數據、合并和拆分單元格、自動調整表格的列寬、將鏈接插入電子表格內容、應用刪除線文本格式等。幾乎所有這些備受期待的功能都可以通過 API 和 UI 獲得。

讓我們一起看看 Web 開發人員和最終用戶如何使用 v5.0 中提供的新穎性。

一、資料搜尋

如果您沒有用于此任務的特殊搜索工具，則在電子表格中查找特定數據可能會很耗時。對于具有包含數百甚至數千條記錄的多個工作表的大型表尤其如此。但是在使用我們最新版本的 JavaScript 電子表格時您不必擔心這一點，因為它帶有一個方便的搜索選項。

最終用戶可以通過搜索欄執行此操作，搜索欄有兩種打開方式：

• 通過單擊任何電子表格單元格并按Ctrl (Cmd) + F組合鍵，
• 通過轉到菜單部分中的數據 - >搜索。

應該注意的是，搜索僅在打開的工作表中執行。所有結果都將在網格中突出顯示，并且可以使用搜索欄箭頭或熱鍵Ctrl（命令）+ G（上一個）/?Ctrl（命令）+ Shift+ G（下一個）進行查看。默認情況下，所有搜索都不區分大小寫。

要通過 API 在電子表格中查找某些信息，您必須使用新添加的search()方法。它需要 3 個可選參數：

• text?– 指定搜索值，
• openSearch?– 如果設置為true，打開搜索框并突出顯示與輸入的查詢匹配的結果（默認為false），
• sheetID?– 用于標識應在其中執行搜索的工作表。如果您沒有設置此參數的值，將在當前活動的工作表上執行搜索。

例如，您可以通過以下方式在相應的工作表中找到 2 月份的所有收入統計信息：

電子表格。搜索（“二月”?，?真，?“收入”?）；

還有關閉搜索欄的新hideSearch()方法：

電子表格。隱藏搜索（）；

二、數據過濾

v5.0 中提供的有效處理大型電子表格的另一重要改進是能夠按特定條件過濾數據。此功能將幫助您暫時隱藏包含過多信息的單元格，并專注于當前相關數據以進行更高效的分析。

在用戶界面中，可以通過選擇一個或多個單元格并執行以下操作之一來啟用此功能：

• 單擊工具欄中的過濾器按鈕，
• 轉到菜單部分中的數據 - >過濾器。

之后，選定的單元格或單元格范圍將補充過濾器圖標。然后可以開始按條件或按值過濾數據。

當不再需要過濾器時，最終用戶可以通過單擊工具欄中的過濾器按鈕或電子表格數據菜單中的相應選項來刪除它們。結果，所有隱藏的記錄都將變得可見。

以下是逐步顯示如何雙向過濾數據并隨后清除過濾設置的可視化示例：

按條件過濾

按值過濾

在談到通過API實現數據過濾時，應該調用setFilter()方法。

它使您能夠設置要過濾的單元格或單元格范圍，并添加在此操作期間應遵循的某些規則。

例如，您可以在 C 列中顯示單元格，其中數值不在 5 到 8 之間，不包括 3.75，如下例所示：

電子表格。setFilter?（“C1”?，[?{?}?，?{?}?，{條件：?{因子：?“?inb?”?，值：?[?5，8?]?}?，排除：[?3.75?]?}?]?）;

現在讓我們通過以下示例考慮如何使用setFilter()方法為兩列指定過濾條件：

電子表格。setFilter?（“C1：D20”?，?[?{條件：?{因子：?“?ib?”?，值：?[?5，8?]?}?}?，{排除：[?740?]?}?]?）;

在這種情況下，第一個條件，即“介于 5 和 8 之間”適用于 C 列，而排除 740 的條件適用于 D 列。

文檔中提供了可用過濾條件的完整列表及其含義。

要重置過濾器，您需要調用setFilter()方法，僅指示第一個單元格參數或根本不指定任何參數。

如有必要，您可以借助getFilter()方法獲取當前用于過濾電子表格數據的條件。

三、合并和拆分單元格

在電子表格中處理不同類型的數據時，可能需要快速更改網格結構。這就是為什么我們決定在 v5.0 中引入合并單元格和拆分單元格的功能。通過合并單元格，您可以將兩個或多個相鄰的單元格合并為一個單元格。它對于創建標題和標簽或為大塊內容添加額外空間非常有用，從而使其更具可讀性。

在 v5.0 中，最終用戶只需選擇它們并單擊工具欄中的“合并”按鈕，即可垂直或水平合并任意數量的單元格。或者，此功能也可在電子表格菜單的“格式”部分中使用。

如果有必要拆分合并的單元格，您還應該使用上述選項之一。

在編碼方面，此功能是通過mergeCells()方法啟用的。您需要做的只是在第一個參數中指定應該合并的單元格范圍。

電子表格。mergeCells?(?"A6:A8"?)?;

相同的方法用于拆分合并的單元格。這是通過將第二個參數添加為true作為值來完成的。

電子表格。mergeCells?(?"A6:A8"?,?true?)?;

工作表對象中的新合并屬性旨在定義要合并的單元格范圍。

四、列自動寬度

v5.0 附帶的另一個有用的單元格格式化功能是自動列寬。當單元格中的內容在長度上變化很大時，這將有助于忘記手動更改任何列的寬度的必要性。

在使用 DHTMLX 構建的電子表格中，最終用戶現在可以通過雙擊列的大小調整器或上下文（3 個點）菜單來激活列的自動調整以適應最長的內容，如下所示：

以編程方式，您將能夠通過應用fitColumn()方法來使用此功能。它需要一個必需的單元格參數，其中應指定所需列的 ID。

電子表格。fitColumn ( "G2" ) ;

五、單元格內容中的超鏈接

從 v5.0 開始，基于 DHTMLX 的電子表格中的單元格內容可能包含超鏈接。通常使用單元格中的超鏈接將最終用戶引導至與給定電子表格相關的在線文檔或資源。
實際上，最終用戶可以通過三種方式將超鏈接插入單元格：

• 工具欄中的插入鏈接按鈕
• 熱鍵組合(Ctrl (Command) + K)
• 單元格的上下文菜單

帶有嵌入式超鏈接的單元格將輔以一個特殊的彈出窗口，其中包括用于管理鏈接的三個選項（復制、編輯、刪除）

在編碼方面，使用新的insertLink()方法將超鏈接插入到電子表格單元格中。此方法還允許添加將包含超鏈接的文本（或數字）值。

電子表格。insertLink?（“A2”?，?{
文本：“DHX電子表格”?，?href?：?“https://dhtmlx.com/docs/products/dhtmlxSpreadsheet/”
}?）；

可以通過使用單元 ID調用insertLink()方法來刪除任何超鏈接。

電子表格。插入鏈接（“A2”?）；

六、其他更改和更新

讓我們通過提及與它們相關的一些小新穎性來完成上述此版本的主要功能。首先，有merge、unmerge、filter、fitColumn和insertLink等新操作。在我們的 JavaScript 庫中，操作被用作與電子表格事件交互的新方式。v5.0 中引入的新功能還導致toolbarBlocks屬性發生重大變化。在這里，我們添加了一個名為“actions”的新工具欄控件塊，并將“help”塊替換為“helpers”塊。

現在我們可以繼續進行此版本中包含的其他次要更新。有一種新的文本格式稱為“刪除線”。它可用于通過劃掉其內容（或部分內容）來建議對特定單元格進行修訂。它與工具欄中的相應按鈕或熱鍵組合Alt + Shift + 5 (Cmd + Shift + X)一起使用。

?以上便是DHTMLX Spreadsheet 5.0 帶來的最新更新，歡迎有表格開發的客戶前往下載體驗

總結

以上是生活随笔為你收集整理的表格控件DHTMLX Spreadsheet 5.0版本重大更新，新增搜索和过滤数据、合并单元格、自动宽度功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。