[发明专利]一种基于动态行高的表格处理方法

说明书

本发明公开了一种基于动态行高的表格处理方法，该方法包括：采用html和javascript技术构建表格可视渲染范围内的表格模型；根据所述表格模型确定在可视范围内的待渲染表格行高；将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高。本发明通过构建表格可视渲染范围内的表格模型，将待渲染表格行高与表格最小行高进行匹配，提高了表格的渲染性能。

技术领域

本发明涉及web前端处理技术领域，尤其涉及一种基于动态行高的表格处理方法。

背景技术

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

由于现代浏览器对table元素有特定算法实现加速绘制，做了额外工作保证对于静态内容，页面结构的稳定性，在实现二级表头，列分支，行列计算，行列合并等功能具有天然优势，所以现有web表格组件实现基本采用table元素实现表格功能，而表格展示大量数据很刚需的一个业务功能就是对关键信息的表头，列需要进行固定，在滚动查看其他信息一直保持在可见区域，而仅使用原生table元素实现的表格，在动态行高的问题上，性能并不理想，table元素为了保持表格行单元格对齐，必须渲染整行内容，如果在表格列数量较大的情况下，会因为需要渲染大量的单元格节点导致渲染卡顿，而提升表格性能的虚拟滚动功能需要固定行高才能够实现。对于动态行高表格，现有技术无法很好的优化其在大数据下的性能，因为虚拟滚动技术的局限性，必须在行高相同的情况下才能优化其性能，不能使用，导致必须渲染大量的单元格内的节点浏览器需要持续占用大量内存。

发明内容

本发明的目的在于提供一种基于动态行高的表格处理方法，以解决现有技术中表格不能兼顾表格动态行高及表格高性能操作的问题。

为实现上述目的，本发明提供一种基于动态行高的表格处理方法，包括：

采用html和javascript技术构建表格可视渲染范围内的表格模型；

根据所述表格模型确定在可视范围内的待渲染表格行高；

将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高。

优选地，所述采用html和javascript技术构建表格可视渲染范围内的表格模型，包括：

根据预设表格行数和预设表格最小行高，计算表格可视渲染范围的总长度；

根据预设表格可视渲染范围的高与所述预设表格最小行高的比值，确定表格可视渲染范围内显示表格的最大行数；

根据所述表格可视渲染范围的总长度与所述表格可视渲染范围内显示表格的最大行数确定所述表格可视渲染范围。

优选地，所述表格可视渲染范围还包括更新表格的滚动区域，若所述滚动区域大于预设的阈值，则根据所述滚动区域更新所述表格可视渲染范围。

优选地，所述滚动区域根据滚动规则对所述表格可视渲染范围内的表格进行更新。

优选地，在将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高之前，包括：