应用于渲染横向大量数据跨列合并表格的方法及系统与流程

1.本发明涉及文本处理

技术领域

：
：，具体地，涉及应用于渲染横向大量数据跨列合并表格的方法及系统，更为具体地，涉及应用于现代浏览器流畅渲染横向大量数据有跨列合并场景表格的实现方法。

背景技术

：
：：2.在后端数据无法做分页，数据单次传给前端渲染，在数据量大时，浏览器渲染负担重，会造成浏览器交互卡顿。在vue这类数据驱动更新的前端框架中，它们可通过修改数据来更新视图，给数据增加了双向响应式处理，在大量数据的场景下性能更加堪忧。3.目前主流方案是通过虚拟滚动解决此类问题，即非全量渲染，通过获取滚动轴位置，计算浏览器可视区域内及附近的数据，做部分渲染，适用于横向、纵向大量数据表格的渲染，但不支持横向表有跨列合并的表格。4.专利文献cn110096507a(申请号：201910337757.2)公开了一种页面复杂表格渲染的方法，包括初始化用户表格数据，获取用户终端发送的页面表格的编辑请求，编辑请求包括表格编辑需求和参数设置；根据跨行属性的设置值和跨列属性的设置值合并或拆分单元格；根据文字属性的设置值在该单元格内显示的文字属性的设置值对应的文字；根据单元格的标记的设置值渲染表格的选中状态，根据选中状态确定需要合并或拆分的单元格的位置。根据结构化数据渲染表格的行、列及单元格合并状态，并通过合并单元格和拆分单元格，对结构化数据的属性进行修改，使得表格可以适应复杂的业务逻辑，保持页面的显示与业务需求的表格一致。技术实现要素：5.针对现有技术中的缺陷，本发明的目的是提供一种应用于渲染横向大量数据跨列合并表格的方法及系统。6.根据本发明提供的一种应用于渲染横向大量数据跨列合并表格的方法，包括：7.步骤s1：定义表格数据结构，包括表头以及表身，表头由表头单元列表格构成，表身由数据单元格构成；8.步骤s2：基于叶子表头单元格默认宽度计算顶层表头单元格初始宽度；9.步骤s3：基于可视区域宽度、横向冗余宽度，定义横向滚动事件，横轴滚动时计算可视区域要显示的顶层表头单元格集合；10.步骤s4：基于可视区域要显示的顶层表头单元格集合获得待渲染数据单元格集合，并根据可视区域要显示的顶层表头单元格集合、待渲染数据单元格集合生成html标签，基于html标签完成渲染；11.步骤s5：渲染后获得顶层表头真实宽度，利用顶层表头真实宽度对顶层表头单元格初始宽度进行修正。12.优选地，所述步骤s1采用：13.所述表头单元格是树结构，能够表示任意跨列合并的表头；14.所述数据单元格是键值对结构，是报表的数据承载。15.优选地，所述步骤s2采用：[0016][0017]其中，leafwidthi表示第i个叶子表头单元格默认宽度；width表示顶层表头单元格初始宽度。[0018]优选地，所述步骤s3采用：[0019][0020]其中，scrollleft表示横向滚动距离；widthn表示第n个顶层表头单元格初始宽度；viewwidth表示可视区域宽度；redundancywidth表示横向冗余宽度；f(n,m)表示符合条件的可视区域内显示的顶层表头单元格集合。[0021]优选地，所述步骤s4采用：[0022]步骤s4.1：基于可视区域内显示的顶层表头单元格集合，生成待渲染顶层表头单元格集合；[0023]步骤s4.2：根据待渲染顶层表头单元格集合，生成待渲染叶子表头单元格集合；[0024]步骤s4.3：待渲染叶子表头单元格集合与对应数据单元格集合进行键值匹配，生成与之关联的待渲染数据单元格集合；[0025]步骤s4.4：根据待渲染顶层表头单元格集合、待渲染数据单元格集合生成html标签；[0026]步骤s4.5：将生成的html标签到添加到可视区域，可视区域外边距设置为scrollleft-redundancywidth，完成渲染。[0027]根据本发明提供的一种应用于渲染横向大量数据跨列合并表格的系统，包括：[0028]模块m1：定义表格数据结构，包括表头以及表身，表头由表头单元列表格构成，表身由数据单元格构成；[0029]模块m2：基于叶子表头单元格默认宽度计算顶层表头单元格初始宽度；[0030]模块m3：基于可视区域宽度、横向冗余宽度，定义横向滚动事件，横轴滚动时计算可视区域要显示的顶层表头单元格集合；[0031]模块m4：基于可视区域要显示的顶层表头单元格集合获得待渲染数据单元格集合，并根据可视区域要显示的顶层表头单元格集合、待渲染数据单元格集合生成html标签，基于html标签完成渲染；[0032]模块m5：渲染后获得顶层表头真实宽度，利用顶层表头真实宽度对顶层表头单元格初始宽度进行修正。[0033]优选地，所述模块m1采用：[0034]所述表头单元格是树结构，能够表示任意跨列合并的表头；[0035]所述数据单元格是键值对结构，是报表的数据承载。[0036]优选地，所述模块m2采用：[0037][0038]其中，leafwidthi表示第i个叶子表头单元格默认宽度；width表示顶层表头单元格初始宽度。[0039]优选地，所述模块m3采用：[0040][0041]其中，scrollleft表示横向滚动距离；widthn表示第n个顶层表头单元格初始宽度；viewwidth表示可视区域宽度；redundancywidth表示横向冗余宽度；f(n,m)表示符合条件的可视区域内显示的顶层表头单元格集合。[0042]优选地，所述模块m4采用：[0043]模块m4.1：基于可视区域内显示的顶层表头单元格集合，生成待渲染顶层表头单元格集合；[0044]模块m4.2：根据待渲染顶层表头单元格集合，生成待渲染叶子表头单元格集合；[0045]模块m4.3：待渲染叶子表头单元格集合与对应数据单元格集合进行键值匹配，生成与之关联的待渲染数据单元格集合；[0046]模块m4.4：根据待渲染顶层表头单元格集合、待渲染数据单元格集合生成html标签；[0047]模块m4.5：将生成的html标签到添加到可视区域，可视区域外边距设置为scrollleft-redundancywidth，完成渲染。[0048]与现有技术相比，本发明具有如下的有益效果：本发明通过扩展表头单元格的数据结构，使其具备表达跨列合并表格的能力，提出计算可视区域内跨列表头宽度算法；基于此算法，实现横向跨列数据部分渲染的技术效果，是一种全新的、高效的应对横向大量数据跨列合并表格流畅渲染的实现方法。附图说明[0049]通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：[0050]图1为表头单元格、数据单元格数据结构示意图。[0051]图2为表头单元格、数据单元格代码部分截图。[0052]图3为可视区域内显示的顶层表头单元格示意图。具体实施方式[0053]下面结合具体实施例对本发明进行详细说明。以下实施例将有助于本领域的技术人员进一步理解本发明，但不以任何形式限制本发明。应当指出的是，对本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变化和改进。这些都属于本发明的保护范围。[0054]针对上述现有方案的缺陷，本发明提供了一种应用于渲染横向大量数据跨列合并表格的方法及系统，解决的技术问题包括：采用通用规格的数据结构定义，兼容普通横向列表；扩展通用规格的数据结构定义，增加跨列的横向列表支持；设计获取横向跨列表格可视区域内单元格集合的算法；在上述算法基础上实浏览器跨列横向大量数据表格的流畅渲染。[0055]实施例1[0056]根据本发明提供的一种应用于渲染横向大量数据跨列合并表格的方法，包括：[0057]步骤1：定义表格数据结构，包括表头、表身两部分，表头由表头单元列表格构成，表身由数据单元格构成；[0058]步骤1.1：表头单元格是树结构，可表达任一跨列合并的表头，如图1、图2所示；[0059]步骤1.2：数据单元格是键值对结构，是报表的数据承载，如1、图2所示；[0060]步骤2：补充辅助数据；[0061]步骤2.1：设置叶子表头单元格默认宽度leafwidth；[0062]步骤2.2：计算顶层表头单元格初始宽度，其宽度为其叶子表头单元格默认宽度之和，如公式(1)，其中，width为顶层表头单元格初始宽度，leafwidthi是第i个叶子表头单元格默认宽度；[0063][0064]其中，叶子表头单元格与顶层表头单元格数据结构相同，都是表头单元格(如图2所示，是嵌套结构)；顶层表头单元格是叶子表头单元格的根节点，叶子表头单元格为顶层表头单元格的最底层节点；一个顶层表头单元格可有n(≥1)个叶子表头单元格。[0065]步骤3：虚拟滚动参数设置；[0066]步骤3.1：定义可视区域宽度viewwidth、横向冗余宽度redundancywidth；[0067]步骤3.2：基于可视区域宽度viewwidth、横向冗余宽度redundancywidth，定义横向滚动事件，横轴滚动时计算可视区域要显示的顶层表头单元格集合，计算方法如公式(2)，计算示意图如图3所示；[0068][0069]其中，scrollleft表示横向滚动距离；widthn表示第n个顶层表头单元格初始宽度；viewwidth表示可视区域宽度；redundancywidth表示横向冗余宽度；f(n,m)表示符合条件的可视区域内显示的顶层表头单元格集合。[0070]步骤4：报表渲染[0071]步骤4.1：计算表格宽度tablewith，其值为所有顶层单元格宽度之和，计算公式如公式(3)，其中widthi表示第i个顶层表头单元格宽度；[0072][0073]步骤4.2:通过公式(2)可得出可视区域内的顶层表头单元格集合，生成待渲染顶层表头单元格集合，即f(n,m)，第n到m个顶层表头单元格；[0074]步骤4.3：根据待渲染顶层表头单元格集合，生成待渲染叶子表头单元格集合，即f(n,m)得到的顶层表头单元格集合的所有叶子表头单元格集合；[0075]步骤4.4：待渲染叶子表头单元格集合与对应数据单元格集合进行键值匹配，生成与之关联的待渲染数据单元格集合，即删掉了在可视区域外的字段的数据单元格集合；[0076]步骤4.5：根据待渲染顶层表头单元格集合、待渲染数据单元格集合生成html标签；[0077]步骤4.6：将生成的html标签到添加到可视区域(实体节点)，可视区域外边距设置为scrollleft-redundancywidth，完成渲染。[0078]步骤5：渲染完成后宽度修正；[0079]步骤5.1：完成渲染后获取顶层表头真实宽度，利用顶层表头真实宽度修正顶层表头单元格初始宽度，滚动次数越多，表格整体宽度及滚动百分比越趋近于真实效果。[0080]根据本发明提供的一种应用于渲染横向大量数据跨列合并表格的系统，包括：[0081]模块1：定义表格数据结构，包括表头、表身两部分，表头由表头单元列表格构成，表身由数据单元格构成；[0082]模块1.1：表头单元格是树结构，可表达任一跨列合并的表头，如图1、图2所示；[0083]模块1.2：数据单元格是键值对结构，是报表的数据承载，如1、图2所示；[0084]模块2：补充辅助数据；[0085]模块2.1：设置叶子表头单元格默认宽度leafwidth；[0086]模块2.2：计算顶层表头单元格初始宽度，其宽度为其叶子表头单元格默认宽度之和，如公式(1)，其中，width为顶层表头单元格初始宽度，leafwidthi是第i个叶子表头单元格默认宽度；[0087][0088]其中，叶子表头单元格与顶层表头单元格数据结构相同，都是表头单元格(如图2所示，是嵌套结构)；顶层表头单元格是叶子表头单元格的根节点，叶子表头单元格为顶层表头单元格的最底层节点；一个顶层表头单元格可有n(≥1)个叶子表头单元格。[0089]模块3：虚拟滚动参数设置；[0090]模块3.1：定义可视区域宽度viewwidth、横向冗余宽度redundancywidth；[0091]模块3.2：基于可视区域宽度viewwidth、横向冗余宽度redundancywidth，定义横向滚动事件，横轴滚动时计算可视区域要显示的顶层表头单元格集合，计算方法如公式(2)，计算示意图如图3所示；[0092][0093]其中，scrollleft表示横向滚动距离；widthn表示第n个顶层表头单元格初始宽度；viewwidth表示可视区域宽度；redundancywidth表示横向冗余宽度；f(n,m)表示符合条件的可视区域内显示的顶层表头单元格集合。[0094]模块4：报表渲染[0095]模块4.1：计算表格宽度tablewith，其值为所有顶层单元格宽度之和，计算公式如公式(3)，其中widthi表示第i个顶层表头单元格宽度；[0096][0097]模块4.2:通过公式(2)可得出可视区域内的顶层表头单元格集合，生成待渲染顶层表头单元格集合，即f(n,m)，第n到m个顶层表头单元格；[0098]模块4.3：根据待渲染顶层表头单元格集合，生成待渲染叶子表头单元格集合，即f(n,m)得到的顶层表头单元格集合的所有叶子表头单元格集合；[0099]模块4.4：待渲染叶子表头单元格集合与对应数据单元格集合进行键值匹配，生成与之关联的待渲染数据单元格集合，即删掉了在可视区域外的字段的数据单元格集合；[0100]模块4.5：根据待渲染顶层表头单元格集合、待渲染数据单元格集合生成html标签；[0101]模块4.6：将生成的html标签到添加到可视区域(实体节点)，可视区域外边距设置为scrollleft-redundancywidth，完成渲染。[0102]模块5：渲染完成后宽度修正；[0103]模块5.1：完成渲染后获取顶层表头真实宽度，利用顶层表头真实宽度修正顶层表头单元格初始宽度，滚动次数越多，表格整体宽度及滚动百分比越趋近于真实效果。[0104]本领域技术人员知道，除了以纯计算机可读程序代码方式实现本发明提供的系统、装置及其各个模块以外，完全可以通过将方法步骤进行逻辑编程来使得本发明提供的系统、装置及其各个模块以逻辑门、开关、专用集成电路、可编程逻辑控制器以及嵌入式微控制器等的形式来实现相同程序。所以，本发明提供的系统、装置及其各个模块可以被认为是一种硬件部件，而对其内包括的用于实现各种程序的模块也可以视为硬件部件内的结构；也可以将用于实现各种功能的模块视为既可以是实现方法的软件程序又可以是硬件部件内的结构。[0105]以上对本发明的具体实施例进行了描述。需要理解的是，本发明并不局限于上述特定实施方式，本领域技术人员可以在权利要求的范围内做出各种变化或修改，这并不影响本发明的实质内容。在不冲突的情况下，本技术的实施例和实施例中的特征可以任意相互组合。当前第1页12当前第1页12

技术特征：

1.一种应用于渲染横向大量数据跨列合并表格的方法，其特征在于，包括：步骤s1：定义表格数据结构，包括表头以及表身，表头由表头单元列表格构成，表身由数据单元格构成；步骤s2：基于叶子表头单元格默认宽度计算顶层表头单元格初始宽度；步骤s3：基于可视区域宽度、横向冗余宽度，定义横向滚动事件，横轴滚动时计算可视区域要显示的顶层表头单元格集合；步骤s4：基于可视区域要显示的顶层表头单元格集合获得待渲染数据单元格集合，并根据可视区域要显示的顶层表头单元格集合、待渲染数据单元格集合生成html标签，基于html标签完成渲染；步骤s5：渲染后获得顶层表头真实宽度，利用顶层表头真实宽度对顶层表头单元格初始宽度进行修正。2.根据权利要求1所述的应用于渲染横向大量数据跨列合并表格的方法，其特征在于，所述步骤s1采用：所述表头单元格是树结构，能够表示任意跨列合并的表头；所述数据单元格是键值对结构，是报表的数据承载。3.根据权利要求1所述的应用于渲染横向大量数据跨列合并表格的方法，其特征在于，所述步骤s2采用：其中，leafwidth
i
表示第i个叶子表头单元格默认宽度；width表示顶层表头单元格初始宽度。4.根据权利要求1所述的应用于渲染横向大量数据跨列合并表格的方法，其特征在于，所述步骤s3采用：其中，scrollleft表示横向滚动距离；width
n
表示第n个顶层表头单元格初始宽度；viewwidth表示可视区域宽度；redundancywidth表示横向冗余宽度；f(n,m)表示符合条件的可视区域内显示的顶层表头单元格集合。5.根据权利要求1所述的应用于渲染横向大量数据跨列合并表格的方法，其特征在于，所述步骤s4采用：步骤s4.1：基于可视区域内显示的顶层表头单元格集合，生成待渲染顶层表头单元格集合；步骤s4.2：根据待渲染顶层表头单元格集合，生成待渲染叶子表头单元格集合；
步骤s4.3：待渲染叶子表头单元格集合与对应数据单元格集合进行键值匹配，生成与之关联的待渲染数据单元格集合；步骤s4.4：根据待渲染顶层表头单元格集合、待渲染数据单元格集合生成html标签；步骤s4.5：将生成的html标签到添加到可视区域，可视区域外边距设置为scrollleft-redundancywidth，完成渲染。6.一种应用于渲染横向大量数据跨列合并表格的系统，其特征在于，包括：模块m1：定义表格数据结构，包括表头以及表身，表头由表头单元列表格构成，表身由数据单元格构成；模块m2：基于叶子表头单元格默认宽度计算顶层表头单元格初始宽度；模块m3：基于可视区域宽度、横向冗余宽度，定义横向滚动事件，横轴滚动时计算可视区域要显示的顶层表头单元格集合；模块m4：基于可视区域要显示的顶层表头单元格集合获得待渲染数据单元格集合，并根据可视区域要显示的顶层表头单元格集合、待渲染数据单元格集合生成html标签，基于html标签完成渲染；模块m5：渲染后获得顶层表头真实宽度，利用顶层表头真实宽度对顶层表头单元格初始宽度进行修正。7.根据权利要求6所述的应用于渲染横向大量数据跨列合并表格的系统，其特征在于，所述模块m1采用：所述表头单元格是树结构，能够表示任意跨列合并的表头；所述数据单元格是键值对结构，是报表的数据承载。8.根据权利要求6所述的应用于渲染横向大量数据跨列合并表格的系统，其特征在于，所述模块m2采用：其中，leafwidth
i
表示第i个叶子表头单元格默认宽度；width表示顶层表头单元格初始宽度。9.根据权利要求6所述的应用于渲染横向大量数据跨列合并表格的系统，其特征在于，所述模块m3采用：其中，scrollleft表示横向滚动距离；width
n
表示第n个顶层表头单元格初始宽度；viewwidth表示可视区域宽度；redundancywidth表示横向冗余宽度；f(n,m)表示符合条件的可视区域内显示的顶层表头单元格集合。
10.根据权利要求6所述的应用于渲染横向大量数据跨列合并表格的系统，其特征在于，所述模块m4采用：模块m4.1：基于可视区域内显示的顶层表头单元格集合，生成待渲染顶层表头单元格集合；模块m4.2：根据待渲染顶层表头单元格集合，生成待渲染叶子表头单元格集合；模块m4.3：待渲染叶子表头单元格集合与对应数据单元格集合进行键值匹配，生成与之关联的待渲染数据单元格集合；模块m4.4：根据待渲染顶层表头单元格集合、待渲染数据单元格集合生成html标签；模块m4.5：将生成的html标签到添加到可视区域，可视区域外边距设置为scrollleft-redundancywidth，完成渲染。

技术总结

本发明提供了一种应用于渲染横向大量数据跨列合并表格的方法及系统，包括：步骤S1：定义表格数据结构，包括表头以及表身，表头由表头单元列表格构成，表身由数据单元格构成；步骤S2：基于叶子表头单元格默认宽度计算顶层表头单元格初始宽度；步骤S3：基于可视区域宽度、横向冗余宽度，定义横向滚动事件，横轴滚动时计算可视区域要显示的顶层表头单元格集合；步骤S4：基于可视区域要显示的顶层表头单元格集合获得待渲染数据单元格集合，并根据可视区域要显示的顶层表头单元格集合、待渲染数据单元格集合生成html标签，基于html标签完成渲染；步骤S5：渲染后获得顶层表头真实宽度，利用顶层表头真实宽度对顶层表头单元格初始宽度进行修正。行修正。行修正。