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

DHTMLX Spreadsheet正版試用下載

DHTMLX Spreadsheet 5.0 迎來(lái)重大發(fā)布。此次重大更新主要側(cè)重于擴(kuò)展動(dòng)態(tài)修改電子表格結(jié)構(gòu)和輕松管理表格數(shù)據(jù)的功能列表。例如，新版JavaScript 電子表格庫(kù)允許搜索和過(guò)濾數(shù)據(jù)、合并和拆分單元格、自動(dòng)調(diào)整表格的列寬、將鏈接插入電子表格內(nèi)容、應(yīng)用刪除線文本格式等。幾乎所有這些備受期待的功能都可以通過(guò) API 和 UI 獲得。

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

一、資料搜尋

如果您沒(méi)有用于此任務(wù)的特殊搜索工具，則在電子表格中查找特定數(shù)據(jù)可能會(huì)很耗時(shí)。對(duì)于具有包含數(shù)百甚至數(shù)千條記錄的多個(gè)工作表的大型表尤其如此。但是在使用我們最新版本的 JavaScript 電子表格時(shí)您不必?fù)?dān)心這一點(diǎn)，因?yàn)樗鼛в?一個(gè)方便的搜索選項(xiàng)。

最終用戶可以通過(guò)搜索欄執(zhí)行此操作，搜索欄有兩種打開(kāi)方式：

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

應(yīng)該注意的是，搜索僅在打開(kāi)的工作表中執(zhí)行。所有結(jié)果都將在網(wǎng)格中突出顯示，并且可以使用搜索欄箭頭或熱鍵Ctrl（命令）+ G（上一個(gè)）/ Ctrl（命令）+ Shift+ G（下一個(gè)）進(jìn)行查看。默認(rèn)情況下，所有搜索都不區(qū)分大小寫(xiě)。

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

• text – 指定搜索值，
• openSearch – 如果設(shè)置為true，打開(kāi)搜索框并突出顯示與輸入的查詢匹配的結(jié)果（默認(rèn)為false），
• sheetID – 用于標(biāo)識(shí)應(yīng)在其中執(zhí)行搜索的工作表。如果您沒(méi)有設(shè)置此參數(shù)的值，將在當(dāng)前活動(dòng)的工作表上執(zhí)行搜索。

例如，您可以通過(guò)以下方式在相應(yīng)的工作表中找到 2 月份的所有收入統(tǒng)計(jì)信息：

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

二、數(shù)據(jù)過(guò)濾

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

在用戶界面中，可以通過(guò)選擇一個(gè)或多個(gè)單元格并執(zhí)行以下操作之一來(lái)啟用此功能：

• 單擊工具欄中的過(guò)濾器按鈕，
• 轉(zhuǎn)到菜單部分中的數(shù)據(jù) - >過(guò)濾器。

之后，選定的單元格或單元格范圍將補(bǔ)充過(guò)濾器圖標(biāo)。然后可以開(kāi)始按條件或按值過(guò)濾數(shù)據(jù)。

當(dāng)不再需要過(guò)濾器時(shí)，最終用戶可以通過(guò)單擊工具欄中的過(guò)濾器按鈕或電子表格數(shù)據(jù)菜單中的相應(yīng)選項(xiàng)來(lái)刪除它們。結(jié)果，所有隱藏的記錄都將變得可見(jiàn)。

以下是逐步顯示如何雙向過(guò)濾數(shù)據(jù)并隨后清除過(guò)濾設(shè)置的可視化示例：

按條件過(guò)濾

按值過(guò)濾

在談到通過(guò)API實(shí)現(xiàn)數(shù)據(jù)過(guò)濾時(shí)，應(yīng)該調(diào)用setFilter()方法。

它使您能夠設(shè)置要過(guò)濾的單元格或單元格范圍，并添加在此操作期間應(yīng)遵循的某些規(guī)則。

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

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

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

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

要重置過(guò)濾器，您需要調(diào)用setFilter()方法，僅指示第一個(gè)單元格參數(shù)或根本不指定任何參數(shù)。

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

三、合并和拆分單元格

在電子表格中處理不同類(lèi)型的數(shù)據(jù)時(shí)，可能需要快速更改網(wǎng)格結(jié)構(gòu)。這就是為什么我們決定在 v5.0 中引入合并單元格和拆分單元格的功能。通過(guò)合并單元格，您可以將兩個(gè)或多個(gè)相鄰的單元格合并為一個(gè)單元格。它對(duì)于創(chuàng)建標(biāo)題和標(biāo)簽或?yàn)榇髩K內(nèi)容添加額外空間非常有用，從而使其更具可讀性。

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

如果有必要拆分合并的單元格，您還應(yīng)該使用上述選項(xiàng)之一。

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

相同的方法用于拆分合并的單元格。這是通過(guò)將第二個(gè)參數(shù)添加為true作為值來(lái)完成的。

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

四、列自動(dòng)寬度

v5.0 附帶的另一個(gè)有用的單元格格式化功能是自動(dòng)列寬。當(dāng)單元格中的內(nèi)容在長(zhǎng)度上變化很大時(shí)，這將有助于忘記手動(dòng)更改任何列的寬度的必要性。

在使用 DHTMLX 構(gòu)建的電子表格中，最終用戶現(xiàn)在可以通過(guò)雙擊列的大小調(diào)整器或上下文（3 個(gè)點(diǎn)）菜單來(lái)激活列的自動(dòng)調(diào)整以適應(yīng)最長(zhǎng)的內(nèi)容，如下所示：

以編程方式，您將能夠通過(guò)應(yīng)用fitColumn()方法來(lái)使用此功能。它需要一個(gè)必需的單元格參數(shù)，其中應(yīng)指定所需列的 ID。

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

五、單元格內(nèi)容中的超鏈接

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

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

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

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

可以通過(guò)使用單元 ID調(diào)用insertLink()方法來(lái)刪除任何超鏈接。

六、其他更改和更新

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

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

慧都2022年終狂歡火熱進(jìn)行中，全場(chǎng)產(chǎn)品超低價(jià)，DHTMLX全系產(chǎn)品享8.8折！了解更多活動(dòng)詳情，歡迎訪問(wèn)慧都網(wǎng)咨詢。

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論

慧都年終狂歡季，全場(chǎng)產(chǎn)品，限時(shí)特惠，立即了解詳情！