CN111353272A - 一种web表格的信息显示方法和装置 - Google Patents

Abstract

本发明公开了一种web表格的信息显示方法，用于基于handsontable构建的web表格上，包括：判断当前包含评论信息的单元格是否为合并单元格；若为合并单元格则计算当前合并单元格的合并列数量，获取不包含第一个单元格的合并列宽度之和，根据所述宽度之和重置当前评论定位值；若非合并单元格则设置评论定位值为当前数据。该方法有效解决在使用handsontable插件模拟Excel表格功能时，使用到的Excel评论框显示位置在合并单元格和多tab页情况下出现的显示异常，影响操作的问题。

Description

一种web表格的信息显示方法和装置

技术领域

本发明涉及信息显示领域，尤其涉及一种web表格的信息显示方法和装置。

背景技术

Handsontable是一个基于JavaScript/HTML5的页面端表格式交互插件，可用于各类技术，如React、Angular和Vue，可很容易与任何数据源集成并提供了各种有用的功能，如数据绑定、验证、排序和强大的上下文菜单，它可以处理大量数据而无需担心性能问题，兼容各类主流浏览器。Handsontable实现了HTML页面中的表格编辑功能，具备仿Excel的编辑效果，因此是当前非常流行的web应用程序的UI组件。通过其可加载显示表格内容，能够支持合并项、统计、行列拖动等。同时，支持对加载后的表格页面的多种处理：添加/删除行/列，合并单元格等操作。

但是，如附图7和9所示，在使用handsontable插件模拟Excel表格功能时，在位于合并单元格或多tab页状态下的单元格的评论框显示位置会出现显示异常，影响操作。

发明内容

本发明针对现有技术中的不足，提供了一种web表格的信息显示方法，用于基于handsontable构建的web表格上，包括：判断当前包含评论信息的单元格是否为合并单元格；若为合并单元格则计算当前合并单元格的合并列数量，获取不包含第一个单元格的合并列宽度之和，根据所述宽度之和重置当前评论定位值；若非合并单元格则设置评论定位值为当前数据。

优选的，web表格的信息显示方法还包括：判断当前容器是否为tab页，如果是tab页则将当前评论定位值减去当前容器前方所有tab页宽度之和作为更新后的评论定位值，否则直接设置评论定位值为当前数据。

优选的，若表格当前所处环境不是tab页，将原评论框左边距设置为第二评论框位置，所述第二评论框位置为原评论框左边距增加所述所有列宽之和。

优选的，若表格当前所处环境为tab页，获取其它tab页数量和各tab页宽度，根据其它tab页宽度和来调整原评论框左边距。

优选的，所述步骤获取不包含第一个单元格的合并列宽度之和根据所述宽度之和重置当前评论定位值，包括在预设时间后获取位于当前单元格所在列之前的所有列宽之和。

优选的，web表格的信息显示方法还包括：通过对各单元格的样式属性进行拆分后，确定包含评论样式属性的单元格。

优选的，所述步骤通过对各单元格的样式属性进行拆分后确定包含评论样式属性的单元格，具体包括：

声明handsontable的单元格移入移出事件；

在移入事件内获取鼠标移入单元格的属性值，并对所述属性值进行拆分；

判断所述属性值是否包含有评论信息属性，如果包含则判断当前包含评论信息的单元格是否为合并单元格。

优选的，web表格的信息显示方法还包括对表格所选区域边框进行渲染处理，具体包括：

获取所选区域坐标；

根据所述所选区域坐标，循环遍历获取所述所选区域内所有单元格坐标；

根据传入参数，判断设置边框类型，所述边框类型包括无边框类型、所有边框类型和外边框类型。；

根据边框类型选择对应边框处理模式对所选区域内所有单元格坐标进行渲染。

本发明还公开了一种web表格的信息显示装置，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述web表格的信息显示方法的步骤。

本发明还公开了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述web表格的信息显示方法的步骤。

本发明通过根据tab页和非tab页两种环境分别选择对web表格中可能存在的评论框显示位置异常的情况进行判断和修改，可有效解决在使用handsontable插件模拟Excel表格功能时，使用到的Excel评论框显示位置在合并单元格和多tab页情况下出现的显示异常，影响操作的问题。

本发明的附加方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1为本发明一实施例公开的web表格的信息显示方法的流程示意图。

图2为本发明一实施例公开的步骤S21的具体流程示意图。

图3为本发明一实施例公开的未在tab页时单元格评论框显示错误的示意图。

图4为本发明一实施例公开的未在tab页时单元格评论框显示正确的示意图。

图5为本发明一实施例公开的在tab页中单元格评论框显示错误的示意图。

图6为本发明一实施例公开的在tab页中单元格评论框显示正确的示意图。

图7为现有技术中的web表格的边框处理方法流程示意图。

图8-10为本发明一实施例公开的的步骤S14分别在无边框类型、所有边框类型和外边框类型设置下的流程示意图。

图11为本发明一实施例公开的web表格的边框处理装置模块示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例的附图，对本发明实施例的技术方案进行清楚、完整地描述。显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例。基于所描述的本发明的实施例，本领域普通技术人员在无需创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

在本发明中，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”、“固定”等术语应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以根据具体情况理解上述术语在本发明中的具体含义。

在本发明中，除非另有明确的规定和限定，第一特征在第二特征之“上”或之“下”可以包括第一和第二特征直接接触，也可以包括第一和第二特征不是直接接触而是通过它们之间的另外的特征接触。而且，第一特征在第二特征“之上”、“上方”和“上面”包括第一特征在第二特征正上方和斜上方，或仅仅表示第一特征水平高度高于第二特征。第一特征在第二特征“之下”、“下方”和“下面”包括第一特征在第二特征正下方和斜下方，或仅仅表示第一特征水平高度小于第二特征。

除非另作定义，此处使用的技术术语或者科学术语应当为本发明所属领域内具有一般技能的人士所理解的通常意义。本发明专利申请说明书以及权利要求书中使用的“第一”、“第二”以及类似的词语并不表示任何顺序、数量或者重要性，而只是用来区分不同的组成部分。同样，“一个”或者“一”等类似词语也不表示数量限制，而是表示存在至少一个。

附图1为本发明实施例公开的一种可用于基于handsontable构建的web表格的处理方法，可以用于处理表格信息显示，可解决在使用handsontable插件模拟Excel功能时，在合并单元格和多tab页情况下使用到的表格评论框显示位置出现异常的问题，如附图1所示，该方法具体可包括：

步骤S21，通过对各单元格的样式属性进行拆分后，确定包含评论样式属性的单元格。如附图2所示，步骤S21可具体包括：

S211，声明handsontable的单元格移入移出事件；

S212，在移入事件内，获取鼠标移入单元格的属性值，并对所述属性值进行拆分；

S213，判断所述属性值是否包含有评论信息属性，如果包含则判断当前包含评论信息的单元格是否为合并单元格。

具体的，首先声明handsontable的单元格移入移出事件。在移入事件内，获取鼠标移入单元格的css样式属性className属性值，并对其通过使用字符串拆分方法split进行拆分。

判断当前className属性值中，是否包含表示评论内容的htCommentCell样式属性。其中htCommentCell是一种className样式名，在设置有评论内容的单元格中出现，单元格有这标识就是单元格标识有评论内容，鼠标移入该单元格范围就会显示小弹窗。

S22，判断当前包含评论信息的单元格是否为合并单元格。对前述步骤S21获取的具有评论内容的单元格进行筛选，判断这些单元格是否是合并单元格。

S23，若为合并单元格则计算当前合并单元格的合并列数量，获取不包含第一个单元格的合并列宽度之和，根据所述宽度之和重置当前评论定位值。

若是合并单元格，在预设时间后获取位于当前单元格所在列之前的所有列宽之和。具体的，可调用延迟函数setTimeOut进行延迟处理，其中setTimeOut用于在方法触发时，延迟一秒后执行后续逻辑，当然也可自主设置延迟时间。然后执行回调函数进行回调处理，即延迟时间过去后，执行的方法逻辑封装。具体的，该回调处理为：

获取当前单元格所在列前面的所有列的宽度之和colWidths。可调用handsontable中的getColWidth可以获取各列的宽度。

为评论框重新设置评论定位值。具体的，获取评论框当前的左边缘即css定位属性中的left属性值，将当前left属性值与colWidths值之和作为用来更新该当前left属性值的新left属性值。通过上述方法步骤即可将如附图3所示的单元格评论框显示异常的状态转换为如附图4所示的单元格评论框显示正常状态。

在本实施例中，由于web表格还有可能被应用于各类tab页中，因此还可包括下述步骤：

步骤S24：判断当前容器是否为tab页，如果是tab页则将当前评论定位值减去当前容器前方所有tab页宽度之和作为更新后的评论定位值，否则直接设置评论定位值为当前数据。其可包括：

如果表格当前所处环境为tab页，获取其它tab页数量和各tab页宽度，根据其它tab页宽度和来调整原评论框左边距。

具体的，如果web表格当前所处环境在tab页内部，则计算获取当前单元格的新左边缘left属性值left₁，作为该单元格的left属性值:

left₁＝left₀+colWidths-(tabCount-1)*tabWidth；

其中left₀为原左边缘left属性值，colWidths为当前单元格所在列前面的所有列的宽度之和，tabCount本单元格所在的tab页的序号，tabWidth为本单元格所在的tab页的宽度。

如果表格当前所处环境不是tab页，则将原评论框左边距设置为第二评论框位置，所述第二评论框位置为原评论框左边距增加所述所有列宽之和。

通过上述方法步骤即可将如附图5所示的位于tab页中的单元格评论框显示异常的状态转换为如附图6所示的单元格评论框显示正常状态。

S25，若非合并单元格则直接设置评论定位值为当前数据。如果不是合并单元格，则表示单元格评论框显示正常，无需对评论定位值进行调整。

本实施例通过根据tab页和非tab页两种环境分别选择对web表格中可能存在的评论框显示位置异常的情况进行判断和修改，可有效解决在使用handsontable插件模拟Excel表格功能时，使用到的Excel评论框显示位置在合并单元格和多tab页情况下出现的显示异常，影响操作的问题。

如附图7所述，实施例还公开了另一种信息显示方法，还包括对web表格的边框处理，用于基于handsontable构建的web表格上的边框显示，具体还包括：

S11，获取所选区域坐标。具体的，获取由鼠标等输入设备选取的当前选区坐标，即起始行、起始列、结束行、结束列相应坐标。

S12，根据所述所选区域坐标，循环遍历获取所述所选区域内所有单元格坐标。通过根据所获得的所选区域坐标，循环遍历获取当前选区内所有单元格坐标(row,col)，其中row为行索引、col为列索引，记为当前选区内所有单元格坐标的集合数组srand_arr_data。

S13，根据传入参数，判断设置边框类型。其中，边框类型可以包括无边框类型、所有边框类型和外边框类型。

S14，根据边框类型选择对应边框处理模式对所选区域内所有单元格坐标进行渲染。

当所选边框类型为无边框类型，则需对所选区域进行无边框处理，即在所选区域内去除所有边框线，如附图8所示，具体处理步骤如下：

步骤S1411，若设置为无边框类型，则循环遍历所选区域内所有单元格坐标的集合数组，获取各单元格属性。循环遍历前述步骤S12中获得的集合数组srand_arr_data，获取每个单元格的class样式className，其中class为程序开发中前端开发使用的HMLT元素的样式集合属性，className为class集合中的一个样式属性。

步骤S1412，依据空格对所选区域进行拆分，获取单元格第一属性集合数组。其中单元格第一属性集合数组为使用字符串拆分方法split，对每个单元格的class属性通过split方法拆分后的得到的数组cell_className。

步骤S1413，判断所述第一属性集合数组里是否存在边框显示要素，若存在则删除所述第一属性集合数组内对应参数。

判断第一属性集合数组cell_className里是否存在表示单元格右边框显示要素的htAllBorder-right或表示单元格下边框显示要素的htAllBorder-bottom，若存在，则在第一属性集合数组cell_className里置为空；然后调用String.trim方法为数组去除空值。

步骤S1414，将第一属性集合数组以空格为间隔进行字符串拼接，获取第二属性集合数组。

具体的，将第一属性集合数组cell_className用join方法，以空格为间隔，进行字符串拼接，得到第二属性集合数组new_cell_class。

步骤S1415，根据所述第二属性集合数组为单元格设置新显示样式。拼接成功后，调用handsontable中的设置单元格属性方法setCellMetaObject，为单元格设置新样式。

在本实施例中，该步骤S4还包括边界判断，具体如下：

步骤S1416，若遍历的单元格的行索引等于起始行，则获取前一行属性值，若存在边框显示要素则置为空，并重新设置单元格样式；

步骤S1417，若遍历的单元格的列索引等于起始列，则获取前一列的属性值，若存在边框显示要素则置为空，并重新设置单元格样式；根据新设置单元格格式对表格进行刷新渲染。

具体的，若遍历的单元格的row等于起始行，则获取row-1行的className，若存在单元格下边框显示要素htAllBorder-bottom，则置为空，并重新设置单元格样式；若遍历的单元格的col等于起始列，则获取col-1列的className，若存在右边框显示要素htAllBorder-right，则置为空，并重新设置单元格样式。最后，调用handsontable1刷新表格方法render(),刷新整个web表格。

当所选边框类型为所有边框类型，则需对所选区域内的所有框线进行处理，即在所选区域内给所有单元格设置边框线，如附图9所示，具体处理步骤如下:

步骤S1421，若设置为所有边框类型，则循环遍历所选区域内所有单元格坐标的第一集合数组srand_arr_data。

步骤S1422，获取各单元格当前的样式属性，获取当前单元格的class字符串样式集合now_class。

步骤S1423，对各单元格的样式属性中增加单元格右边框显示要素和下边框显示要素，设置后形成第二属性集合数组。即在now_class基础上，增加右边框显示要素htAllBorder-right和单元格下边框显示要素htAllBorder-bottom。

步骤S1424，根据所述第二属性集合数组为单元格设置新显示样式。调用handsontable设置属性方法setCellMeta,为单元格设置className。

在本实施例中，上述当所选边框类型为所有边框类型时，还可包括边界判断步骤，具体如下：

步骤S1425，若遍历的单元格的行索引等于起始行，则判断前一行单元格是否存在下边框显示要素，若不存在则为此单元格重新设置单元格样式；

步骤S1426，若遍历的单元格的列索引等于起始列，则判断前一列单元格是否存在右边框显示要素，若不存在则为此单元格重新设置单元格样式；

根据新设置单元格格式对表格进行刷新渲染。

具体的，如果遍历单元格的row等于起始行，则判断row-1行中处于同一列的单元格是否存在单元格下边框显示要素htAllBorder-bottom，若不存在则为此单元格设置此class属性。如果遍历col等于起始列，判断col-1列处于同一行的单元格是否存在单元格右边框显示要素htAllBorde-right，若不存在，为此单元格设置此class属性；调用handsontable1刷新表格方法render(),刷新整个web表格。

如附图10所示，当所选边框类型为外边框类型，其中该外边框类型为当前选区的上下左右四条边界设置框线，但在选区内部不设置框线，则步骤S4还可包括如下具体步骤:

步骤S1431，若设置为外边框类型，则循环遍历所选区域内所有单元格坐标的的第一集合数组srand_arr_data，获取各单元格属性。

步骤S1432，如果单元格行索引等于结束行且列索引等于结束列时，若行索引等于起始行则为前一行同列单元格设置下边框显示要素，若列索引等于起始列则为前一列同行单元格设置右边框显示要素。具体的，遍历单元格的Row等于结束行并且col等于结束列时，若row等于起始行，为row-1行位于同一列的单元格设置单元格下边框显示要素htAllBorder-bottom；若col等于起始列，为col-1列位于同一行的单元格设置单元格右边框显示要素htAllBorder-right。

步骤S1433，如果单元格行索引等于结束行但列索引不等于结束列时，若列索引等于起始列则为前一列同行单元格设置右边框显示要素，若行索引等于起始行则为前一行同列单元格设置下边框显示要素。具体的，若row等于结束行且col等于起始列，则为col-1列位于同一行的单元格设置右边框显示要素htAllBorder-right；若row等于起始行，则为row-1行位于同一列的单元格设置下边框显示要素htAllBorder-bottom。

步骤S1434，如果单元格行索引不等于结束行，若行索引等于起始行则为前一行同列单元格设置下边框显示要素，若列索引等于起始列则为前一列同行单元格设置右边框显示要素。具体的，若row等于起始行，为row-1行位于同一列单元格设置下边框显示要素htAllBorder-bottom；若col等于起始列，为col-1列位于同一行单元格设置右边框显示要素htAllBorder-right。

在本实施例中，上述边框线可选择1像素或者2像素。上述web表格可以是tab设置页表格，可顺利解决设置页出现渲染大量单元格边框样式时出现的页面卡顿现象。

通过将上述实施例公开的各web表格的边框处理方法封装起来根据需求调用，解决了目前在前端VUE框架中引入handsontable插件，在web平台应用中使用handsontable插件模拟Excel功能，当需批量渲染大量单元格边框样式时，时常出现的渲染速度太慢、影响用户体验甚至严重时导致平台崩溃的问题，通过上述web表格的边框处理方法可进行快速渲染，优化用户体验，提高表格使用效率。

如附图11所示，本发明还提供了一种web表格的信息显示装置，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上述各实施例中描述的web表格的边框处理方法的各个步骤。

所述web表格的信息显示装置可包括但不仅限于，处理器、存储器。本领域技术人员可以理解，所述示意图仅仅是web表格的信息显示装置的示例，并不构成对web表格的信息显示装置设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述web表格的信息显示装置设备还可以包括输入输出设备、网络接入设备、总线等。

所称处理器可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，所述处理器是所述web表格的信息显示装置设备的控制中心，利用各种接口和线路连接整个web表格的信息显示装置设备的各个部分。

所述存储器可用于存储所述计算机程序和/或模块，所述处理器通过运行或执行存储在所述存储器内的计算机程序和/或模块，以及调用存储在存储器内的数据，实现所述web表格的边框处理设备的各种功能。所述存储器可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等此外，存储器可以包括高速随机存取存储器，还可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)、至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。

所述web表格的边框处理方法如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个web表格的边框处理方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

总之，以上所述仅为本发明的较佳实施例，凡依本发明申请专利范围所作的均等变化与修饰，皆应属本发明专利的涵盖范围。

Claims (10)

1.一种web表格的信息显示方法，用于基于handsontable构建的web表格上，其特征在于，包括：

判断当前包含评论信息的单元格是否为合并单元格；

若为合并单元格则计算当前合并单元格的合并列数量，获取不包含第一个单元格的合并列宽度之和，根据所述宽度之和重置当前评论定位值；

若非合并单元格则设置评论定位值为当前数据。

2.根据权利要求1所述的web表格的信息显示方法，其特征在于，还包括：

判断当前容器是否为tab页，如果是tab页则将当前评论定位值减去当前容器前方所有tab页宽度之和作为更新后的评论定位值，否则直接设置评论定位值为当前数据。

3.根据权利要求2所述的web表格的信息显示方法，其特征在于，所述步骤还包括：若表格当前所处环境不是tab页，将原评论框左边距设置为第二评论框位置，所述第二评论框位置为原评论框左边距增加所述所有列宽之和。

4.根据权利要求3所述的web表格的信息显示方法，其特征在于，所述步骤还包括：若表格当前所处环境为tab页，获取其它tab页数量和各tab页宽度，根据其它tab页宽度和来调整原评论框左边距。

5.根据权利要求4所述的web表格的信息显示方法，其特征在于，所述步骤获取不包含第一个单元格的合并列宽度之和根据所述宽度之和重置当前评论定位值，包括：在预设时间后获取位于当前单元格所在列之前的所有列宽之和。

6.根据权利要求1-5任一所述的web表格的信息显示方法，其特征在于，还包括：通过对各单元格的样式属性进行拆分后，确定包含评论样式属性的单元格。

7.根据权利要求6所述的web表格的信息显示方法，其特征在于，所述步骤通过对各单元格的样式属性进行拆分后确定包含评论样式属性的单元格，具体包括：

声明handsontable的单元格移入移出事件；

在移入事件内获取鼠标移入单元格的属性值，并对所述属性值进行拆分；

判断所述属性值是否包含有评论信息属性，如果包含则判断当前包含评论信息的单元格是否为合并单元格。

8.根据权利要求7所述的web表格的信息显示方法，其特征在于，还包括对表格所选区域边框进行渲染处理，具体包括：

获取所选区域坐标；

根据所述所选区域坐标，循环遍历获取所述所选区域内所有单元格坐标；

根据传入参数，判断设置边框类型，所述边框类型包括无边框类型、所有边框类型和外边框类型。；

根据边框类型选择对应边框处理模式对所选区域内所有单元格坐标进行渲染。

9.一种web表格的信息显示装置，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于：所述处理器执行所述计算机程序时实现如权利要求1-8任一所述方法的步骤。

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现如权利要求1-8任一所述方法的步骤。

Images