CN111898049A - 一种表格实现方法、装置、计算机终端设备及存储介质 - Google Patents

Abstract

本发明公开了一种表格实现方法，包括：获取表格内容主体的高宽信息及行列的高宽信息；其中，所述表格由div标签生成；确定所述表格内容主体当前可见区域的表格行列数量；创建锚点行并赋予初始高度值，以及创建锚点列并赋予初始宽度值；对所述锚点行和所述锚点列监听div滚动事件，以获取滚动距离值；根据所述滚动距离值更新所述可见区域需展示的行列内容；及，对所述可见区域需展示的行列内容进行渲染。本发明通过div标签更容易计算出可见区域，目标区域的边界值，结合不同盒子模型特性能高效实现复杂表格的dom节点的渲染能力，性能和效率更高；div标签能避免table标签模拟的固定列功能在行列宽高计算的工作量，计算量小。

Description

一种表格实现方法、装置、计算机终端设备及存储介质

技术领域

本发明涉及web前端技术领域，尤其涉及一种表格实现方法、表格实现装置、计算机终端设备及计算机可读存储介质。

背景技术

随着Internet的快速发展，web上的数据信息成为一个巨大的信息仓库，web用于展示更多信息可以帮助人们更快速准确的查找到目标信息，加快信息获取的速度，提升工作的效率，尤其是toB行业的信息系统经常采用表格来展示大量数据信息并在此基础上集成企业独特的业务功能来提升企业工作人员的效率，web技术依赖于浏览器渲染的性能，表格展示大数据量内容，尤其是每个表格的列单元格展示的内容可以是文字，也可以是图片，甚至是更复杂业务处理的自定义单元格内容的时候往往表格存在渲染卡顿，操作卡顿等性能问题，对于企业而言，时间和效率就是企业的生命线，随着企业竞争的压力加强，任何一点优势都将影响企业的存续，如何高效的展示大数据量的表格需求也成为一个竞争优势点。

由于现代浏览器对table标签有特定算法实现加速绘制，做了额外工作保证对于静态内容，页面结构的稳定性，在实现二级表头、列分支、行列计算、行列合并等功能具有天然优势，所以目前web表格组件实现基本采用table标签实现表格功能，而表格展示大量数据很刚需的一个业务功能就是对关键信息的表头，列需要进行固定，在滚动查看其他信息一直保持在可见区域。

然而，table实现的表格，在支持固定的表头和固定列内容的问题上，性能并不理想，table标签实现固定内容只能通过渲染多个行列内容，高度宽度一致的表格，通过位置层叠去实现固定内容的浮动效果，但渲染多个表格的问题在于，为了保持基本层级和浮动层级的表格内容宽高一致，相同内容的dom节点需要重复渲染多个，在浏览器解析html时，渲染页面的性能上有多余的损耗。对于现代浏览器，在基础的业务应用中不存在可明显感知的性能缺陷，但在需要同时展示大量数据，列数大、行数大、单元格内容复杂的场景时，将产生明显的性能瓶颈。

发明内容

本发明目的在于，提供一种表格实现方法、表格实现装置、计算机终端设备及计算机可读存储介质，以实现具有高性能、高效率渲染能力的配置了固定列的大数据量表格。

本发明实施例提供一种表格实现方法，包括：

获取表格内容主体的高宽信息及行列的高宽信息；其中，所述表格由div标签生成；

确定所述表格内容主体当前可见区域的表格行列数量；

创建锚点行并赋予初始高度值，以及创建锚点列并赋予初始宽度值；

对所述锚点行和所述锚点列监听div滚动事件，以获取滚动距离值；

根据所述滚动距离值更新所述可见区域需展示的行列内容；

对所述可见区域需展示的行列内容进行渲染。

在某一个实施例中，所述创建锚点行并赋予初始高度值，具体为：

确定所述表格内容主体的第一行和最后一行；

分别对所述表格内容主体的第一行和最后一行创建锚点行，并分别赋予初始高度值；其中，所述第一行的锚点行和所述最后一行的锚点行均用于持续监听div纵向滚动事件；

所述创建锚点列并赋予初始宽度值，具体为：

确定所述表格内容主体的第一列和最后一列；

分别对所述表格内容主体的第一列和最后一列创建锚点列，并分别赋予初始宽度值；其中，所述第一列的锚点列和所述最后一列的锚点列均用于持续监听div横向滚动事件。

在某一个实施例中，在所述对所述可见区域需展示的行列内容进行渲染之后，还包括：

计算所述第一行的锚点行和所述最后一行的锚点行的相对高度值，并重新赋予高度值；

在检测到完成一次纵向滚动操作后，执行表格渲染的整体变更动作；

计算所述第一列的锚点列和所述最后一列的锚点列的相对宽度值，并重新赋予宽度值；

在检测到完成一次横向滚动操作后，执行表格渲染的整体变更动作。

在某一个实施例中，在所述计算所述第一列的锚点列和所述最后一列的锚点列的相对宽度值，并重新赋予宽度值之后，在所述在检测到完成一次横向滚动操作后，执行表格渲染的整体变更动作之前，还包括：

根据所述相对宽度值和预设的列宽算法，计算所述表格中所有单元格的更新宽度值，并根据所述更新宽度值更新当前所述表格中所有单元格的宽度；

其中，所述预设的列宽算法具体为：

分别获取所述表格整体的宽度信息、表头的宽度信息及所述表格内容主体的宽度信息；

重复以下步骤，直至计算完所述表格中所有单元格的更新宽度值：

遍历所述表头区域及所述表格主体内容区域的内部子节点，创建汇总结构，并区分所述子节点的类型是所述表头区域还是所述内容主体区域；

获取单元格的合并数量标记，并记录到所述汇总结构体对应下标位置的合并数量标记中；

获取单元格宽度；

若所述单元格宽度存在，并且所述合并数量标记等于1，则格式化处理所述单元格，并将所述单元格的宽度值记录到所述汇总结构体对应下标位置的单元格宽度字段中；

得到所有的所述汇总结构体对应下标位置的单元格宽度字段后，进行更新单元格操作，并计算需要显示的行列单元格序号，以渲染可见区域单元格，以及设置单元格宽度值，给不同区域单元格添加符合所述汇总结构体的样式标记。

本发明实施例还提供一种表格实现装置，包括：

高宽信息获取模块，用于获取表格内容主体的高宽信息及行列的高宽信息；其中，所述表格由div标签生成；

确定模块，用于确定所述表格内容主体当前可见区域的行列数量；

锚点创建模块，用于创建锚点行并赋予初始高度值，以及创建锚点列并赋予初始宽度值；

监听模块，用于对所述锚点行和所述锚点列监听div滚动事件，以获取滚动距离值；

更新模块，用于根据所述滚动距离值更新所述可见区域需展示的行列内容；

渲染模块，用于对所述可见区域需展示的行列内容进行渲染。

在某一个实施例中，所述锚点创建模块创建锚点行并赋予初始高度值，具体为：

确定所述表格内容主体的第一行和最后一行；

分别对所述表格内容主体的第一行和最后一行创建锚点行，并分别赋予初始高度值；其中，所述第一行的锚点行和所述最后一行的锚点行均用于持续监听div纵向滚动事件；

所述锚点创建模块创建锚点列并赋予初始宽度值，具体为：

确定所述表格内容主体的第一列和最后一列；

分别对所述表格内容主体的第一列和最后一列创建锚点列，并分别赋予初始宽度值；其中，所述第一列的锚点列和所述最后一列的锚点列均用于持续监听div横向滚动事件。

在某一个实施例中，所述装置还包括第一计算模块，用于计算所述第一行的锚点行和所述最后一行的锚点行的相对高度值，并重新赋予高度值；以及，计算所述第一列的锚点列和所述最后一列的锚点列的相对宽度值，并重新赋予宽度值；

所述更新模块还用于在检测到完成一次纵向滚动操作后，执行表格渲染的整体变更动作；以及，在检测到完成一次横向滚动操作后，执行表格渲染的整体变更动作。

在某一个实施例中，所述装置还包括第二计算模块，用于根据所述相对宽度值和预设的列宽算法，计算所述表格中所有单元格的更新宽度值；

所述更新模块还用于根据所述更新宽度值更新当前所述表格中所有单元格的宽度；

其中，所述预设的列宽算法具体为：

分别获取所述表格整体的宽度信息、表头的宽度信息及所述表格内容主体的宽度信息；

重复以下步骤，直至计算完所述表格中所有单元格的更新宽度值：

遍历所述表头区域及所述表格主体内容区域的内部子节点，创建汇总结构，并区分所述子节点的类型是所述表头区域还是所述内容主体区域；

获取单元格的合并数量标记，并记录到所述汇总结构体对应下标位置的合并数量标记中；

获取单元格宽度；

若所述单元格宽度存在，并且所述合并数量标记等于1，则格式化处理所述单元格，并将所述单元格的宽度值记录到所述汇总结构体对应下标位置的单元格宽度字段中；

得到所有的所述汇总结构体对应下标位置的单元格宽度字段后，进行更新单元格操作，并计算需要显示的行列单元格序号，以渲染可见区域单元格，以及设置单元格宽度值，给不同区域单元格添加符合所述汇总结构体的样式标记。

本发明实施例还提供一种计算机终端设备，包括一个或多个处理器和存储器。存储器与所述处理器耦接，用于存储一个或多个程序；当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上述任意一个实施例所述的表格实现方法。

本发明实施例还提供一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如上述任意一个实施例所述的表格实现方法。

本发明实施例的表格实现方法中，通过获取表格内容主体的高宽信息及行列的高宽信息；其中，所述表格由div标签生成；确定所述表格内容主体当前可见区域的表格行列数量；创建锚点行并赋予初始高度值，以及创建锚点列并赋予初始宽度值；对所述锚点行和所述锚点列监听div滚动事件，以获取滚动距离值；根据所述滚动距离值更新所述可见区域需展示的行列内容；以及，对所述可见区域需展示的行列内容进行渲染。相较于现有技术，本发明具有如下有益效果：

1、不需要通过多个table去实现表头固定、表尾固定、首列固定、尾列固定等需求功能，减少页面渲染相同dom节点的时间损耗，提升页面性能。

2、渲染大数据量的表格内容时候，只渲染当前可见区域内的dom内容，避免不可见内容过早渲染，占用浏览器引擎造成的资源占用，提升页面性能。

3、动态渲染浮动固定内容和复杂单元格组成的表格时，不需要对浮动固定内容和动态内容变更影响单元格宽高进行太多对齐计算，只需要计算动态内容渲染后，最终列宽的整体计算，减少了计算量。

附图说明

为了更清楚地说明本发明的技术方案，下面将对实施方式中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明某一实施例提供的表格实现方法的流程示意图；

图2是本发明某一实施例提供的表格实现方法中采用div标签生成的表格结构示意图；

图3是本发明某一实施例提供的表格实现方法的流程示意图；

图4是本发明某一实施例提供的表格实现方法的流程示意图；

图5是本发明某一实施例提供的表格实现方法中纵向虚拟滚动的流程示意图；

图6是本发明又一实施例提供的表格实现方法中行向虚拟滚动的流程示意图；

图7是本发明某一实施例提供的表格实现方法的流程示意图；

图8是本发明某一实施例提供的预设的列宽算法的流程示意图；

图9是本发明某一实施例提供的表格实现装置的结构示意图；

图10是本发明某一实施例提供的计算机终端设备的结构示意图。

具体实施方式

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

应当理解，文中所使用的步骤编号仅是为了方便描述，不对作为对步骤执行先后顺序的限定。

应当理解，在本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。

术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

由于现代浏览器对table标签有特定算法实现加速绘制，做了额外工作以保证对于静态内容、页面结构的稳定性，在实现二级表头、列分支、行列计算、行列合并等功能具有天然优势，所以目前web表格组件实现基本采用table标签实现表格功能，而表格展示大量数据很刚需的一个业务功能就是对关键信息的表头、列需要进行固定，在滚动查看其他信息一直保持在可见区域。

而table实现的表格，目前存在以下问题：

1、table标签实现的表格在展示大量数据，需要固定某些重要行、列信息的时候，只能通过渲染多个重复的table标签实现，渲染数据量大，具有复杂内容的行列单元格场景，随着行列条目的增多，固定行列与基础表格要实现行列宽高对齐，需要进行大量计算，容易引发行列对不齐的缺陷问题，并且渲染时间会越来越长，渲染性能会持续下降；

2、浏览器持续占用，渲染性能下降，在性能较差的设备中还会引发web页面崩溃的问题。

为解决以上问题，请参阅图1，本发明实施例提供一种表格实现方法，该方法包括以下步骤：

S10、获取表格内容主体的高宽信息及行列的高宽信息；其中，所述表格由div标签生成；

S20、确定所述表格内容主体当前可见区域的表格行列数量；

S30、创建锚点行并赋予初始高度值，以及创建锚点列并赋予初始宽度值；

S40、对所述锚点行和所述锚点列监听div滚动事件，以获取滚动距离值；

S50、根据所述滚动距离值更新所述可见区域需展示的行列内容；

S60、对所述可见区域需展示的行列内容进行渲染。

其中，步骤S10中的表格由div标签生成。div属于web前端技术领域的内容，是层叠样式表中的定位技术，全称Division，即为划分，有时可以称其为图层。<div>标签常用于组合块级元素，以便通过样式表来对这些元素进行格式化，是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。<div>可定义文档中的分区或节(division/section)，

<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

请结合图2，在某一具体实施例中，本发明实施例通过以下结构伪代码，来设计一个用div标签实现的表格，模拟table标签的展示样式的工具：

需要说明的是，本发明实施例使用html基础div标签实现表格的结构和样式，关键点是使用div模拟所有cell单元格结构，设置display:flex样式给每个单元格内容设置弹性盒子布局，利用弹性盒子特性保证同主轴方向上，单元格列高自动计算保持单元格行对齐。

此外，div还模拟表头(head)、行(row)、主体(body)结构标记，用于区分解析层面单元格的表现形式。实际渲染层面上，行列单元格用div全部渲染，但由于表头(head)、行(row)、主体(body)等不同区域结构体内部单元格，div计算宽度机制不同，为此，本发明实施例通过层级结构是否设置合并列或者合并行，计算出合并区域的宽度再赋值给单元格，保证整体单元格组合紧凑并展示出表格的结构形式。

本实施例中，通过div标签实现表格能避免table标签在浏览器引擎上的默认约束，更灵活自由地实现用户需要的展示效果。

请参阅图3，在某一个实施例中，步骤S30中，所述创建锚点行并赋予初始高度值，具体为：

S31、确定所述表格内容主体的第一行和最后一行；

S32、分别对所述表格内容主体的第一行和最后一行创建锚点行，并分别赋予初始高度值。其中，所述第一行的锚点行和所述最后一行的锚点行均用于持续监听div纵向滚动事件。

所述创建锚点列并赋予初始宽度值，具体为：

S33、确定所述表格内容主体的第一列和最后一列；

S34、分别对所述表格内容主体的第一列和最后一列创建锚点列，并分别赋予初始宽度值。其中，所述第一列的锚点列和所述最后一列的锚点列均用于持续监听div横向滚动事件。

本实施例中，在确定表格内容主体当前可见区域的表格行列数量后，分别确定表格内容主体的第一行a、最后一行b、第一列c及最后一列d。

然后分别对第一行a和最后一行b创建锚点行，并分别赋予初始高度值；分别对第一列c和最后一列d创建锚点列，并分别赋予初始宽度值。

当表格内容纵向滚动时，通过a锚点行、b锚点行获取scrollTop距离值，其中，scrollTop距离值是由浏览器依据盒子节点计算出的纵向滚动距离。再通过判断纵向滚动距离是增加值还是减少值，来计算可视区域要展示的行数据序列，然后进行行数据渲染。

当表格内容横向滚动时，通过c锚点列、d锚点列获取scrollLeft距离值，其中，scrollLeft距离值是浏览器依据盒子节点计算出的横向滚动距离。再通过判断横向滚动距离是增加值还是减少值，来计算可视区域要展示的列内容，然后进行列数据渲染。

请参阅图4，在某一个实施例中，在所述步骤S60对所述可见区域需展示的行列内容进行渲染之后，还包括以下步骤：

S71、计算所述第一行的锚点行和所述最后一行的锚点行的相对高度值，并重新赋予高度值；

S72、在检测到完成一次纵向滚动操作后，执行表格渲染的整体变更动作。

本实施例中，a锚点行、b锚点行的高度值可变，是为了处理滚动内容正好处于行内作为分界，用于精确计算整体相对位置，并且使浏览器滚动条符合实际高度。

S81、计算所述第一列的锚点列和所述最后一列的锚点列的相对宽度值，并重新赋予宽度值；

S82、在检测到完成一次横向滚动操作后，执行表格渲染的整体变更动作。

本实施例中，c锚点列、d锚点列的宽度值可变，是为了处理滚动内容正好处于行内作为分界，用于精确计算整体相对位置，并且补充表格整体盒子模型剩余宽度，使浏览器滚动条符合实际宽的相对大小。

为了提高表格渲染的性能，本发明实施例利用虚拟渲染，只渲染用户可见区域内容，避免不可见区域的内容提前渲染占用浏览器资源，原理是给表格上层主体结构(table-body区域)设置溢出内容可滚动属性，浏览器出现滚动条，通过监听某个节点的滚动事件来获取节点滚动距离，滚动距离依据溢出内容进行计算，决定可见区域要渲染的数据节点内容，计算整体展示宽度，然后挂在节点，完成一轮表格渲染展示。

具体地，本发明实施例设计一种可见区域的虚拟滚动，来节省大数据量下多余dom渲染损耗，提升复杂表格渲染效率的系统。其中，可见区域的虚拟滚动包括纵向虚拟滚动和行向虚拟滚动。为更好地理解本发明的发明构思，以下结合一具体实施例进行说明。

针对纵向虚拟滚动，请结合图5，具体流程为：

(1)获取表格内容主体(table-body)的高度值；

(2)获取表格行(table-row)的高度值；

(3)计算内容主体高度下，可见区域需要渲染的表格行数量；

(4)为表格主体渲染数据行第一行a和最后一行b创建锚点行，及分别赋予初始高度值，并对a锚点行、b锚点行监听div滚动事件；其中，a锚点行、b锚点行不参与销毁持续监听；

(5)表格内容纵向滚动，通过a锚点行、b锚点行获取scrollTop距离值；其中，scrollTop距离值是由浏览器依据盒子节点计算出的纵向滚动距离；

(6)判断纵向滚动距离是增加值还是减少值，来计算可见区域要展示的行数据序列，然后进行行数据渲染；

(7)计算a锚点行、b锚点行之间的相对高度值，并重新设置；其中，a锚点行、b锚点行的高度值可变，是为了处理滚动内容正好处于行内作为分界，用于精确计算整体相对位置，并且使浏览器滚动条符合实际高度。

(8)完成一次滚动操作后，表格渲染的整体变更动作。

针对行向虚拟滚动，请结合图6，具体流程为：

(1)获取表格内容主体(table-body)的宽度值；

(2)获取表格列(table-cell)的宽度值；

(3)计算内容主体高度下，可见区域需要渲染的表格列数量；

(4)表格主体渲染数据行第一列c和最后一行d创建锚点列，及分别赋予初始宽度值，并对c锚点列、d锚点列监听div滚动事件；其中，c锚点列、d锚点列不参与销毁持续监听；

(5)表格内容横向滚动，通过c锚点列、d锚点列获取scrollLeft距离值；其中，scrollLeft距离值是由浏览器依据盒子节点计算出的横向滚动距离；

(6)判断横向滚动距离是增加值还是减少值，来计算可见区域要展示的列内容，然后进行列数据渲染；

(7)计算c锚点列、d锚点列之间的相对宽度值，并重新设置；其中，c锚点列、d锚点列的宽度值可变，是为了处理滚动内容正好处于行内作为分界，用于精确计算整体相对位置，并且补充表格整体盒子模型剩余宽度，使浏览器滚动条符合实际宽的相对大小；

(8)完成一次滚动操作后，表格渲染的整体变更动作。

现有技术中，使用table标签实现的表格在处理固定列功能上，需要通过多个重复table结构去实现表头固定、表尾固定、首列固定、尾列固定等需求功能，导致页面渲染相同dom节点的时间损耗大。为此，本发明实施例设计一种仅通过列宽计算就能完成固定列功能，避免出现行列宽高对不齐问题的算法。

请参阅图7，在某一个实施例中，在步骤S81所述计算所述第一列的锚点列和所述最后一列的锚点列的相对宽度值，并重新赋予宽度值之后，在步骤S82所述在检测到完成一次横向滚动操作后，执行表格渲染的整体变更动作之前，还包括以下步骤：

S83、根据所述相对宽度值和预设的列宽算法，计算所述表格中所有单元格的更新宽度值，并根据所述更新宽度值更新当前所述表格中所有单元格的宽度。

其中，所述预设的列宽算法具体为：

分别获取所述表格整体的宽度信息、表头的宽度信息及所述表格内容主体的宽度信息；

重复以下步骤，直至计算完所述表格中所有单元格的更新宽度值：

遍历所述表头区域及所述表格主体内容区域的内部子节点，创建汇总结构，并区分所述子节点的类型是所述表头区域还是所述内容主体区域；

获取单元格的合并数量标记，并记录到所述汇总结构体对应下标位置的合并数量标记中；

获取单元格宽度；

若所述单元格宽度存在，并且所述合并数量标记等于1，则格式化处理所述单元格，并将所述单元格的宽度值记录到所述汇总结构体对应下标位置的单元格宽度字段中；

得到所有的所述汇总结构体对应下标位置的单元格宽度字段后，进行更新单元格操作，并计算需要显示的行列单元格序号，以渲染可见区域单元格，以及设置单元格宽度值，给不同区域单元格添加符合所述汇总结构体的样式标记。

本实施例中，div标签实现固定列因为不像table标签需要多个table模拟，行内容没有被拆分，div盒子模型可以自动计算，所以减少很多计算量，只需要列宽计算即可。

具体包括如下流程：

(1)div标签设置display:flex，position:sticky样式结构；

(2)监听锚点节点的滚动事件；

(3)监听表格可视区域resize事件；

(4)实现单元格宽度(cell.width)改变更新算法；

其中，请参阅图8，所述预设的列宽算法(cell.width改变更新算法)包括如下步骤：

a、传入表格整体宽度(containerWidth)、表头区域(head)以及主体内容区域节点(body)；

b、遍历表头区域(head)，主体内容区域(body)内部子节点(cells)，创建汇总结构(allCells)；

c、判断子节点类型(cell.type)是表头区域或内容主体区域；

d、获取单元格合并数量标记(cell.colspan)，记录到汇总结构体对应下标位置的合并数量标记中(allCells[i].colspan)；

e、获取单元格宽度(cell.width)；若单元格宽度(cell.width)存在并且合并数量标记(colspan＝1)等于1，格式化处理单元格并记录宽度值到汇总结构体对应下标位置的单元格宽度字段中(allCells[i].colWidth)；

f、得到所有信息后进行更新单元格(cell)操作，计算需要显示的行列单元格序号渲染可视区域单元格，设置单元格宽度值，给不同区域单元格添加符合结构体的样式标记；

g、重复b-f步骤操作，直至处理完所有div单元格的宽度计算，并根据计算的更新宽度值更新当前所述表格中所有单元格的宽度。

综上，企业级系统查看大数据量表格是刚需，固定重要信息列、单页过100展示、可编辑单元格表格，这是绕不开到业务需求，基于市场现有的实现标准，性能不能满足。本发明采用新的方案，包括通过div标签实现基础单元格cell结合弹性性盒子模型(display:flex)和宽度计算算法进行表格结构模拟的实现方法，以及通过div标签加创建锚点结构辅助计算虚拟渲染方式来实现高性能的表格来展示大数据量数据，避免现有技术的缺陷，实现性能的提升，比如现有技术table标签实现的表格，渲染需要3s，本发明就可以压缩到接近1s，大大提高企业产品竞争力。具体为：

1、本发明设计一个用div标签实现的表格，模拟table标签的展示样式的工具。通过div标签实现表格结构和功能，而不是使用目前主流talbe标签的实现方案，避免浏览器对table标签的默认渲染规则处理，实现上更灵活，对用户的需求具有更强的扩展能力。

2、本发明设计一种可见区域的虚拟滚动，来节省大数据量下多余dom渲染损耗，提升复杂表格渲染效率的系统。在处理表格虚拟渲染问题上，使用div标签结构体同样具有高于现有行业实现方案的灵活性，灵活使用div标签补充展示结构来添加事件和进行样式处理，丰富度上也高于table标签展现能力。

3、本发明设计一种仅通过列宽计算就能完成固定列功能的算法，避免了行业常规使用table标签实现的表格在处理固定列功能上，通过多个重复table结构去渲染导致出现行列宽高对不齐的性能问题。

因此，相较于现有技术，本发明具有如下有益效果：

1、通过div标签实现表格能避免table标签在浏览器引擎上的默认约束，更灵活自由的实现用户需要的展示效果。

2、div标签更容易计算出可见区域，目标区域的边界值，结合不同盒子模型特性能高效实现复杂表格的dom节点的渲染能力，性能和效率更高。

3、div标签能避免table标签模拟的固定列功能在行列宽高计算的工作量，通过有效的算法仅仅控制列宽计算就完成展示一致，性能更高的表格固定列效果。

请参阅图9，本发明实施例还提供一种表格实现装置100，包括高宽信息获取模块110、确定模块120、锚点创建模块130、监听模块140、更新模块150和渲染模块160。

高宽信息获取模块110用于获取表格内容主体的高宽信息及行列的高宽信息；其中，所述表格由div标签生成。确定模块120用于确定所述表格内容主体当前可见区域的行列数量。锚点创建模块130用于创建锚点行并赋予初始高度值，以及创建锚点列并赋予初始宽度值。监听模块140用于对所述锚点行和所述锚点列监听div滚动事件，以获取滚动距离值。更新模块150用于根据所述滚动距离值更新所述可见区域需展示的行列内容。渲染模块160用于对所述可见区域需展示的行列内容进行渲染。

在某一个实施例中，所述锚点创建模块130创建锚点行并赋予初始高度值，具体为：

确定所述表格内容主体的第一行和最后一行；

分别对所述表格内容主体的第一行和最后一行创建锚点行，并分别赋予初始高度值；其中，所述第一行的锚点行和所述最后一行的锚点行均用于持续监听div纵向滚动事件。

所述锚点创建模块130创建锚点列并赋予初始宽度值，具体为：

确定所述表格内容主体的第一列和最后一列；

分别对所述表格内容主体的第一列和最后一列创建锚点列，并分别赋予初始宽度值；其中，所述第一列的锚点列和所述最后一列的锚点列均用于持续监听div横向滚动事件。

在某一个实施例中，所述装置还包括第一计算模块，用于计算所述第一行的锚点行和所述最后一行的锚点行的相对高度值，并重新赋予高度值；以及，计算所述第一列的锚点列和所述最后一列的锚点列的相对宽度值，并重新赋予宽度值。

所述更新模块150还用于在检测到完成一次纵向滚动操作后，执行表格渲染的整体变更动作；以及，在检测到完成一次横向滚动操作后，执行表格渲染的整体变更动作。

在某一个实施例中，所述装置还包括第二计算模块，用于根据所述相对宽度值和预设的列宽算法，计算所述表格中所有单元格的更新宽度值。

所述更新模块150还用于根据所述更新宽度值更新当前所述表格中所有单元格的宽度。

其中，所述预设的列宽算法具体为：

分别获取所述表格整体的宽度信息、表头的宽度信息及所述表格内容主体的宽度信息；

重复以下步骤，直至计算完所述表格中所有单元格的更新宽度值：

遍历所述表头区域及所述表格主体内容区域的内部子节点，创建汇总结构，并区分所述子节点的类型是所述表头区域还是所述内容主体区域；

获取单元格的合并数量标记，并记录到所述汇总结构体对应下标位置的合并数量标记中；

获取单元格宽度；

若所述单元格宽度存在，并且所述合并数量标记等于1，则格式化处理所述单元格，并将所述单元格的宽度值记录到所述汇总结构体对应下标位置的单元格宽度字段中；

得到所有的所述汇总结构体对应下标位置的单元格宽度字段后，进行更新单元格操作，并计算需要显示的行列单元格序号，以渲染可见区域单元格，以及设置单元格宽度值，给不同区域单元格添加符合所述汇总结构体的样式标记。

关于表格实现装置100的具体限定可以参见上文中对于表格实现方法的限定，在此不再赘述。上述表格实现装置100中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

请参阅图10，本发明实施例还提供一种计算机终端设备，包括一个或多个处理器和存储器。存储器与所述处理器耦接，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如任意一个实施例中的表格实现方法。

处理器用于控制该计算机终端设备的整体操作，以完成上述的表格实现方法的全部或部分步骤。存储器用于存储各种类型的数据以支持在该计算机终端设备的操作，这些数据例如可以包括用于在该计算机终端设备上操作的任何应用程序或方法的指令，以及应用程序相关的数据。该存储器可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，例如静态随机存取存储器(Static Random Access Memory，简称SRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，简称EEPROM)，可擦除可编程只读存储器(Erasable Programmable Read-Only Memory，简称EPROM)，可编程只读存储器(Programmable Read-Only Memory，简称PROM)，只读存储器(Read-Only Memory，简称ROM)，磁存储器，快闪存储器，磁盘或光盘。

在一示例性实施例中，计算机终端设备可以被一个或多个应用专用集成电路(Application Specific 1ntegrated Circuit，简称AS1C)、数字信号处理器(DigitalSignal Processor，简称DSP)、数字信号处理设备(Digital Signal Processing Device,简称DSPD)、可编程逻辑器件(Programmable Logic Device，简称PLD)、现场可编程门阵列(Field Programmable Gate Array，简称FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述的表格实现方法，并达到如上述方法一致的技术效果。

在另一示例性实施例中，还提供了一种包括程序指令的计算机可读存储介质，该程序指令被处理器执行时实现如任意一个实施例中的表格实现方法的步骤。例如，该计算机可读存储介质可以为上述包括程序指令的存储器，上述程序指令可由计算机终端设备的处理器执行以完成上述的表格实现方法，并达到如上述方法一致的技术效果。

以上所述是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围。

Claims (10)

1.一种表格实现方法，其特征在于，包括：

获取表格内容主体的高宽信息及行列的高宽信息；其中，所述表格由div标签生成；

确定所述表格内容主体当前可见区域的表格行列数量；

创建锚点行并赋予初始高度值，以及创建锚点列并赋予初始宽度值；

对所述锚点行和所述锚点列监听div滚动事件，以获取滚动距离值；

根据所述滚动距离值更新所述可见区域需展示的行列内容；

对所述可见区域需展示的行列内容进行渲染。

2.根据权利要求1所述的表格实现方法，其特征在于，

所述创建锚点行并赋予初始高度值，具体为：

确定所述表格内容主体的第一行和最后一行；

分别对所述表格内容主体的第一行和最后一行创建锚点行，并分别赋予初始高度值；其中，所述第一行的锚点行和所述最后一行的锚点行均用于持续监听div纵向滚动事件；

所述创建锚点列并赋予初始宽度值，具体为：

确定所述表格内容主体的第一列和最后一列；

分别对所述表格内容主体的第一列和最后一列创建锚点列，并分别赋予初始宽度值；其中，所述第一列的锚点列和所述最后一列的锚点列均用于持续监听div横向滚动事件。

3.根据权利要求2所述的表格实现方法，其特征在于，在所述对所述可见区域需展示的行列内容进行渲染之后，还包括：

计算所述第一行的锚点行和所述最后一行的锚点行的相对高度值，并重新赋予高度值；

在检测到完成一次纵向滚动操作后，执行表格渲染的整体变更动作；

计算所述第一列的锚点列和所述最后一列的锚点列的相对宽度值，并重新赋予宽度值；

在检测到完成一次横向滚动操作后，执行表格渲染的整体变更动作。

4.根据权利要求3所述的表格实现方法，其特征在于，在所述计算所述第一列的锚点列和所述最后一列的锚点列的相对宽度值，并重新赋予宽度值之后，在所述在检测到完成一次横向滚动操作后，执行表格渲染的整体变更动作之前，还包括：

根据所述相对宽度值和预设的列宽算法，计算所述表格中所有单元格的更新宽度值，并根据所述更新宽度值更新当前所述表格中所有单元格的宽度；

其中，所述预设的列宽算法具体为：

分别获取所述表格整体的宽度信息、表头的宽度信息及所述表格内容主体的宽度信息；

重复以下步骤，直至计算完所述表格中所有单元格的更新宽度值：

遍历所述表头区域及所述表格主体内容区域的内部子节点，创建汇总结构，并区分所述子节点的类型是所述表头区域还是所述内容主体区域；

获取单元格的合并数量标记，并记录到所述汇总结构体对应下标位置的合并数量标记中；

获取单元格宽度；

若所述单元格宽度存在，并且所述合并数量标记等于1，则格式化处理所述单元格，并将所述单元格的宽度值记录到所述汇总结构体对应下标位置的单元格宽度字段中；

得到所有的所述汇总结构体对应下标位置的单元格宽度字段后，进行更新单元格操作，并计算需要显示的行列单元格序号，以渲染可见区域单元格，以及设置单元格宽度值，给不同区域单元格添加符合所述汇总结构体的样式标记。

5.一种表格实现装置，其特征在于，包括：

高宽信息获取模块，用于获取表格内容主体的高宽信息及行列的高宽信息；其中，所述表格由div标签生成；

确定模块，用于确定所述表格内容主体当前可见区域的行列数量；

锚点创建模块，用于创建锚点行并赋予初始高度值，以及创建锚点列并赋予初始宽度值；

监听模块，用于对所述锚点行和所述锚点列监听div滚动事件，以获取滚动距离值；

更新模块，用于根据所述滚动距离值更新所述可见区域需展示的行列内容；

渲染模块，用于对所述可见区域需展示的行列内容进行渲染。

6.根据权利要求5所述的表格实现装置，其特征在于，所述锚点创建模块创建锚点行并赋予初始高度值，具体为：

确定所述表格内容主体的第一行和最后一行；

分别对所述表格内容主体的第一行和最后一行创建锚点行，并分别赋予初始高度值；其中，所述第一行的锚点行和所述最后一行的锚点行均用于持续监听div纵向滚动事件；

所述锚点创建模块创建锚点列并赋予初始宽度值，具体为：

确定所述表格内容主体的第一列和最后一列；

分别对所述表格内容主体的第一列和最后一列创建锚点列，并分别赋予初始宽度值；其中，所述第一列的锚点列和所述最后一列的锚点列均用于持续监听div横向滚动事件。

7.根据权利要求6所述的表格实现装置，其特征在于，所述装置还包括第一计算模块，用于计算所述第一行的锚点行和所述最后一行的锚点行的相对高度值，并重新赋予高度值；以及，计算所述第一列的锚点列和所述最后一列的锚点列的相对宽度值，并重新赋予宽度值；

所述更新模块还用于在检测到完成一次纵向滚动操作后，执行表格渲染的整体变更动作；以及，在检测到完成一次横向滚动操作后，执行表格渲染的整体变更动作。

8.根据权利要求7所述的表格实现装置，其特征在于，所述装置还包括第二计算模块，用于根据所述相对宽度值和预设的列宽算法，计算所述表格中所有单元格的更新宽度值；

所述更新模块还用于根据所述更新宽度值更新当前所述表格中所有单元格的宽度；

其中，所述预设的列宽算法具体为：

分别获取所述表格整体的宽度信息、表头的宽度信息及所述表格内容主体的宽度信息；

重复以下步骤，直至计算完所述表格中所有单元格的更新宽度值：

遍历所述表头区域及所述表格主体内容区域的内部子节点，创建汇总结构，并区分所述子节点的类型是所述表头区域还是所述内容主体区域；

获取单元格的合并数量标记，并记录到所述汇总结构体对应下标位置的合并数量标记中；

获取单元格宽度；

若所述单元格宽度存在，并且所述合并数量标记等于1，则格式化处理所述单元格，并将所述单元格的宽度值记录到所述汇总结构体对应下标位置的单元格宽度字段中；

得到所有的所述汇总结构体对应下标位置的单元格宽度字段后，进行更新单元格操作，并计算需要显示的行列单元格序号，以渲染可见区域单元格，以及设置单元格宽度值，给不同区域单元格添加符合所述汇总结构体的样式标记。

9.一种计算机终端设备，其特征在于，包括：

一个或多个处理器；

存储器，与所述处理器耦接，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1至4任一项所述的表格实现方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至4任一项所述的表格实现方法。

Images