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

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

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

現(xiàn)在讓我們更詳細(xì)地回顧一下這些功能。

全新的可定制內(nèi)置主題

自定義一直是所有DHTMLX產(chǎn)品(包括電子表格組件)的主要優(yōu)勢之一，在v5.1中極大地?cái)U(kuò)展了電子表格樣式功能，使用了四個(gè)新的內(nèi)置主題，這些主題已經(jīng)在Suite庫中可用：淺色、深色、淺色高對比度和深色高對比度。

方便的本地化數(shù)字，日期，時(shí)間和貨幣格式

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

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)
}
});

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

存儲數(shù)據(jù)集中單元格的鎖定狀態(tài)和鏈接

鎖定單元格的功能是DHTMLX Spreadsheet組件的一個(gè)流行特性，它使您能夠?qū)⑻囟ǖ碾娮颖砀駟卧裨O(shè)置為只讀，供用戶使用。以前，在向JSON文件導(dǎo)出/導(dǎo)入電子表格數(shù)據(jù)時(shí)，存儲單元格的鎖定狀態(tài)存在問題。

在v5.1中用一個(gè)名為locked的新單元格屬性擴(kuò)展了電子表格API，當(dāng)將此屬性的值設(shè)置為true時(shí)，您可以輕松地將帶有鎖定單元格的電子表格數(shù)據(jù)保存到JSON文件中，然后在需要時(shí)導(dǎo)入它。此功能的實(shí)現(xiàn)如下代碼所示：

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
];

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

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

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文件與導(dǎo)出的電子表格數(shù)據(jù)

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

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

spreadsheet.export.xlsx("MyData");

更多產(chǎn)品更新內(nèi)容，請?jiān)斣儭啊鲍@取~