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

文档序号:9375095阅读:来源:国知局
通过阅读参照以下附图所作的对非限制性实施例所作的详细描述,本申请的其它特征、目的和优点将会变得更明显:
[0060]图1为本申请实施例提供的一种调节表格列宽的方法的流程图;
[0061]图2为本实施例的调节表格列宽的方法中获取表格列宽信息的具体处理流程图;
[0062]图3为本申请实施例提供的一种调节表格列宽的设备的结构示意图;
[0063]图4为本实施例的调节表格列宽的设备中第二装置的具体结构示意图;
[0064]图5为本申请实施例提供的一种优选的调节表格列宽的设备的结构示意图;
[0065]图6为本申请实施例在确定操作点是否处于触发区域内时所涉及的表格示意图;
[0066]附图中相同或相似的附图标记代表相同或相似的部件。
【具体实施方式】
[0067]下面结合附图对本申请作进一步详细描述。
[0068]在本申请一个典型的配置中,终端、服务网络的设备和可信方均包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
[0069]内存可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。
[0070]计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括非暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
[0071]图1示出了本申请实施例提供的一种调节表格列宽的方法,该方法包括以下步骤:
[0072]步骤S101,根据所述操作点的当前位置信息确定所述操作点处于触发区域;
[0073]步骤S102,在获取到所述操作点在所述触发区域内执行的调节触发操作之后,根据所述操作点的当前位置信息和所述相关单元格的当前位置信息获取表格的列宽信息;
[0074]步骤S103,根据所述表格的列宽信息显示所述表格。
[0075]在此,所述操作点包括但不限于用户在触摸屏上的触摸位置;或者用户所操作的鼠标、轨迹球或触控板等交互装置在显示屏上的对应光标位置。本实施例中的技术方案根据操作点的当前位置信息确定所述操作点处于触发区域,只有当操作点进入到触发区域时进行列宽的调节计算,不会引起原有DOM结构的变化,所以侵入式比较低,不会与其它作用于表格的插件冲突,所以适应性比较好。
[0076]在此,本领域技术人员应当理解,上述方法的执行主体可以包括但不限于用户设备、网络设备或用户设备与网络设备通过网络相集成所构成的设备。所述用户设备包括但不限于个人计算机、触控终端等实现;所述网络设备包括但不限于如网络主机、单个网络服务器、多个网络服务器集或基于云计算的计算机集合等实现。在此,云由基于云计算(CloudComputing)的大量主机或网络服务器构成,其中,云计算是分布式计算的一种,由一群松散耦合的计算机集组成的一个虚拟计算机。
[0077]在实际应用中,所述操作点的当前位置信息包括所述操作点与网页的窗口一侧之间的第一距离,通过获取操作点到网页的窗口一侧的距离作为计算的依据,而不是采用与DOM边界的距离作为计算的依据,可以适应网页横向宽度较大且有横向滚动条的情况,不会出现定位错误。如图6中,所述操作点6A为鼠标在显示屏上的对应光标位置,该位置与网页的窗口一侧之间的距离即为第一距离601,一般情况下可以将网页的窗口左侧作为基准,即第一距离为鼠标的光标位置与网页窗口左侧的距离,本实施例中使用event.clienX表示该第一距离。而所述触发区域6B包括两个相邻的可见单元格之间的分隔线两侧预设宽度内的区域。在实际判断时,步骤SlOl根据所述操作点的当前位置信息确定所述操作点处于触发区域,可以具体包括:若所述第一距离与第二距离之差是否小于阈值,则确定所述操作点当前处于触发区域内,其中所述第二距离602为任意两个相邻的可见单元格之间的分隔线6C与所述网页的窗口一侧的距离。当确定操作点进入到触发区域后,可以改变鼠标的光标形态,用来标识已经进入到了可以进行拖拽调节的触发区域内。
[0078]由于触发区域仅为两个相邻的可见单元格之间的区域,为了避免在操作点移动到表格的边界时,即最左侧的可见单元格的左边界和最右侧的可见单元格的右边界的附近时,出现光标形状改变的情况,可以先对某一单元格是否为表格中最左侧的可见单元格或者最右侧的可见单元格进行判断。在实际应用中,可以采用的jQuery的prevAll (': visible’)和nextAll(’: visible’)对可见单元格进行遍历,判断某一可见单元格是否为表格中最左侧的可见单元格或者最右侧的可见单元格。若某一可见单元格不是表格中最左侧的可见单元格或者最右侧的可见单元格,那么该单元格的左边界和右边界均可以作为分隔线确定以确定触发区域,从而实现拖拽调节列宽。
[0079]例如对于表格左侧的第三个可见单元格th,该单元格的左边界与网页的窗口左侧的距离可以通过 j Query 的 th.get (O).getBoundingClientRect 0.left 的方式获取,采用该方式可以适用于页面横向宽度较大,存在横向滚动时的场景。由于表格左侧的第三个可见单元格的左边界即为与第二个可见单元格之间的分隔线,其右边界为与第四个可见单元格之间的分隔线。若本实施例中将该距离值定义为left,第三个可见单元格的宽度定义为th.WidthO,那么第二个可见单元格和第三个可见单元格之间的分隔线的位置可以由left确定,而第三个可见单元格和第四个可见单元格之间的分隔线的位置可以由th.width O +left确定。由此,通过对比第一距离event.clienX与left或者th.width()+left即可确定鼠标是否进入到触发位置。本实施例中,当| event.clientX-left < 3px 或者 th.width () +left-event.clientX < 3px 的情况下,也就是鼠标移动至第三个可见单元格th的边界附近3个像素的位置时,即进入了拖动调节列宽的触发区域。此时,可以使用th.css ({’ cursor’:,e-resize' })来改变鼠标的光标形状,用来标识进入了触发区域。
[0080]当鼠标进入到触发区域后,在该触发区域内按下鼠标,即表示开始在所述触发区域内执行调节触发操作,此时开始根据鼠标后续的拖动进行表格列宽信息的计算。相应地,以鼠标在按下后的抬起动作来表示调节终止操作,此时停止根据鼠标后续的移动进行表格列宽信息的计算。在实际应用中,可以在获取到按下鼠标的操作后改变一个用于标识是否处于拖拽过程的全局变量onDragStatus,将onDragStatus的值置为true时,表示当前处于拖动状态,此时会根据鼠标后续的拖动进行表格列宽信息的实时计算。
[0081]进一步地,步骤S103根据所述表格的列宽信息显示所述表格,具体包括:在获取到所述操作点在所述触发区域内执行的调节终止操作时,根据当前时刻的所述表格的列宽信息显示所述表格;或者根据每一时刻的所述表格的列宽信息显示所述表格,直至获取到所述操作点在所述触发区域内执行的调节终止操作。在实际应用中,根据计算的结果显示所述表格时,可以采用两种方式:1、根据实时计算的结果,采用每一时刻计算得到的列宽信息显示所述表格,即表格的列宽能够随着鼠标按下后的拖动位置实时发生变化,直至鼠标抬起。例如,可以设置每50ms根据鼠标的当前位置进行一次列宽信息的计算,在完成一次计算后随即进行表格显示的更新,直至鼠标抬起。2、在鼠标抬起时,获取当前时刻的列宽信息显示所述表格,即表格的列宽仅在鼠标抬起时变化。例如,列宽信息的计算同样可以设置为每50ms根据鼠标的当前位置进行一次,但是仅在鼠标抬起时获取列宽信息的计算结果,并进行表格显示的更新。在实际应用中,可以根据具体应用场景设置更新显示的方式,第一种方式显示效果更加动态、直观,但是对于设备的计算负载更高,而第二种方式对于设备的计算负载较低,但是显示效果低于第一种方式。
[0082]优选地,在获取到所述操作点在所述触发区域内执行的调节触发操作之后,根据所述操作点的当前位置信息和所述相关单元格的当前位置信息获取表格的列宽信息,具体包括如图2所示的步骤:
[0083]步骤S201,根据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值,并获取同一行中其余单元格的列宽值。在此,所述相关单元格包括所述触发区域两侧的两个相邻的可见单元格,例如本次列宽调节涉及的触发区域为表格左侧第二个可见单元格和第三个可见单元格之间的分隔线两侧3个像素的区域,那么相关单元格即为所述第二个可见单元格和第三个可见单元格。由于表格中只要改变某列中的一个单元格宽度,就会导致该列宽度的变化,该列所有的单元格的宽度均会随之发生改变的,因此在处理时仅需要针对某一行中的单元格进行处理,能就可以自动适应至整个表格。
[0084]在列宽调节时,相关单元格的列宽值随相关单元格之间的分隔线的移动而变化,而分隔线的位置即为更新显示表格时鼠标所在的位置,因此,根据所述操作点的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值,具体包括:根据所述操作点的当前位置信息确定所述相关单元格的分隔线的当前位置信息;根据所述分隔线的当前位置信息和所述相关单元格的当前位置信息计算相关单元格的列宽值。
[0085]在实际应用中,可以在两个相关单元格中先确定一个基准单元格作为后续计算的依据,以便于后续的计算。例如,用可以根据event.clientX_left〈th.width O/2来判定基准单元格,即确定鼠标的光标位置与第三个可见单元格的左侧边界还是右侧边界近一些,如果event.clientX_left〈th.width ()/2成立,贝丨』说明距离第三个可见单元格的左侧边界较近,此时可以将前一个不是隐藏
当前第2页1 2 3 4 5 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1