[发明专利]一种大数据前端表格组件的实现方法

说明书

本发明涉及计算机应用前端渲染技术领域，具体提供了一种大数据前端表格组件的实现方法。与现有技术相比，本发明的一种大数据前端表格组件的实现方法，使用relative配合absolute布局方式，通过滚动事件触发重新渲染机制，具体有如下步骤：(1)初始化表格组件的容器；(2)渲染表头；(3)渲染表体；(4)判断当前表格所应渲染的数据区域。本发明在window10操作系统，Chrome浏览器版本81.0.4044.129(正式版本)(64位)的环境下，百万行级数据量，百级数据列场景下，使用十分流畅，具有良好的推广价值。

技术领域

本发明涉及计算机应用前端渲染技术领域，具体提供一种大数据前端表格组件的实现方法。

背景技术

在企业级应用的日常开发中，对表格这种既能直观展现数据、支持数据按照指标排序，又能导出为Excel文件格式的前端组件甚为偏爱。在业务系统、分析系统和审计安全系统中处处可见表格的用处。

然而w3c的table表格，由于其本身技术实现，在layout阶段牵涉到大量的节点计算，导致展现同等的信息，比div布局效率要低。在项目研发过程中经常遇到由于表格数据量过大，导致这个页面渲染性能下降，严重的可能使某些浏览器(IE)直接假死，严重影响用户体验。再参考业界主流的表格组件，如flexigrid、datatables、element-ui的table等组件，发现都存在渲染瓶颈问题，并且难以通过封装或优化框架源码解决。

发明内容

本发明是针对上述现有技术的不足，提供一种实用性强的大数据前端表格组件的实现方法。

本发明解决其技术问题所采用的技术方案是：

一种大数据前端表格组件的实现方法，该方法使用relative配合absolute布局方式，通过滚动事件触发重新渲染机制，具体有如下步骤：

(1)初始化表格组件的容器；

(2)渲染表头；

(3)渲染表体；

(4)判断当前表格所应渲染的数据区域。

进一步的，在进行步骤(1)之前，先配置好左侧固定列与右侧固定列用于满足锁列的需求，固定n行表格头部用于满足表格锁行的需求，并定义合计列用于满足自动计算合计值的需求。

作为优选，使用leftColumns、rightColumns配置项定义左侧固定列与右侧固定列用于满足锁列的需求，通过topRows配置项定义头部固定n行用于满足表格锁行的需求通过showSumRow、sumRows配置项定义合计列用于满足自动计算合计值的需求。

进一步的，在步骤(1)中，挂载表头容器$headers和表体容器$viewport，其postion属性全部设置为relative。

进一步的，在步骤(2)中，使用thRowSpan配置项定义多行表头用于满足表头跨行跨列的需求。

进一步的，据配置项的thRowSpan定义，调用initColumnBoxInfos方法，组织一个名为columnBoxInfos的数组对象，所述数组对象保存着每个表头单元格的布局信息。

作为优选，所述布局信息为top、bottom、left和right，这些值是根据单元格跨行、跨列计算得来，根据这些信息进行absolute布局，完成表头的展现。

进一步的，在步骤(3)中，表格内容区域$canvas宽度为列宽合计值，高度为表格数据行数乘以表格行高，行高通过配置项rowHeight传入，默认25个像素的高度。