彩票走势图

高度可定制的JS电子表格组件DHTMLX Spreadsheet v5.1——拥有全新内置主题

翻译|产品更新|编辑:龚雪|2023-12-22 11:01:09.310|阅读 21 次

概述:本文将为大家详解JavaScript 电子表格组件DHTMLX Spreadsheet v5.1新发布的一些亮点,欢迎下载最新版体验!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

DHTMLX Spreadsheet是用纯JavaScript编写的开源电子表格小部件,可让您快速在网页上添加类似于Excel的可编辑数据表。高度可定制的JavaScript电子表格组件,具有优雅的Material样式,可安全、方便地编辑和格式化数据。

近日DHTMLX Spreadsheet v5.1正式发布,新版本的JavaScript电子表格组件提供了一系列有用的功能,这些功能将吸引开发人员和最终用户。

首先,新的DHTMLX Spreadsheet提供了4个内置主题,可以根据您的喜好进行定制,同时还引入了数字、日期、货币和时间格式的简化本地化。有几个与导出/导入特性相关的有用更改,当在JSON文件中导出/导入电子表格数据时,可以存储单元格的锁定状态和链接。此外,如果您需要将项目保存到Excel文件中,现在可以为扩展名为.xlsx的文件指定名称。为了更方便地使用公式,我们还添加了小写字母到大写字母的自动转换和公式的自动关闭。

现在让我们更详细地回顾一下这些功能。

全新的可定制内置主题

自定义一直是所有DHTMLX产品(包括电子表格组件)的主要优势之一,在v5.1中极大地扩展了电子表格样式功能,使用了四个新的内置主题,这些主题已经在Suite库中可用:浅色、深色、浅色高对比度和深色高对比度。

DHTMLX Spreadsheet v5.1产品图集
DHTMLX Spreadsheet v5.1产品图集
方便的本地化数字,日期,时间和货币格式

从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 v5.1产品图集
存储数据集中单元格的锁定状态和链接

锁定单元格的功能是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:"//localhost:8080/"
}
},
// more cells
];

自定义命名的Excel文件与导出的电子表格数据

在以前的版本中,当用户需要将电子表格数据导出为Excel文件时,默认保存在名为data的文件中。这可能会造成一些不便,因此我们在这个小更新中提出了这个问题的解决方案。

从v5.1开始,可以为导出的文件指定自定义名称。为此,我们向xlsx()方法添加了一个相应的参数。

spreadsheet.export.xlsx("MyData");

更多产品更新内容,请详询“”获取~


DevExpress企业定制服务

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP