一种基于动态行高的表格处理方法技术

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

【技术实现步骤摘要】
一种基于动态行高的表格处理方法


[0001]本专利技术涉及web前端处理
，尤其涉及一种基于动态行高的表格处理方法。

技术介绍

[0002]随着互联网的飞速发展，网站技术的广泛应用，各大行业企业对于web客户端的要求也越来越高，希望web客户端用于展示更多信息可以帮助企业更快速准确的查找到目标信息，加快信息获取的速度，提升工作的效率，希望web客户端有更加灵活的数据展示模型更有利于对有效信息的搜索，尤其是toB行业的信息系统经常采用表格来展示大量数据信息并在此基础上集成企业独特的业务功能来提升企业工作人员的效率，对表格的展示方式也变得多样，表格的列单元格展示的内容除了传统的文本外，还需要展示图片、超链接、表单控件等，展现方式上还有动态行高、合并表头、固定表头、固定列、虚拟滚动等，而web技术依赖于浏览器渲染的性能，表格在实现一些特殊功能时，在表格展示大数据量内容时往往会存在表格渲染卡顿，操作卡顿等性能问题。
[0003]由于现代浏览器对table元素有特定算法实现加速绘制，做了额外工作保证对于静态内容，页面结构的稳定性，在实现二级表头，列分支，行列计算，行列合并等功能具有天然优势，所以现有web表格组件实现基本采用table元素实现表格功能，而表格展示大量数据很刚需的一个业务功能就是对关键信息的表头，列需要进行固定，在滚动查看其他信息一直保持在可见区域，而仅使用原生table元素实现的表格，在动态行高的问题上，性能并不理想，table元素为了保持表格行单元格对齐，必须渲染整行内容，如果在表格列数量较大的情况下，会因为需要渲染大量的单元格节点导致渲染卡顿，而提升表格性能的虚拟滚动功能需要固定行高才能够实现。对于动态行高表格，现有技术无法很好的优化其在大数据下的性能，因为虚拟滚动技术的局限性，必须在行高相同的情况下才能优化其性能，不能使用，导致必须渲染大量的单元格内的节点浏览器需要持续占用大量内存。

技术实现思路

[0004]本专利技术的目的在于提供一种基于动态行高的表格处理方法，以解决现有技术中表格不能兼顾表格动态行高及表格高性能操作的问题。
[0005]为实现上述目的，本专利技术提供一种基于动态行高的表格处理方法，包括：
[0006]采用html和javascript技术构建表格可视渲染范围内的表格模型；
[0007]根据所述表格模型确定在可视范围内的待渲染表格行高；
[0008]将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高。
[0009]优选地，所述采用html和javascript技术构建表格可视渲染范围内的表格模型，包括：
[0010]根据预设表格行数和预设表格最小行高，计算表格可视渲染范围的总长度；
[0011]根据预设表格可视渲染范围的高与所述预设表格最小行高的比值，确定表格可视
渲染范围内显示表格的最大行数；
[0012]根据所述表格可视渲染范围的总长度与所述表格可视渲染范围内显示表格的最大行数确定所述表格可视渲染范围。
[0013]优选地，所述表格可视渲染范围还包括更新表格的滚动区域，若所述滚动区域大于预设的阈值，则根据所述滚动区域更新所述表格可视渲染范围。
[0014]优选地，所述滚动区域根据滚动规则对所述表格可视渲染范围内的表格进行更新。
[0015]优选地，在将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高之前，包括：
[0016]根据当前渲染的表格的行高与所述表格最小行高对比，若当前渲染的表格的行高小于所述表格最小行高，则将所述表格最小行高作为所述待渲染表格行高。
[0017]优选地，所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高，包括：
[0018]若所述待渲染表格行高大于表格可视渲染范围的行的最小高度时，对所述表格可视范围内的表格进行修正，将所述表格可视范围内的表格的行高调整为待测渲染表格行高。
[0019]本专利技术还提供一种终端设备，包括：
[0020]一个或多个处理器；
[0021]存储器，与所述处理器耦接，用于存储一个或多个程序；
[0022]当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上任一项所述的基于动态行高的表格处理方法。
[0023]本专利技术还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上任一项所述的基于动态行高的表格处理方法。
[0024]相对于现有技术，本专利技术的有益效果在于：
[0025]本专利技术采用html和javascript技术构建表格可视渲染范围内的表格模型，根据表格模型确定在可视范围内的待渲染表格行高，将待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高，实现动态行高仅需渲染表格可视渲染范围内的表格行，渲染成本降低，提高渲染表格的性能。
[0026]进一步的，确定待渲染表格行高，实现对可视渲染范围内的表格动态调整，提高表格的渲染效率。
附图说明
[0027]为了更清楚地说明本专利技术的技术方案，下面将对实施方式中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0028]图1是本专利技术某一实施例提供的基于动态行高的表格处理方法的流程示意图；
[0029]图2是本专利技术中又一实施例提供的基于动态行高的表格处理方法的流程示意图；
[0030]图3是本专利技术某一实施例提供的终端设备的结构示意图。
具体实施方式
[0031]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0032]应当理解，文中所使用的步骤编号仅是为了方便描述，不对作为对步骤执行先后顺序的限定。
[0033]应当理解，在本专利技术说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本专利技术。如在本专利技术说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。
[0034]术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。
[0035]术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。
[0036]请参阅图1，本专利技术某一实施例提供一种基于动态行高的表格处理方法。如图1所示，该基于动态行高的表格处理方法包括步骤S101至步骤S103。各步骤本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于动态行高的表格处理方法，其特征在于，包括：采用html和javascript技术构建表格可视渲染范围内的表格模型；根据所述表格模型确定在可视范围内的待渲染表格行高；将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高。2.根据权利要求1所述的基于动态行高的表格处理方法，其特征在于，所述采用html和javascript技术构建表格可视渲染范围内的表格模型，包括：根据预设表格行数和预设表格最小行高，计算表格可视渲染范围的总长度；根据预设表格可视渲染范围的高与所述预设表格最小行高的比值，确定表格可视渲染范围内显示表格的最大行数；根据所述表格可视渲染范围的总长度与所述表格可视渲染范围内显示表格的最大行数确定所述表格可视渲染范围。3.根据权利要求2所述的基于动态行高的表格处理方法，其特征在于，所述表格可视渲染范围还包括更新表格的滚动区域，若所述滚动区域大于预设的阈值，则根据所述滚动区域更新所述表格可视渲染范围。4.根据权利要求3所述的基于动态行高的表格处理方法，其特征在于，所述滚动区域根据滚动规则对所述表格可视渲染范围内的表格进行更新。5.根据权利要求4所述的基于动...

【专利技术属性】
技术研发人员：黄逸朗，潘健，陈永辉，李海荣，
申请(专利权)人：广州市玄武无线科技股份有限公司，
类型：发明
国别省市：