一种表格显示方法以及装置制造方法及图纸

技术编号:33028022 阅读:27 留言:0更新日期:2022-04-15 09:03
本申请公开一种表格显示方法,该方法可以直接使用现有代码的布局、样式、事件交互,不局限于插件自身提供的方法;也没有针对调整后的页面显示单元格全部重建DOM节点,而仅针对新增的页面显示单元格进行渲染、重建DOM节点,即不存在重复DOM节点,没有大量使用脚本调整布局,减少CUP使用,以及,可以直接使用重叠样式表,保证了页面的流畅性,实现大数据级别数据展示不卡顿。展示不卡顿。展示不卡顿。

【技术实现步骤摘要】
一种表格显示方法以及装置


[0001]本申请涉及计算机领域,尤其涉及一种表格显示方法、装置。

技术介绍

[0002]在浏览器页面时,浏览器页面中的表格以其横向单元格合并、纵向单元格合并、同一行单元格高度自动对齐、同一列单元格宽度自动对齐,起到不可代替的作用。但表格中的行、列在做冻结时使用常规样式“position:absolute/fixed”时会脱离当前的所在的父元素(表格行或列),所在父元素的自动宽高不再考虑被冻结元素的占位大小,所在同级兄弟元素的排列也不再考虑被冻结元素的占位区域,从而导致表格布局错乱。故此,亟需一种新的表格显示方法。

技术实现思路

[0003]本申请提供一种表格显示方法,以可以实现保证页面的流畅性,实现大数据级别数据展示不卡顿。
[0004]第一方面,本申请提供了一种表格显示方法,所述方法包括:
[0005]获取web页面显示的目标表格的尺寸信息,以及所述目标表格中页面显示单元格的占位位置和冻结单元格的占位位置;
[0006]若监测到表格调整指令,根据所述表格调整指令对应的滚动距离本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种表格显示方法,其特征在于,所述方法包括:获取web页面显示的目标表格的尺寸信息,以及所述目标表格中页面显示单元格的占位位置和冻结单元格的占位位置;若监测到表格调整指令,根据所述表格调整指令对应的滚动距离,确定所述冻结单元格的偏移距离;根据所述表格调整指令对应的滚动方向、所述冻结单元格的占位位置和所述冻结单元格的偏移距离,确定所述冻结单元格在所述目标表格的目标占位位置;根据所述表格调整指令对应的滚动方向、所述目标表格的尺寸信息、所述页面显示单元格的占位位置以及所述滚动距离,确定所述目标表格中调整后的页面显示单元格的占位位置;根据所述冻结单元格在所述目标表格的目标占位位置以及所述目标表格中调整后的页面显示单元格的占位位置进行数据渲染,在所述web页面显示调整后的目标表格。2.根据权利要求1所述的方法,其特征在于,所述若监测到表格调整指令,根据所述表格调整指令对应的滚动距离,确定所述冻结单元格的偏移距离,包括:若监测到表格调整指令,则将所述表格调整指令对应的滚动距离作为所述目标表格中所述冻结单元格的偏移距离。3.根据权利要求1所述的方法,其特征在于,若所述滚动方向为正向纵向滚动,所述冻结单元格为表头冻结单元格;所述根据所述表格调整指令对应的滚动方向、所述冻结单元格的占位位置和所述冻结单元格的偏移距离,确定所述冻结单元格在所述目标表格的目标占位位置,包括:若所述滚动方向为所述正向纵向滚动,将所述表头冻结单元格的行占位位置与所述表头冻结单元格的偏移距离的差值,作为所述表头冻结单元格在所述目标表格的目标行占位位置。4.根据权利要求1所述的方法,其特征在于,若所述滚动方向为负向纵向滚动,所述冻结单元格为表尾冻结单元格;所述根据所述表格调整指令对应的滚动方向、所述冻结单元格的占位位置和所述冻结单元格的偏移距离,确定所述冻结单元格在所述目标表格的目标占位位置,包括:若所述滚动方向为所述负向纵向滚动,将所述表尾冻结单元格的行占位位置与所述表尾冻结单元格的偏移距离的和,作为所述表尾冻结单元格在所述目标表格的目标行占位位置。5.根据权利要求1所述的方法,其特征在于,若所述滚动方向为正向横向滚动,所述冻结单元格为首列冻结单元格;所述根据所述表格调整指令对应的滚动方向、所述冻结单元格的占位位置和所述冻结单元格的偏移距离,确定所述冻结单元格在所述目标表格的目标占位位置,包括:若所述滚动方向为所述正向横向滚动,将所述首列冻结单元格的列占位位置与所述首列冻结单元格的偏移距离的差值,作为所述首列冻结单元格在所述目标表格的目标列占位位置。6.根据权利要求1所述的方法,其特征在于,若所述滚动方向为负向横向滚动,所述冻结单元格为末列冻结单元格;所述根据所述表格调整指令对应的滚动方向、所述冻结单元
格的占位位置和所述冻结单元格的偏移距离,确定所述冻结单元格在所...

【专利技术属性】
技术研发人员:王利
申请(专利权)人:中电云数智科技有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1