一种基于动态行高的表格处理方法与流程
1.本发明涉及web前端处理
技术领域：
：，尤其涉及一种基于动态行高的表格处理方法。
背景技术：
：：2.随着互联网的飞速发展，网站技术的广泛应用，各大行业企业对于web客户端的要求也越来越高，希望web客户端用于展示更多信息可以帮助企业更快速准确的查找到目标信息，加快信息获取的速度，提升工作的效率，希望web客户端有更加灵活的数据展示模型更有利于对有效信息的搜索，尤其是tob行业的信息系统经常采用表格来展示大量数据信息并在此基础上集成企业独特的业务功能来提升企业工作人员的效率，对表格的展示方式也变得多样，表格的列单元格展示的内容除了传统的文本外，还需要展示图片、超链接、表单控件等，展现方式上还有动态行高、合并表头、固定表头、固定列、虚拟滚动等，而web技术依赖于浏览器渲染的性能，表格在实现一些特殊功能时，在表格展示大数据量内容时往往会存在表格渲染卡顿，操作卡顿等性能问题。3.由于现代浏览器对table元素有特定算法实现加速绘制，做了额外工作保证对于静态内容，页面结构的稳定性，在实现二级表头，列分支，行列计算，行列合并等功能具有天然优势，所以现有web表格组件实现基本采用table元素实现表格功能，而表格展示大量数据很刚需的一个业务功能就是对关键信息的表头，列需要进行固定，在滚动查看其他信息一直保持在可见区域，而仅使用原生table元素实现的表格，在动态行高的问题上，性能并不理想，table元素为了保持表格行单元格对齐，必须渲染整行内容，如果在表格列数量较大的情况下，会因为需要渲染大量的单元格节点导致渲染卡顿，而提升表格性能的虚拟滚动功能需要固定行高才能够实现。对于动态行高表格，现有技术无法很好的优化其在大数据下的性能，因为虚拟滚动技术的局限性，必须在行高相同的情况下才能优化其性能，不能使用，导致必须渲染大量的单元格内的节点浏览器需要持续占用大量内存。技术实现要素：4.本发明的目的在于提供一种基于动态行高的表格处理方法，以解决现有技术中表格不能兼顾表格动态行高及表格高性能操作的问题。5.为实现上述目的，本发明提供一种基于动态行高的表格处理方法，包括：6.采用html和javascript技术构建表格可视渲染范围内的表格模型；7.根据所述表格模型确定在可视范围内的待渲染表格行高；8.将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高。9.优选地，所述采用html和javascript技术构建表格可视渲染范围内的表格模型，包括：10.根据预设表格行数和预设表格最小行高，计算表格可视渲染范围的总长度；11.根据预设表格可视渲染范围的高与所述预设表格最小行高的比值，确定表格可视渲染范围内显示表格的最大行数；12.根据所述表格可视渲染范围的总长度与所述表格可视渲染范围内显示表格的最大行数确定所述表格可视渲染范围。13.优选地，所述表格可视渲染范围还包括更新表格的滚动区域，若所述滚动区域大于预设的阈值，则根据所述滚动区域更新所述表格可视渲染范围。14.优选地，所述滚动区域根据滚动规则对所述表格可视渲染范围内的表格进行更新。15.优选地，在将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高之前，包括：16.根据当前渲染的表格的行高与所述表格最小行高对比，若当前渲染的表格的行高小于所述表格最小行高，则将所述表格最小行高作为所述待渲染表格行高。17.优选地，所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高，包括：18.若所述待渲染表格行高大于表格可视渲染范围的行的最小高度时，对所述表格可视范围内的表格进行修正，将所述表格可视范围内的表格的行高调整为待测渲染表格行高。19.本发明还提供一种终端设备，包括：20.一个或多个处理器；21.存储器，与所述处理器耦接，用于存储一个或多个程序；22.当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上任一项所述的基于动态行高的表格处理方法。23.本发明还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上任一项所述的基于动态行高的表格处理方法。24.相对于现有技术，本发明的有益效果在于：25.本发明采用html和javascript技术构建表格可视渲染范围内的表格模型，根据表格模型确定在可视范围内的待渲染表格行高，将待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高，实现动态行高仅需渲染表格可视渲染范围内的表格行，渲染成本降低，提高渲染表格的性能。26.进一步的，确定待渲染表格行高，实现对可视渲染范围内的表格动态调整，提高表格的渲染效率。附图说明27.为了更清楚地说明本发明的技术方案，下面将对实施方式中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。28.图1是本发明某一实施例提供的基于动态行高的表格处理方法的流程示意图；29.图2是本发明中又一实施例提供的基于动态行高的表格处理方法的流程示意图；30.图3是本发明某一实施例提供的终端设备的结构示意图。具体实施方式31.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。32.应当理解，文中所使用的步骤编号仅是为了方便描述，不对作为对步骤执行先后顺序的限定。33.应当理解，在本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。34.术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。35.术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。36.请参阅图1，本发明某一实施例提供一种基于动态行高的表格处理方法。如图1所示，该基于动态行高的表格处理方法包括步骤s101至步骤s103。各步骤具体如下：37.s101：采用html和javascript技术构建表格可视渲染范围内的表格模型。38.具体的，采用html及javascript技术，构建一个只渲染浏览器可视范围内的单元格的table(表格)模型，使用html基于table元素、tr(行)元素、td(单元格)元素实现表格的结构和样式，关键点是控制td元素控制表格内单元格元素的渲染，当表格内的滚动条滚动时判断该单元格是否需要渲染，从而实现动态渲染，这种设计减轻了表格渲染负担，不必一次性渲染大量的单元格，而是根据表格大小及滚动条的位置来渲染，因为只会渲染表格可视渲染范围内的表格数据，这些数量渲染出来的元素不足以显示出滚动条，则需要在表格创建时模拟出滚动条。39.根据预设表格行数和预设表格最小行高，计算表格可视渲染范围的总长度，根据预设表格可视渲染范围的高与预设表格最小行高的比值，确定表格可视渲染范围内显示表格的最大行数，根据表格可视渲染范围的总长度与表格可视渲染范围内显示表格的最大行数确定表格可视渲染范围。40.表格可视渲染范围还包括更新表格的滚动区域，若滚动区域大于预设的阈值，则根据滚动区域更新所述表格可视渲染范围。41.模拟滚动自动更新表格可视渲染范围的数据，输入参数可视范围显示区域的高为screen_height、参数表格行数为total_rows、表格最小行高为items_min_length。通过计算得出滚动总长度为表格最小的总高度，可作为滚动区域的总高度：total_rows*items_min_length。通过计算得出可视区域内最大显示表格最大行数量为：screen_height/items_min_length。定义模拟表格已滚动的长度padding_top，因为滚动条往下滚动后，表格前面的数据已经淡出可视范围为外，则不需要渲染显示，释放内存提升性能，使用一个空白的区域代替，空白区域的高度为padding_top。定义更新表格数据要滚动的距离buffer_length，因为表格要在滚动时自动更新后面未渲染的数据及销毁前面已经淡出可视范围的数据，完成这一点需要一个值与padding_top和模拟滚动长度的差的绝对值进行比较，相当于如果滚动经过大于一定的距离则进行一次数据更新，所以buffer_length的默认值应该为表格最小行高items_min_length。42.更新数据时使用以下滚动规则，设当前显示的索引index，初始值为0，滚动条往下滚动时的每一次数据更新让index的值+1，滚动条往上滚动时的每一次数据更新让index的值-1，此时渲染的行数据对应的就是第index行，第index+1行，...第index+screen_height/items_min_length行，最终实现模拟滚动自动更新表格可视渲染范围的数据。43.实现出模拟滚动自动更新表格可视渲染范围的数据，需要再考虑表格行内数据的长度，要判断单元格是否要渲染则先要知道单元格的高度。然后在表格滚动的时候通过计算得出该单元格是否需要渲染，才能够兼容动态行高的渲染。44.s102：根据所述表格模型确定在可视范围内的待渲染表格行高。45.s103：将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高。46.具体的，根据当前渲染的表格的行高与表格最小行高对比，若当前渲染的表格的行高小于表格最小行高，则将表格最小行高作为待渲染表格行高。47.若待渲染表格行高大于表格可视渲染范围的行的最小高度时，对表格可视范围内的表格进行修正，将表格可视范围内的表格的行高调整为待测渲染表格行高。48.根据模拟滚动自动更新表格可视渲染范围的数据具体实现流程，在更新数据时增加新的逻辑，渲染最新行之后计算该行的高度。通过此时获取的当前渲染行的高度比行的最小高度小，则需要固定行的高度为items_min_length，当前渲染行的高度比行的最小高度要高，则需要对buffer_length进行更新，并对此次更新的index及buffer_length进行缓存，记为buffer_length[index]，当下次因滚动再次渲染该列时可以直接获取该行数据的高度，节省计算量。通过对buffer_length进行更新，就可以得知下次数据刷新所要经过的距离。每当渲染的行的高度高于行的最小高度时，需要对表格的最小高度进行一次修正，公式为new_height(表格最小高度)＝total_rows*items_min_length-items_min_length+this_items_length(当前渲染行的高度)，这是对可滚动区域的高度补正。因为每次渲染表格只会渲染出表格可视渲染范围的表格行，渲染的效率极高，而且每次渲染未渲染过的行时都会计算它的高度重新计算本次渲染应该渲染哪一些行，实现了动态行高，最终实现出高性能的动态行高及大量数据显示能力的表格[0049]本发明实现了表格动态行高也保证了表格在大量数据下使用的性能，使得表格对可视化区域的渲染的限制更加灵活，判断是否对表格进行渲染，而不是每次滚动都对表格进行重新渲染，通过htmltable元素、tr元素、td元素的特性结合css技术准确获取表格行高的值，表格需要显示的数量以及表格更新重新渲染数据，相较于现有技术，浏览器渲染的节点大幅度减少，解决了渲染性能问题。通过设置表格每行的最小高度，从而计算出可滚动区域的最小有效范围，在滚动重新计算新渲染的行时，获取并缓存行的高度，并对可滚动的区域的高度补正。[0050]请参阅图3，本发明某一实施例提供一种终端设备，包括：[0051]一个或多个处理器；[0052]存储器，与所述处理器耦接，用于存储一个或多个程序；[0053]当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上所述的基于动态行高的表格处理方法。[0054]处理器用于控制该终端设备的整体操作，以完成上述的基于动态行高的表格处理方法的全部或部分步骤。存储器用于存储各种类型的数据以支持在该终端设备的操作，这些数据例如可以包括用于在该终端设备上操作的任何应用程序或方法的指令，以及应用程序相关的数据。该存储器可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，例如静态随机存取存储器(staticrandomaccessmemory，简称sram)，电可擦除可编程只读存储器(electricallyerasableprogrammableread-onlymemory，简称eeprom)，可擦除可编程只读存储器(erasableprogrammableread-onlymemory，简称eprom)，可编程只读存储器(programmableread-onlymemory，简称prom)，只读存储器(read-onlymemory，简称rom)，磁存储器，快闪存储器，磁盘或光盘。[0055]在一示例性实施例中，终端设备可以被一个或多个应用专用集成电路(applicationspecific1ntegratedcircuit，简称as1c)、数字信号处理器(digitalsignalprocessor，简称dsp)、数字信号处理设备(digitalsignalprocessingdevice,简称dspd)、可编程逻辑器件(programmablelogicdevice，简称pld)、现场可编程门阵列(fieldprogrammablegatearray，简称fpga)、控制器、微控制器、微处理器或其他电子元件实现，用于执行如上述任一项实施例所述的基于动态行高的表格处理方法，并达到如上述方法一致的技术效果。[0056]在另一示例性实施例中，还提供一种包括计算机程序的计算机可读存储介质，该计算机程序被处理器执行时实现如上述任一项实施例所述的基于动态行高的表格处理方法的步骤。例如，该计算机可读存储介质可以为上述包括计算机程序的存储器，上述计算机程序可由终端设备的处理器执行以完成如上述任一项实施例所述的基于动态行高的表格处理方法，并达到如上述方法一致的技术效果。[0057]以上所述是本发明的优选实施方式，应当指出，对于本
技术领域：
：的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围。当前第1页12当前第1页12
技术特征：
1.一种基于动态行高的表格处理方法，其特征在于，包括：采用html和javascript技术构建表格可视渲染范围内的表格模型；根据所述表格模型确定在可视范围内的待渲染表格行高；将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高。2.根据权利要求1所述的基于动态行高的表格处理方法，其特征在于，所述采用html和javascript技术构建表格可视渲染范围内的表格模型，包括：根据预设表格行数和预设表格最小行高，计算表格可视渲染范围的总长度；根据预设表格可视渲染范围的高与所述预设表格最小行高的比值，确定表格可视渲染范围内显示表格的最大行数；根据所述表格可视渲染范围的总长度与所述表格可视渲染范围内显示表格的最大行数确定所述表格可视渲染范围。3.根据权利要求2所述的基于动态行高的表格处理方法，其特征在于，所述表格可视渲染范围还包括更新表格的滚动区域，若所述滚动区域大于预设的阈值，则根据所述滚动区域更新所述表格可视渲染范围。4.根据权利要求3所述的基于动态行高的表格处理方法，其特征在于，所述滚动区域根据滚动规则对所述表格可视渲染范围内的表格进行更新。5.根据权利要求4所述的基于动态行高的表格处理方法，其特征在于，在将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高之前，包括：根据当前渲染的表格的行高与所述表格最小行高对比，若当前渲染的表格的行高小于所述表格最小行高，则将所述表格最小行高作为所述待渲染表格行高。6.根据权利要求5所述的基于动态行高的表格处理方法，其特征在于，所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高，包括：若所述待渲染表格行高大于表格可视渲染范围的行的最小高度时，对所述表格可视范围内的表格进行修正，将所述表格可视范围内的表格的行高调整为待测渲染表格行高。7.一种终端设备，其特征在于，包括：一个或多个处理器；存储器，与所述处理器耦接，用于存储一个或多个程序；当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-6任一项所述的基于动态行高的表格处理方法。8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-6任一项所述的基于动态行高的表格处理方法。
技术总结
本发明公开了一种基于动态行高的表格处理方法，该方法包括：采用html和javascript技术构建表格可视渲染范围内的表格模型；根据所述表格模型确定在可视范围内的待渲染表格行高；将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高。本发明通过构建表格可视渲染范围内的表格模型，将待渲染表格行高与表格最小行高进行匹配，提高了表格的渲染性能。了表格的渲染性能。了表格的渲染性能。
技术研发人员：黄逸朗 潘健 陈永辉 李海荣
受保护的技术使用者：广州市玄武无线科技股份有限公司
技术研发日：2021.11.09
技术公布日：2022/3/8
技术领域：
：，尤其涉及一种基于动态行高的表格处理方法。
背景技术：
：：2.随着互联网的飞速发展，网站技术的广泛应用，各大行业企业对于web客户端的要求也越来越高，希望web客户端用于展示更多信息可以帮助企业更快速准确的查找到目标信息，加快信息获取的速度，提升工作的效率，希望web客户端有更加灵活的数据展示模型更有利于对有效信息的搜索，尤其是tob行业的信息系统经常采用表格来展示大量数据信息并在此基础上集成企业独特的业务功能来提升企业工作人员的效率，对表格的展示方式也变得多样，表格的列单元格展示的内容除了传统的文本外，还需要展示图片、超链接、表单控件等，展现方式上还有动态行高、合并表头、固定表头、固定列、虚拟滚动等，而web技术依赖于浏览器渲染的性能，表格在实现一些特殊功能时，在表格展示大数据量内容时往往会存在表格渲染卡顿，操作卡顿等性能问题。3.由于现代浏览器对table元素有特定算法实现加速绘制，做了额外工作保证对于静态内容，页面结构的稳定性，在实现二级表头，列分支，行列计算，行列合并等功能具有天然优势，所以现有web表格组件实现基本采用table元素实现表格功能，而表格展示大量数据很刚需的一个业务功能就是对关键信息的表头，列需要进行固定，在滚动查看其他信息一直保持在可见区域，而仅使用原生table元素实现的表格，在动态行高的问题上，性能并不理想，table元素为了保持表格行单元格对齐，必须渲染整行内容，如果在表格列数量较大的情况下，会因为需要渲染大量的单元格节点导致渲染卡顿，而提升表格性能的虚拟滚动功能需要固定行高才能够实现。对于动态行高表格，现有技术无法很好的优化其在大数据下的性能，因为虚拟滚动技术的局限性，必须在行高相同的情况下才能优化其性能，不能使用，导致必须渲染大量的单元格内的节点浏览器需要持续占用大量内存。技术实现要素：4.本发明的目的在于提供一种基于动态行高的表格处理方法，以解决现有技术中表格不能兼顾表格动态行高及表格高性能操作的问题。5.为实现上述目的，本发明提供一种基于动态行高的表格处理方法，包括：6.采用html和javascript技术构建表格可视渲染范围内的表格模型；7.根据所述表格模型确定在可视范围内的待渲染表格行高；8.将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高。9.优选地，所述采用html和javascript技术构建表格可视渲染范围内的表格模型，包括：10.根据预设表格行数和预设表格最小行高，计算表格可视渲染范围的总长度；11.根据预设表格可视渲染范围的高与所述预设表格最小行高的比值，确定表格可视渲染范围内显示表格的最大行数；12.根据所述表格可视渲染范围的总长度与所述表格可视渲染范围内显示表格的最大行数确定所述表格可视渲染范围。13.优选地，所述表格可视渲染范围还包括更新表格的滚动区域，若所述滚动区域大于预设的阈值，则根据所述滚动区域更新所述表格可视渲染范围。14.优选地，所述滚动区域根据滚动规则对所述表格可视渲染范围内的表格进行更新。15.优选地，在将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高之前，包括：16.根据当前渲染的表格的行高与所述表格最小行高对比，若当前渲染的表格的行高小于所述表格最小行高，则将所述表格最小行高作为所述待渲染表格行高。17.优选地，所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高，包括：18.若所述待渲染表格行高大于表格可视渲染范围的行的最小高度时，对所述表格可视范围内的表格进行修正，将所述表格可视范围内的表格的行高调整为待测渲染表格行高。19.本发明还提供一种终端设备，包括：20.一个或多个处理器；21.存储器，与所述处理器耦接，用于存储一个或多个程序；22.当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上任一项所述的基于动态行高的表格处理方法。23.本发明还提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上任一项所述的基于动态行高的表格处理方法。24.相对于现有技术，本发明的有益效果在于：25.本发明采用html和javascript技术构建表格可视渲染范围内的表格模型，根据表格模型确定在可视范围内的待渲染表格行高，将待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高，实现动态行高仅需渲染表格可视渲染范围内的表格行，渲染成本降低，提高渲染表格的性能。26.进一步的，确定待渲染表格行高，实现对可视渲染范围内的表格动态调整，提高表格的渲染效率。附图说明27.为了更清楚地说明本发明的技术方案，下面将对实施方式中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。28.图1是本发明某一实施例提供的基于动态行高的表格处理方法的流程示意图；29.图2是本发明中又一实施例提供的基于动态行高的表格处理方法的流程示意图；30.图3是本发明某一实施例提供的终端设备的结构示意图。具体实施方式31.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。32.应当理解，文中所使用的步骤编号仅是为了方便描述，不对作为对步骤执行先后顺序的限定。33.应当理解，在本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。34.术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。35.术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。36.请参阅图1，本发明某一实施例提供一种基于动态行高的表格处理方法。如图1所示，该基于动态行高的表格处理方法包括步骤s101至步骤s103。各步骤具体如下：37.s101：采用html和javascript技术构建表格可视渲染范围内的表格模型。38.具体的，采用html及javascript技术，构建一个只渲染浏览器可视范围内的单元格的table(表格)模型，使用html基于table元素、tr(行)元素、td(单元格)元素实现表格的结构和样式，关键点是控制td元素控制表格内单元格元素的渲染，当表格内的滚动条滚动时判断该单元格是否需要渲染，从而实现动态渲染，这种设计减轻了表格渲染负担，不必一次性渲染大量的单元格，而是根据表格大小及滚动条的位置来渲染，因为只会渲染表格可视渲染范围内的表格数据，这些数量渲染出来的元素不足以显示出滚动条，则需要在表格创建时模拟出滚动条。39.根据预设表格行数和预设表格最小行高，计算表格可视渲染范围的总长度，根据预设表格可视渲染范围的高与预设表格最小行高的比值，确定表格可视渲染范围内显示表格的最大行数，根据表格可视渲染范围的总长度与表格可视渲染范围内显示表格的最大行数确定表格可视渲染范围。40.表格可视渲染范围还包括更新表格的滚动区域，若滚动区域大于预设的阈值，则根据滚动区域更新所述表格可视渲染范围。41.模拟滚动自动更新表格可视渲染范围的数据，输入参数可视范围显示区域的高为screen_height、参数表格行数为total_rows、表格最小行高为items_min_length。通过计算得出滚动总长度为表格最小的总高度，可作为滚动区域的总高度：total_rows*items_min_length。通过计算得出可视区域内最大显示表格最大行数量为：screen_height/items_min_length。定义模拟表格已滚动的长度padding_top，因为滚动条往下滚动后，表格前面的数据已经淡出可视范围为外，则不需要渲染显示，释放内存提升性能，使用一个空白的区域代替，空白区域的高度为padding_top。定义更新表格数据要滚动的距离buffer_length，因为表格要在滚动时自动更新后面未渲染的数据及销毁前面已经淡出可视范围的数据，完成这一点需要一个值与padding_top和模拟滚动长度的差的绝对值进行比较，相当于如果滚动经过大于一定的距离则进行一次数据更新，所以buffer_length的默认值应该为表格最小行高items_min_length。42.更新数据时使用以下滚动规则，设当前显示的索引index，初始值为0，滚动条往下滚动时的每一次数据更新让index的值+1，滚动条往上滚动时的每一次数据更新让index的值-1，此时渲染的行数据对应的就是第index行，第index+1行，...第index+screen_height/items_min_length行，最终实现模拟滚动自动更新表格可视渲染范围的数据。43.实现出模拟滚动自动更新表格可视渲染范围的数据，需要再考虑表格行内数据的长度，要判断单元格是否要渲染则先要知道单元格的高度。然后在表格滚动的时候通过计算得出该单元格是否需要渲染，才能够兼容动态行高的渲染。44.s102：根据所述表格模型确定在可视范围内的待渲染表格行高。45.s103：将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高。46.具体的，根据当前渲染的表格的行高与表格最小行高对比，若当前渲染的表格的行高小于表格最小行高，则将表格最小行高作为待渲染表格行高。47.若待渲染表格行高大于表格可视渲染范围的行的最小高度时，对表格可视范围内的表格进行修正，将表格可视范围内的表格的行高调整为待测渲染表格行高。48.根据模拟滚动自动更新表格可视渲染范围的数据具体实现流程，在更新数据时增加新的逻辑，渲染最新行之后计算该行的高度。通过此时获取的当前渲染行的高度比行的最小高度小，则需要固定行的高度为items_min_length，当前渲染行的高度比行的最小高度要高，则需要对buffer_length进行更新，并对此次更新的index及buffer_length进行缓存，记为buffer_length[index]，当下次因滚动再次渲染该列时可以直接获取该行数据的高度，节省计算量。通过对buffer_length进行更新，就可以得知下次数据刷新所要经过的距离。每当渲染的行的高度高于行的最小高度时，需要对表格的最小高度进行一次修正，公式为new_height(表格最小高度)＝total_rows*items_min_length-items_min_length+this_items_length(当前渲染行的高度)，这是对可滚动区域的高度补正。因为每次渲染表格只会渲染出表格可视渲染范围的表格行，渲染的效率极高，而且每次渲染未渲染过的行时都会计算它的高度重新计算本次渲染应该渲染哪一些行，实现了动态行高，最终实现出高性能的动态行高及大量数据显示能力的表格[0049]本发明实现了表格动态行高也保证了表格在大量数据下使用的性能，使得表格对可视化区域的渲染的限制更加灵活，判断是否对表格进行渲染，而不是每次滚动都对表格进行重新渲染，通过htmltable元素、tr元素、td元素的特性结合css技术准确获取表格行高的值，表格需要显示的数量以及表格更新重新渲染数据，相较于现有技术，浏览器渲染的节点大幅度减少，解决了渲染性能问题。通过设置表格每行的最小高度，从而计算出可滚动区域的最小有效范围，在滚动重新计算新渲染的行时，获取并缓存行的高度，并对可滚动的区域的高度补正。[0050]请参阅图3，本发明某一实施例提供一种终端设备，包括：[0051]一个或多个处理器；[0052]存储器，与所述处理器耦接，用于存储一个或多个程序；[0053]当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上所述的基于动态行高的表格处理方法。[0054]处理器用于控制该终端设备的整体操作，以完成上述的基于动态行高的表格处理方法的全部或部分步骤。存储器用于存储各种类型的数据以支持在该终端设备的操作，这些数据例如可以包括用于在该终端设备上操作的任何应用程序或方法的指令，以及应用程序相关的数据。该存储器可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，例如静态随机存取存储器(staticrandomaccessmemory，简称sram)，电可擦除可编程只读存储器(electricallyerasableprogrammableread-onlymemory，简称eeprom)，可擦除可编程只读存储器(erasableprogrammableread-onlymemory，简称eprom)，可编程只读存储器(programmableread-onlymemory，简称prom)，只读存储器(read-onlymemory，简称rom)，磁存储器，快闪存储器，磁盘或光盘。[0055]在一示例性实施例中，终端设备可以被一个或多个应用专用集成电路(applicationspecific1ntegratedcircuit，简称as1c)、数字信号处理器(digitalsignalprocessor，简称dsp)、数字信号处理设备(digitalsignalprocessingdevice,简称dspd)、可编程逻辑器件(programmablelogicdevice，简称pld)、现场可编程门阵列(fieldprogrammablegatearray，简称fpga)、控制器、微控制器、微处理器或其他电子元件实现，用于执行如上述任一项实施例所述的基于动态行高的表格处理方法，并达到如上述方法一致的技术效果。[0056]在另一示例性实施例中，还提供一种包括计算机程序的计算机可读存储介质，该计算机程序被处理器执行时实现如上述任一项实施例所述的基于动态行高的表格处理方法的步骤。例如，该计算机可读存储介质可以为上述包括计算机程序的存储器，上述计算机程序可由终端设备的处理器执行以完成如上述任一项实施例所述的基于动态行高的表格处理方法，并达到如上述方法一致的技术效果。[0057]以上所述是本发明的优选实施方式，应当指出，对于本
技术领域：
：的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围。当前第1页12当前第1页12
技术特征：
1.一种基于动态行高的表格处理方法，其特征在于，包括：采用html和javascript技术构建表格可视渲染范围内的表格模型；根据所述表格模型确定在可视范围内的待渲染表格行高；将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高。2.根据权利要求1所述的基于动态行高的表格处理方法，其特征在于，所述采用html和javascript技术构建表格可视渲染范围内的表格模型，包括：根据预设表格行数和预设表格最小行高，计算表格可视渲染范围的总长度；根据预设表格可视渲染范围的高与所述预设表格最小行高的比值，确定表格可视渲染范围内显示表格的最大行数；根据所述表格可视渲染范围的总长度与所述表格可视渲染范围内显示表格的最大行数确定所述表格可视渲染范围。3.根据权利要求2所述的基于动态行高的表格处理方法，其特征在于，所述表格可视渲染范围还包括更新表格的滚动区域，若所述滚动区域大于预设的阈值，则根据所述滚动区域更新所述表格可视渲染范围。4.根据权利要求3所述的基于动态行高的表格处理方法，其特征在于，所述滚动区域根据滚动规则对所述表格可视渲染范围内的表格进行更新。5.根据权利要求4所述的基于动态行高的表格处理方法，其特征在于，在将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高之前，包括：根据当前渲染的表格的行高与所述表格最小行高对比，若当前渲染的表格的行高小于所述表格最小行高，则将所述表格最小行高作为所述待渲染表格行高。6.根据权利要求5所述的基于动态行高的表格处理方法，其特征在于，所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高，包括：若所述待渲染表格行高大于表格可视渲染范围的行的最小高度时，对所述表格可视范围内的表格进行修正，将所述表格可视范围内的表格的行高调整为待测渲染表格行高。7.一种终端设备，其特征在于，包括：一个或多个处理器；存储器，与所述处理器耦接，用于存储一个或多个程序；当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-6任一项所述的基于动态行高的表格处理方法。8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-6任一项所述的基于动态行高的表格处理方法。
技术总结
本发明公开了一种基于动态行高的表格处理方法，该方法包括：采用html和javascript技术构建表格可视渲染范围内的表格模型；根据所述表格模型确定在可视范围内的待渲染表格行高；将所述待渲染表格行高与表格最小行高匹配，若匹配不成功则动态调整表格的行高。本发明通过构建表格可视渲染范围内的表格模型，将待渲染表格行高与表格最小行高进行匹配，提高了表格的渲染性能。了表格的渲染性能。了表格的渲染性能。
技术研发人员：黄逸朗 潘健 陈永辉 李海荣
受保护的技术使用者：广州市玄武无线科技股份有限公司
技术研发日：2021.11.09
技术公布日：2022/3/8
最新回复(0)