DHTMLX Spreadsheet是用純JavaScript編寫的開源電子表格小部件，可讓您快速在網頁上添加類似于Excel的可編輯數據表。高度可定制的JavaScript電子表格組件，具有優雅的Material樣式，可安全、方便地編輯和格式化數據。

近日DHTMLX Spreadsheet v5.1正式發布，新版本的JavaScript電子表格組件提供了一系列有用的功能，這些功能將吸引開發人員和最終用戶。

首先，新的DHTMLX Spreadsheet提供了4個內置主題，可以根據您的喜好進行定制，同時還引入了數字、日期、貨幣和時間格式的簡化本地化。有幾個與導出/導入特性相關的有用更改，當在JSON文件中導出/導入電子表格數據時，可以存儲單元格的鎖定狀態和鏈接。此外，如果您需要將項目保存到Excel文件中，現在可以為擴展名為.xlsx的文件指定名稱。為了更方便地使用公式，我們還添加了小寫字母到大寫字母的自動轉換和公式的自動關閉。

現在讓我們更詳細地回顧一下這些功能。

全新的可定制內置主題

自定義一直是所有DHTMLX產品(包括電子表格組件)的主要優勢之一，在v5.1中極大地擴展了電子表格樣式功能，使用了四個新的內置主題，這些主題已經在Suite庫中可用：淺色、深色、淺色高對比度和深色高對比度。

方便的本地化數字，日期，時間和貨幣格式

從v5.1開始，在DHTMLX Spreadsheet組件中本地化流行的預定義數字格式（如數字、日期、時間和貨幣）也變得容易得多。現在只需要使用一個新的本地化屬性就可以完成，在這個屬性中可以指定所需的十進制和千位分隔符、貨幣符號、時間和日期格式。下面的代碼段顯示了如何更改默認的本地化設置。

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
localization: {
decimal: ",", // "." | "," - the decimal separator ("." by default)
thousands: " ", // "." | "," | " " | "" - the thousands separator ("," by default)
currency: "￥", // the currency sign ("$" by default)
dateFormat: "%d/%M/%Y", // the date format ("%d/%m/%Y" by default)
timeFormat: 24, // 12 | 24 - the time format (12 by default)
}
});

作為這些變化的結果，這就是你在UI中看到的：

存儲數據集中單元格的鎖定狀態和鏈接

鎖定單元格的功能是DHTMLX Spreadsheet組件的一個流行特性，它使您能夠將特定的電子表格單元格設置為只讀，供用戶使用。以前，在向JSON文件導出/導入電子表格數據時，存儲單元格的鎖定狀態存在問題。

在v5.1中用一個名為locked的新單元格屬性擴展了電子表格API，當將此屬性的值設置為true時，您可以輕松地將帶有鎖定單元格的電子表格數據保存到JSON文件中，然后在需要時導入它。此功能的實現如下代碼所示：

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
toolbarBlocks: ["undo", "colors", "decoration", "align", "help", "lock"]
});

spreadsheet.parse(dataset);

spreadsheet.lock("B2,B4,B6"); // locks specified cells
spreadsheet.lock("A7:B8"); // locks a range of cells
//the other locked cells are set via dataset
…

const dataset = [
{ cell: "a1", value: "Country", locked: true }, //locks a cell
{ cell: "b1", value: "Product", locked: true },
{ cell: "c1", value: "Price", locked: true },
{ cell: "d1", value: "Amount", locked: true },
{ cell: "e1", value: "Total Price", locked: true },
// more cells
];

對于網格單元格中的鏈接，v5.1解決了同樣的問題。現在可以使用新的link屬性為數據集中的某個單元格指定鏈接。它作為一個對象，您可以在其中添加鏈接的文本和鏈接目的地的URL，分別使用text(可選)和href(必選)參數。

在編程上，它是這樣做的：

const dataset = [
{ cell: "a1", value: "Country"}, //locks a cell
{ cell: "b1", value: "Product"},

{ cell: "a2", value: "Ecuador"},
{
cell: "b2",
value: "Banana",
link:{
href:"http://localhost:8080/"
}
},
// more cells
];

自定義命名的Excel文件與導出的電子表格數據

在以前的版本中，當用戶需要將電子表格數據導出為Excel文件時，默認保存在名為data的文件中。這可能會造成一些不便，因此我們在這個小更新中提出了這個問題的解決方案。

從v5.1開始，可以為導出的文件指定自定義名稱。為此，我們向xlsx()方法添加了一個相應的參數。

spreadsheet.export.xlsx("MyData");

更多產品更新內容，請詳詢“”獲取~