表格控件DHTMLX Spreadsheet 5.0版本重大更新，新增搜索和过滤数据、合并单元格、自动宽度功能

DHTMLX Spreadsheet 5.0重大更新，新增搜索和过滤数据、合并单元格、自动宽度功能，欢迎下载体验

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)一起使用。

2022年终狂欢火热进行中，全场产品超低价，DHTMLX全系产品享8.8折！了解更多活动详情，欢迎访问网咨询在线客服。

甘特图控件交流群：764148812    欢迎进群交流讨论

年终狂欢季，全场产品，限时特惠，立即了解详情！

标签：

来源：慧都