基于最长字符串宽高推算表格内容宽高的自适应算法的制作方法

文档序号:36154752发布日期:2023-11-23 03:38阅读:21来源:国知局
本公开涉及表格应用,尤其涉及一种基于最长字符串宽高推算表格内容宽高的自适应算法、系统和电子设备。
背景技术
::1、表格类工具,适用于对表格进行管理的工具,能够对表格进行行和列的调整以及其他表格处理。2、现有的表格类工具,比如html原生table、antd table组件和react-window的grid,虽然能够支持表格宽高调节,但是在应用中,还是存在有以下技术短板:3、1、antd table是功能较多、使用普遍的一种表格组件,因为功能多且设计复杂,所以使用难度还是比较大的,另外在特定模式(非默认)下,它也支持表格虚拟化用来提升渲染性能。4、但是antd table的列宽和行高无自适应算法,无法根据单元格内容进行列宽和行高的自动调整和适应,只能通过手动指定宽高(或比例)。5、2、react-window是一个专注虚拟化的工具库,其grid能支持行高列宽变化的场景。其定位是底层工具库,只提供了虚拟化能力,缺失表格常见的很多功能,比如:合并单元格,列宽调整等。6、然而,react-window的grid列宽和行高同样无自适应算法,无法根据单元格内容进行列宽和行高的自动调整和适应,只能通过手动指定宽高(或比例)7、3、html原生table实现简单,不支持虚拟化,布局控制成本大。8、因此,现有的表格类工具,对列宽行高的处理都非常简单,需要手动指定,并不具备列宽、行高的自适应调整功能。技术实现思路1、为了解决上述问题,本技术提出一种基于最长字符串宽高推算表格内容宽高的自适应算法、系统和电子设备。2、本技术一方面,提出一种基于最长字符串宽高推算表格内容宽高的自适应算法,包括如下步骤:3、获取表格数据,对所述表格数据进行分区;4、将分区的所述表格数据输入合并模块,计算合并单元格,计算每个区间的起始位置;5、计算各区每列字符串长度最长的单元格,并以所述单元格的字符串长度计算所有列的自适应宽度;6、计算各区每行单元格的字符串单行显示宽度,并结合所述单元格所在列的自适应宽度,计算每行单元格的最大高度并作为行高。7、作为本技术的一可选实施方案,可选地,获取表格数据,对所述表格数据进行分区,包括:8、获取所述表格数据中表格内容;9、根据表格内容,获取不同表格内容的表格属性;10、按照所述表格属性,将所述表格数据分为不同属性内容的四个分区:11、得到左上区、右上区、左下区和右下区。12、作为本技术的一可选实施方案,可选地,计算各区每列字符串长度最长的单元格,并以所述单元格的字符串长度计算所有列的自适应宽度,包括:13、遍历左下区的每一列,找到每列中字符串长度最长的单元格;14、测量当前字符串长度最长的单元格在单行显示时的宽度,并将所测量的宽度作为左下区的列宽;15、遍历左上区的每一列,结合左上区的合并单元格内容和左下区的列宽,自适应计算左区每一列的自适应宽度。16、作为本技术的一可选实施方案,可选地,计算各区每列字符串长度最长的单元格,并以所述单元格的字符串长度计算所有列的自适应宽度,还包括:17、遍历右下区的每一列,找到每列中字符串长度最长的单元格;18、测量当前字符串长度最长的单元格在单行显示时的宽度,并将所测量的宽度作为右下区的列宽;19、遍历右上区的每一列,结合右上区的合并单元格内容和右下区的列宽,自适应计算右区每一列的自适应宽度。20、作为本技术的一可选实施方案,可选地,计算各区每列字符串长度最长的单元格,并以所述单元格的字符串长度计算所有列的自适应宽度,还包括:21、判断左区每一列的自适应宽度之和以及右区每一列的自适应宽度之和,是否小于各自合并单元格的容器宽度:22、若是,则计算剩余宽度,并将剩余宽度均分至每一列的自适应宽度;23、否则放弃。24、作为本技术的一可选实施方案,可选地,所述剩余宽度的计算方式:25、l=l1-l2;26、l1为左上区或者右上区的合并单元格的容器宽度;27、l2为左区每一列的自适应宽度之和或者右区每一列的自适应宽度之和;28、l为剩余宽度。29、作为本技术的一可选实施方案,可选地,将剩余宽度均分至每一列的自适应宽度,包括:30、计算左区或右区的所有列的总数n;31、均分所述剩余宽度:l/n;32、将l/n分配至左区或右区每一列的自适应宽度l0中,得到新的每一列的自适应宽度l3:33、l3=l0+l/n。34、作为本技术的一可选实施方案,可选地,计算各区每行单元格的字符串单行显示宽度,并结合所述单元格所在列的自适应宽度,计算每行单元格的最大高度并作为行高,包括:35、遍历上区和下区中所有的行;36、计算每行中每个单元格的字符串单行显示宽度;37、根据每个单元格所在列的列宽,计算每个单元格的自适应高度;38、从每行的所有单元格中,找到最大高度的单元格,并将最大高度作为当前行的行高。39、本技术另一方面,提出一种实现所述基于最长字符串宽高推算表格内容宽高的自适应算法的系统,包括:40、表格分区模块,用于获取表格数据,对所述表格数据进行分区;41、合并模块,用于将分区的所述表格数据输入合并模块,计算合并单元格,计算每个区间的起始位置;42、自适应宽度计算模块,用于计算各区每列字符串长度最长的单元格,并以所述单元格的字符串长度计算所有列的自适应宽度;43、自适应高度计算模块,用于计算各区每行单元格的字符串单行显示宽度,并结合所述单元格所在列的自适应宽度,计算每行单元格的最大高度并作为行高。44、本技术另一方面,还提出一种电子设备,包括:45、处理器;46、用于存储处理器可执行指令的存储器;47、其中,所述处理器被配置为执行所述可执行指令时实现所述的一种基于最长字符串宽高推算表格内容宽高的自适应算法。48、本发明的技术效果:49、本方案通过获取表格数据,对所述表格数据进行分区;将分区的所述表格数据输入合并模块,计算合并单元格,计算每个区间的起始位置;计算各区每列字符串长度最长的单元格,并以所述单元格的字符串长度计算所有列的自适应宽度;计算各区每行单元格的字符串单行显示宽度,并结合所述单元格所在列的自适应宽度,计算每行单元格的最大高度并作为行高。能够基于最长字符串长度推算表格列宽行高,在单元格虚拟化的基础上,通过表格渲染前的自适应列宽行高推荐算法,实现高性能表格。通过宽高自适应调整算法,能够快速根据分区中单元格的最长字符串进行宽高自适应调节,能够在dom渲染前,借助canvas的文本度量能力推算适合单元格的列宽和行高,进而计算整个表格的宽高,从而大幅提升表格的渲染性能。50、根据下面参考附图对示例性实施例的详细说明,本公开的其它特征及方面将变得清楚。当前第1页12当前第1页12
当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1