[发明专利]一种基于Web前端的表格处理系统及方法

说明书

本发明公开了一种基于Web前端的表格处理系统及方法包括：html表格模块，其中，html表格模块包括左侧固定列表格模块、右侧固定列表格模块和主表格模块，还包括table元素、tr元素和td元素，若tr元素不设置固定的行高度，tr元素的高度由td元素决定，html表格模块还包括更新模块，更新模块包括表格控制器类和观察者类，在左、右侧固定列表格模块和主表格模块分别用于插入两列代理列模块，若检测到tr元素高度发生变化，获取对应的高度变化值，并将高度变化值赋值给代理列模块中的td元素，表格控制器类用于查找高度变化值，观察者类用于更新当前所在行的代理列模块的高度，完成动态行高和固定列同步更新。通过结合html技术和css技术，解决动态行高对齐问题。

技术领域

本发明涉及Web前端设计的技术领域，尤其涉及一种基于Web前端的表格处理系统及方法。

背景技术

web客户端用于展示更多信息可以帮助企业更快速准确的查找到目标信息，更加灵活的数据展示模型更有利于对有效信息的搜索，加快获取的速度，从而提高工作效率。特别的，ToB行业的信息系统经常采用表格来展示大量数据信息并在此基础上集成企业独特的业务功能来提升企业工作人员的效率，对表格的展示方式也变得多样，表格的列单元格展示的内容除了传统的文本外，还需要展示图片、超链接、表单控件等，展现方式上还有动态行高、合并表头、固定表头、固定列、虚拟滚动等，然而现有技术中的web技术依赖于浏览器渲染的性能，表格在实现一些特殊功能时，会出现如下问题：

1、现有的表格实现动态行高和左右固定列的渲染方法是让相同的表格渲染三次，才能解决动态行高固定列与原表格的对齐问题，时间复杂度和空间复杂度为O(3n*m)(n代表表格行数，m代表表格的列数)，导致表格渲染成本很高。

2、使用现有表格在行数据基数大时，浏览器持续占用大量内存，导致渲染性能下降，页面卡顿，在性能较差的设备中还会引发web页面崩溃的问题。

发明内容

本发明目的在于，提供一种基于Web前端的表格处理系统及方法，通过结合html技术和css技术，设计一种可以控制固定列的行高的table模型，并增加收集及监听行高变化的监听器，处理表格行列的行对齐问题，降低了渲染节点的时间复杂度和空间复杂度。

为实现上述目的，本发明实施例提供一种基于Web前端的表格处理系统，其特征在于，包括：html表格模块；

所述html表格模块包括左侧固定列表格模块、右侧固定列表格模块和主表格模块，所述html表格模块还包括table元素、tr元素和td元素；其中，所述tr元素用于定义表格的行，所述td元素用于定义表格的单元格，若所述tr元素不设置固定的行高度，所述tr元素的高度由所述td元素决定；

所述html表格模块还包括更新模块，所述更新模块包括表格控制器类TableCtrl和观察者类RowObserver；

所述左侧固定列表格模块、所述右侧固定列表格模块和所述主表格模块分别用于插入两列代理列模块；

若检测到所述tr元素高度发生变化，获取对应的高度变化值，并将所述高度变化值赋值给所述代理列模块中的所述td元素，所述表格控制器类TableCtrl用于查找所述高度变化值，所述观察者类RowObserver用于更新当前所在行的所述代理列模块的高度，完成动态行高和固定列同步更新。

优选地，所述代理列模块中的所述单元格的td元素包括.proxy子元素，所述.proxy子元素用于同步非自身代理列模块的相同行的高度属性，完成动态行高与固定列并存的表格。

优选地，所述观察者类RowObserver包括trigger()函数接口，所述trigger()函数接口用于更新当前行代理列单元格的高度，完成所述左侧固定列表格模块、所述右侧固定列表格模块和所述主表格模块的行高度同步更新。