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

DHTMLX Spreadsheet是用纯JavaScript编写的开源电子表格小部件，可让您快速在网页上添加类似于Excel的可编辑数据表。高度可定制的JavaScript电子表格组件，具有优雅的Material样式，可安全、方便地编辑和格式化数据。本文给大家讲解DHTMLX Gantt的任务内容如何显示，欢迎大家下载最新版试用体验。

DHTMLX Spreadsheet正版试用下载https://www.evget.com/product/4251/download

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

以上便是DHTMLX Spreadsheet 5.0 带来的最新更新，欢迎有表格开发的客户前往下载体验

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

php 合并重复数据合并单元格,通过js合并表格重复出现的数据
js必须等表格加载完成后调用. 效果如图: js代码: function uniteTable(tableId,colLength) { //colLength-- 需要合并单元格的列1开始 var ...
php相同数据合并单元格,jQuery_基于jQuery的合并表格中相同文本的相邻单元格的代码，ONE 已经生成的数据表格大致 - phpStudy...
基于jQuery的合并表格中相同文本的相邻单元格的代码 ONE 已经生成的数据表格大致内容如下: 地区地区商品代码商品名称数量有效期至距效期(月) 产品批号规格单位条形码广东深圳 ...
Python操作高版本Excel文件：颜色、边框、合并单元格
本文主要颜色Python扩展库openpyxl的一些基本用法,包括创建工作簿.选择活动工作表.写入单元格数据,设置单元格字体颜色.边框样式,合并单元格等等. from random import ra ...
html相同数据合并单元格合并单元格,Javascript合并表格中具有相同内容单元格示例...
效果图: HTML代码: 表格相同内容合并合并前: a 1 2 3 4 5 a 1 2 3 4 6 a 2 3 3 4 b 3 4 6 7 b 3 5 6 7 cc 2 3 4 5 cc 2 3 5 ...
SpreadJS 类Excel表格控件 - V12 新特性详解
我们很高兴的宣布:纯前端类Excel表格控件 - SpreadJS 正式推出了 V12 新版本,此次的新版本中包含了诸多重量级的功能和来自客户的新需求,如对形状和富文本的支持,也有新增的图表类型,还有 ...
表格控件对比_小白如何开发出苏宁易购同款表格协同文档系统？
SpreadJS是一款基于 HTML5 的纯前端电子表格控件,兼容 450 种以上的 Excel 公式,具有 "高性能.跨平台.与 Excel 高度兼容"的产品特性,满足 Web ...
php表格合并_phpword 合并单元格的坑
今天发现以前合并单元格并没有生效,经过研究发现已下结论:表格的样式宽度支持四种 NIL.TWIP.AUTO.PERCENT 分别代表无宽度.TWIP word基本单位.自动.百分比百分比是 1% 代 ...
jacob 模板生成word文档表格（合并单元格以及各种表格样式）、图片
一.将 jacob-1.18-M2-x64.dll 文件放在jdk bin目录下二.项目中导入jacob.jar 包三.设置好模板内容四.测试代码 /*** 主方法测试* @param arg ...
怎么在html的表格中加筛选,excel中表头合并单元格的筛选
EXCEL中表头合并,怎么实现筛选数据? 亲,如下面的动画演示,选中第5行,点击菜单"数据","筛驯. excel中有合并单元格的行怎么才能筛选整个表格其中直接对合并过 ...

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

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

最新文章

热门文章