调节表格列宽的方法及设备的制造方法

文档序号:9375095阅读:317来源:国知局
调节表格列宽的方法及设备的制造方法【
技术领域
】[0001]本申请涉及计算机领域,尤其涉及一种调节表格列宽的方法及设备。【
背景技术
】[0002]随着计算机和互联网技术的广泛应用,网页中的内容越来越丰富。对于网页中的表格,尤其是采用HTML(HyperTextMarkupLanguage,超文本标记语言)的〈table〉标签定义的表格,目前调节其列宽的方式主要是通过JavaScript绑定相应的事件,在事件响应函数中操作其列宽,但是因为实现方式的细节不同主要存在以下几点不足:[0003]1、适应的布局类型比较单一,只能适应网页定宽布局,无法适应弹性布局。其实现思想的重点在于获取每个列的宽度,及列分割线的位置,用透明的元素以绝对定位的方式放置在拖拽点上,拖拽时其实是拖拽透明的定位元素,然后根据透明元素的位置变化,重新计算表格列宽。这样如果是自适应的弹性布局,在浏览器窗口大小变化引起表格单元格位置变化时,透明元素的位置并没有变化,所以在表格尺寸根据弹性布局变化之后,列宽的计算就会出现问题。[0004]2、侵入式太强,容易与其它作用于表格的插件冲突。这种实现方式是为了避免第一种情况,而把定位的元素放在表头的每个单元格中,这样虽然解决了弹性布局下的元素定位问题,但是因为改变了表格内部的DOM(DocumentObjectModel,文档对象模型)结构,可能导致原来绑定元素的失效。[0005]3、在拉宽某一列时,表格整体也会变宽,会导致表格的整体宽度发生变化,而不是使表格整体尺寸一直保持加载时在容器中的所占尺寸,会破坏原有的布局方式。[0006]4、无法解决有隐藏列的问题,在拖拽的列分割线两侧存在隐藏列时,导致拖拽失效。[0007]5、无法适应网页横向宽度很大,有横向滚动条的情况,这时会出现定位错误。[0008]6、无法解决有表格头固定的情况下,列宽拖拽的问题。【
发明内容】[0009]本申请的目的是提供一种调节表格列宽的方法及设备。[0010]为实现上述目的,本申请提供了一种调节表格列宽的方法,该方法包括:[0011]根据所述操作点的当前位置信息确定所述操作点处于触发区域;[0012]在获取到所述操作点在所述触发区域内执行的调节触发操作之后,根据所述操作点的当前位置信息和所述相关单元格的当前位置信息获取表格的列宽信息;[0013]根据所述表格的列宽信息显示所述表格。[0014]进一步地,根据所述表格的列宽信息显示所述表格,包括:[0015]在获取到所述操作点在所述触发区域内执行的调节终止操作时,根据当前时刻的所述表格的列宽信息显示所述表格;或者[0016]根据每一时刻的所述表格的列宽信息显示所述表格,直至获取到所述操作点在所述触发区域内执行的调节终止操作。[0017]进一步地,所述操作点的当前位置信息包括所述操作点与网页的窗口一侧之间的第一距离,所述触发区域包括两个相邻的可见单元格之间的分隔线两侧预设宽度内的区域;[0018]根据所述操作点的当前位置信息确定所述操作点处于触发区域,包括:[0019]若所述第一距离与第二距离之差是否小于阈值,则确定所述操作点当前处于触发区域内,其中所述第二距离为任意两个相邻的可见单元格之间的分隔线与所述网页的窗口一侧的距离。[0020]进一步地,所述触发区域包括两个相邻的可见单元格之间的分隔线两侧预设宽度内的区域,所述相关单元格包括所述触发区域两侧的两个相邻的可见单元格;[0021]根据所述操作点的当前位置信息和所述相关单元格的当前位置信息获取表格的列宽信息,包括:[0022]根据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值,并获取同一行中其余单元格的列宽值;[0023]将所述相关单元格的列宽值和同一行中其余单元格的列宽值作为所述表格的列宽信息。[0024]进一步地,根据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值,包括:[0025]根据所述操作点的当前位置信息确定所述相关单元格的分隔线的当前位置信息;[0026]根据所述分隔线的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值。[0027]进一步地,将所述相关单元格的列宽值和同一行中其余单元格的列宽值作为所述表格的列宽信息,包括:[0028]获取所述相关单元格和同一行中其余单元格的索引值,根据索引值建立保存所述列宽信息的数组,并将所述列宽值作为数组中对应的数组元素的值。[0029]进一步地,在根据所述表格的列宽信息显示所述表格之后,还包括:[0030]将所述表格的列宽信息由同一行中每个单元格的列宽值转换为每个单元格的列宽值占表格总宽度的百分比。[0031]进一步地,根据所述表格的列宽信息显示所述表格,包括:[0032]若存在固定表头,将所述表格的列宽信息复制为所述固定表头的列宽信息,根据所述表格的列宽信息显示所述表格,同时根据所述固定表头的列宽信息显示所述固定表头。[0033]进一步地,在根据所述操作点的当前位置信息确定所述操作点处于触发区域之前,还包括:[0034]获取所述表格中同一行中每个单元格的列宽值,并将所述同一行中每个单元格的列宽值转换为同一行中每个单元格的列宽值占表格总宽度的百分比。[0035]进一步地,获取所述表格中同一行中每个单元格的列宽值,包括:[0036]若所述表格或所述表格的父元素的属性为隐藏,则将所述属性设置为显示,获取所述表格中同一行中每个单元格的列宽值,再将所述属性设置为隐藏。[0037]根据本申请的另一方面,还提供了一种调节表格列宽的设备,该设备包括:[0038]第一装置,用于根据所述操作点的当前位置信息确定所述操作点处于触发区域;[0039]第二装置,用于在获取到所述操作点在所述触发区域内执行的调节触发操作之后,根据所述操作点的当前位置信息和所述相关单元格的当前位置信息获取表格的列宽信息;[0040]第三装置,用于根据所述表格的列宽信息显示所述表格。[0041]进一步地,所述第三装置,用于在获取到所述操作点在所述触发区域内执行的调节终止操作时,根据当前时刻的所述表格的列宽信息显示所述表格;或者根据每一时刻的所述表格的列宽信息显示所述表格,直至获取到所述操作点在所述触发区域内执行的调节终止操作。[0042]进一步地,所述操作点的当前位置信息包括所述操作点与网页的窗口一侧之间的第一距离,所述触发区域包括两个相邻的可见单元格之间的分隔线两侧预设宽度内的区域;[0043]所述第一装置,用于若所述第一距离与第二距离之差是否小于阈值,则确定所述操作点当前处于触发区域内,其中所述第二距离为任意两个相邻的可见单元格之间的分隔线与所述网页的窗口一侧的距离。[0044]进一步地,所述触发区域包括两个相邻的可见单元格之间的分隔线两侧预设宽度内的区域,所述相关单元格包括所述触发区域两侧的两个相邻的可见单元格;[0045]所述第二装置,包括:[0046]第二一模块,用于在获取到所述操作点在所述触发区域内执行的调节触发操作之后,根据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值,并获取同一行中其余单元格的列宽值;[0047]第二二模块,用于将所述相关单元格的列宽值和同一行中其余单元格的列宽值作为所述表格的列宽信息。[0048]进一步地,所述第二一模块在据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值时,用于根据所述操作点的当前位置信息确定所述相关单元格的分隔线的当前位置信息,以及根据所述分隔线的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值。[0049]进一步地,所述第二二模块,用于获取所述相关单元格和同一行中其余单元格的索引值,根据索引值建立保存所述列宽信息的数组,并将所述列宽值作为数组中对应的数组元素的值。[0050]进一步地,该设备还包括:[0051]第四装置,用于在根据所述表格的列宽信息显示所述表格之后,将所述表格的列宽信息由同一行中每个单元格的列宽值转换为每个单元格的列宽值占表格总宽度的百分比。[0052]进一步地,所述第三装置,用于在存在固定表头时,将所述表格的列宽信息复制为所述固定表头的列宽信息,根据所述表格的列宽信息显示所述表格,同时根据所述固定表头的列宽信息显示所述固定表头。[0053]进一步地,该设备还包括:[0054]第五装置,用于在根据所述操作点的当前位置信息确定所述操作点处于触发区域之前,获取所述表格中同一行中每个单元格的列宽值,并将所述同一行中每个单元格的列宽值转换为同一行中每个单元格的列宽值占表格总宽度的百分比。[0055]进一步地,所述第五装置在获取所述表格中同一行中每个单元格的列宽值时,用于在所述表格或所述表格的父元素的属性为隐藏时,则将所述属性设置为显示,获取所述表格中同一行中每个单元格的列宽值,再将所述属性设置为隐藏。[0056]与现有技术相比,本申请的技术方案根据操作点的当前位置信息确定所述操作点处于触发区域,只有当操作点进入到触发区域时进行列宽的调节计算,不会引起原有DOM结构的变化,所以侵入式比较低,不会与其它作用于表格的插件冲突,所以适应性比较好。[0057]同时,当分隔线两侧存在隐藏的单元格时,通过获取相邻可见单元格作为列宽调节计算的依据,避免了隐藏状态的单元格对调节结果带来的影响,并且通过获取操作点到网页的窗口一侧的距离作为计算的依据,而不是采用与DOM边界的距离作为计算的依据,可以适应网页横向宽度较大且有横向滚动条的情况,不会出现定位错误。[0058]此外,在进行列宽调节计算时,采用同时考虑相邻的两个可见单元格,并且在计算完成后采用百分比的形式表示列宽,所以在拉宽一列时,表格整体也不会变宽,此时不会破坏原有的布局方式,并且可以适应弹性布局。而在存在固定表头时,可以将表格的相关列宽调整与固定表头关联,使得固定表头也可以随之进行调整,从而有效解决有固定表头的情况下,列宽调节的问题。【附图说明】[0059]当前第1页1 2 3 4 5 
当前第1页1 2 3 4 5 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1