专利名称：在网页中实现表格局部滚动显示的方法及系统的制作方法
技术领域：
本发明涉及一种数据处理和显示的方法，特别是涉及一种在网页中实现表格局部滚动显示的方法及系统。
背景技术：
随着互联网技术的发展，网络资源越来越丰富，越来越多的人通过网页浏览信息。在科技进步、网络发达的今日，Web网页的设计过程中，经常需要用到表格来呈现大量的数据，当数据的字段很多时，往往如此一个表格的呈现，都将超过一个计算机屏幕所能展现的范围。
在目前的网页设计中，当使用者浏览到此类型的表格数据时，只能运用有限的浏览器上的拖动滚动条来拖动整个网页而加以浏览；并且由于使用习惯以及网页设计技术上的问题，现有的网页浏览器中几乎没有水平滚动条，而当网页中的表格所展示的数据有任意多列(例如，超过500列)或者任意多行时，用户在现有的网页设计中就无法浏览这样的表格，即现有的网页设计技术以及现有的硬件条件无法传输这样的表格信息。在电子商务领域，经常需要使用具有任意多列的表格，甚至需要对不同列之间的数据进行比对，例如，淘宝网的交易信息列表，商品信息列表等。
现有技术解决上述问题的方法，一种是采用分页显示的方法实现，即每一网页上仅仅显示一部分的表格信息。该方法使用复杂，当用户需要将某些列的数据进行对比时，就需要不停的转换页面，导致浏览效率低下，需要多次传输网页数据，浪费网络资源。
现有技术另一种解决方式是采用嵌入制表程序的方式，用户需要浏览具有较大的表格时，点击调用所嵌入的制表程序，从而获得较佳的浏览效果，例如，中国第02102597.5号专利申请。采用嵌入制表程序的方式，虽然可以获得较佳的浏览效果，但是调用制表程序的过程非常浪费网络数据传输的资源以及用户本地系统的计算机资源。并且，由于获得较佳的浏览效果的过程复杂，不能满足更多的用户的浏览需求。总之，现有技术无法显示任意多列的数据，并保持良好的可读性。
现有技术另一种解决方式就是在网页上设置一个窗口，窗口内嵌入一多行多列的表格，通过拖动窗口上的滚动条实现对该多行多列的表格内容的浏览，该方法在一定程度上解决了在较小的区域中显示较大的表格的问题。但是针对一些需要对表格中的数据进行比对浏览的时候，即需要表格部分被冻结、部分可以滚动显示的情况，则现有技术还无法解决该问题。
发明内容
鉴于上述问题，本发明的目的是提供一种易于在网页设计中实现的，能够在网页中部分滚动显示，部分冻结显示的表格的设计方法以及表格系统。
为解决上述技术问题，本发明的目的是通过以下技术方案实现的一种在网页中实现表格局部滚动显示的方法，包括设置四个表格，以2×2的方式排列；设置表格(2)和表格(3)隐藏超出显示区域的部分；设置表格(4)隐藏超出显示区域的部分，并包括纵横两个滚动条；监视滚动条，如果横向滚动，则表格(2)在相同的方向上滚动相同的距离；如果纵向滚动，则表格(3)在相同的方向上滚动相同的距离。
优选的，所述的在网页中实现表格局部滚动显示的方法，还可以包括如果表格(2)横向滚动，则表格(4)在相同的方向上滚动相同的距离；如果表格(3)纵向滚动，则表格(4)在相同的方向上滚动相同的距离。
优选的，所述的在网页中实现表格局部滚动显示的方法，还可以包括设置一两行两列的框架表格，将表格(1)、表格(2)、表格(3)以及表格(4)分别嵌入框架表格的各单元格中。
优选的，所述的在网页中实现表格局部滚动显示的方法，可以利用可层叠样式表设置表格(2)、(3)和(4)。优选的，所述的在网页中实现表格局部滚动显示的方法，可以利用网页脚本技术监视滚动条。
一种在网页中实现表格局部滚动显示的系统，包括冻结表格头，其宽度与冻结表格体的宽度相等；冻结表格体，其高度与活动表格体的高度相等，隐藏超出显示区域的部分；活动表格头，其高度与冻结表格头的高度相等，隐藏超出显示区域的部分；活动表格体，其宽度与活动表格头的宽度相等，隐藏超出显示区域的部分，并包括纵横两个滚动条；纵向滚动子系统，用于控制冻结表格体和活动表格体在纵方向上的同时滚动；横向滚动子系统，用于控制活动表格头和活动表格体在横方向上的同时滚动。
优选的，所述的在网页中实现表格局部滚动显示的系统，可以利用网页脚本技术实现纵向滚动子系统、横向滚动子系统。优选的，所述的在网页中实现表格局部滚动显示的系统，可以利用可层叠样式表设置冻结表格头、冻结表格体、活动表格头以及活动表格体。
优选的，所述的在网页中实现表格局部滚动显示的系统，还可以包括框架表格，所述冻结表格头、冻结表格体、活动表格头以及活动表格体分别嵌入在框架表格的各单元格中。
以上技术方案可以得出，与现有技术相比，本发明具有以下的技术优点由于本发明采用四个传统的HTML表格、以及两个滚动控制系统就实现了在网页中表格的部分滚动显示和部分冻结显示，非常简单可行，不需要嵌入其他的制表程序，可以节约网络数据传输的资源以及用户本地系统的计算机资源。
由于本发明可以实现网页中局部滚动显示和部分冻结显示的表格，可以在网页中显示任意多列的数据并保持良好的可读性，从而可以满足一些大数据量表格的数据显示以及数据比对，使用者可随意、方便地把任意的表格单元格滚动到显示区域内显示；并且当表格列(或行)特别多(任意多)的时候每列的宽度不受限制，表格数据的可读性不受影响。
下面结合附图和具体实施方式
对本发明作进一步详细的说明。
图1是本发明所述实现表格局部滚动显示的方法的步骤示意图；图2是本发明所述实现表格局部滚动显示的系统的结构示意图。
具体实施例方式
本发明的核心思想在于，在网页上生成静态表格的基础上，通过设置表格属性以及控制滚动时各表格之间的关联同一滚动，从而实现了在网页上表格被划分为冻结显示和滚动显示两部分，而且两部分在滚动行为上是相关的。
参照图1，是本发明所述实现表格局部滚动显示的方法的步骤示意图。
步骤s1，设置四个表格，以2×2的方式排列。
所述表格可以采用现有的HTML代码生成静态的表格即可，并将所述四个表格在网页中以2×2的方式排列。一般的，以2×2的方式排列的四个表格，相互之间的宽度和高度具有一定的联系。下面将左上表格称作表格(1)，右上表格称作表格(2)，左下表格称作表格(3)，右下表格称作表格(4)。在以2×2的方式排列的四个表格中，表格(1)的宽度与表格(3)的宽度相等，表格(1)的高度与表格(2)的高度相等，表格(2)的宽度与表格(4)的宽度相等，表格(3)的高度与表格(4)的高度相等。
步骤s2，设置表格(2)和表格(3)隐藏超出显示区域的部分；步骤s3，设置表格(4)隐藏超出显示区域的部分，并包括纵横两个滚动条；上述步骤s2和步骤s3可以通过CSS技术实现对表格属性的设置。CSS是全称是Cascading Style Sheets(可层叠样式表)，它可以对网页上所有的元素定义与浏览器默认样式不同的样式，可以认为其就是用来决定网页上的元素是以什么样的方式显示出来的。CSS是W3C组织批准的一个辅助HTML设计的新特性，它能够保持整个HTML的统一外观。可以由设计者在设置文本之前，就指定整个文本的属性，比如颜色、字体大小等等。层叠样式表为设计网页带来了很大的灵活性。目前IE及Netscape浏览器都支持层叠样式表，目前不少HTML设计工具也都支持层叠样式表，如微软的FrontPage98。
步骤s4，监视滚动条，如果横向滚动，则表格(2)在相同的方向上滚动相同的距离；如果纵向滚动，则表格(3)在相同的方向上滚动相同的距离。
也就是说，横向滚动条与纵向滚动条共同定位了表格(4)所显示的部分。可以设定相应的程序，使得表格(3)和表格(4)可以在纵方向上同方向同速度随着纵向滚动条的滚动而移动，使得表格(2)和表格(4)可以在横方向上同方向同速度随着横向滚动条的滚动而移动，从而决定表格(2)和表格(3)的显示部分。上述监视控制过程可以采用网页脚本技术实现，例如采用JavaScript，如下所述当滚动条滚动时，各表格之间的运动关联由JavaScript来提供，其中表格(3)采用DB表示，表格(4)采用AB表示，表格(2)采用AH表示，DB.scrollTop＝AB.scrollTop；AH.scrollLeft＝AB.scrollLeft。
所述的JavaScript是一种网页脚本技术，它的主要作用是给网页上的元素添加交互行为，比如我们的表格的两部分之间在滚动时有同样的行为，这就是由JavaScript来控制的。它会监视这个表格，一旦发现其中一部分滚动了，就让另一部分向相同的方向滚动相同的距离。
下面举一个具体的实例，假设需要在网页上制作一个10×10的表格，其中第一行是表头，当第二至十行纵向滚动时，它不会滚动；第一列和第二列都是固定的，当三至十列横向滚动时，它们不会滚动。可以通过以下步骤实现首先，制作一个普通的2×2(两行两列)的表格(左上格在后面称作A，右上称作B，左下称作C，右下称作D)，并用CSS控制表格及每个单元格的尺寸。采用这样的方式可以非常简便的控制各表格之间的尺寸对应关系以及位置关系，当然本领域技术人员也可以采用其他的方式实现四个表格的2×2排列。例如使用其他任意的HTML标签配合CSS定义一个2×2的排列布局、或者使用网页框架技术(frame)定义2×2的排列布局都是可行的用来实现2×2的排列布局的方案，本发明并不对此加以限定。
然后，在A里放置一个1×2(一行两列)的普通表格(称作AT)，它的尺寸刚好等于A的尺寸。
在B里放置一个1×8(一行八列)的普通表格(称作BT)，它的高度与B相同。用CSS定义B，使它可以容纳宽度可能会大于它的BT(即隐藏超出显示区域的部分)。
在C里放置一个9×2(九行两列)的普通表格(称作CT)，它的宽度与C相同。用CSS定义C，使它可以容纳高度可能会大于它的CT(即隐藏超出显示区域的部分)。
在B里放置一个9×8(九行八列)的普通表格(称作DT)，用CSS定义D，使它可以容纳尺寸(包括宽度和高度)可能会大于它的DT(即隐藏超出显示区域的部分)，并显示纵横两个滚动条。
最后，设置一段JavaScript脚本，监视C和D的滚动事件，当滚动事件发生时，执行如下操作(1)如果操作者使用鼠标拖动D或者使用鼠标滚轮滚动D，则作如下操作a.如果是横向滚动，则使B在相同的方向上滚动相同的距离；b.如果是纵向滚动，则使C在相同的方向上滚动相同的距离；(2)如果操作者使用鼠标滚轮滚动C(现有的鼠标只可能在纵向滚动)，则作如下操作使D在相同的方向上滚动相同的距离。
以上所举的例子及说明都是为了实现任意多列的表格的部分冻结部分滚动显示的情况，本领域技术人员可以不需要任何创造性劳动的将本发明所述方法用于实现任意多行的表格的部分冻结部分滚动显示的情况。实际上，在上述的例子中，已经实现了表格第一行(即表头)的相对固定，在其他行纵向滚动时，该行是不动的，即相对固定。当然，只需要作稍许的改动，例如，将表格第一行改为表格的前五行，就可以实现表格中前五行的固定，从而实现任意多行的表格的部分冻结部分滚动显示的目的。
参照图2，是本发明所述实现表格局部滚动显示的系统的结构示意图，所述系统包括以下单元冻结表格头21(以下简称DH)，其宽度与冻结表格体的宽度相等。
冻结表格体23(以下简称DB)，其高度与活动表格体的高度相等，隐藏超出显示区域的部分。
活动表格头22(以下简称AH)，其高度与冻结表格头的高度相等，隐藏超出显示区域的部分。
活动表格体24(以下简称AB)，其宽度与活动表格头的宽度相等，隐藏超出显示区域的部分，并包括纵横两个滚动条。
纵向滚动子系统26(以下简称VS)，用于控制冻结表格体和活动表格体在纵方向上的同时滚动。
横向滚动子系统25(以下简称HS)，用于控制活动表格头和活动表格体在横方向上的同时滚动。
所述DH的单元格数量与DB中每一行的单元格数据一致；DH的某一个单元格可以是对DB相应列中所有单元格数据的一般性描述。所述AH的单元格数量与AB中每一行的单元格数据一致；AH的某一个单元格可以是对AB相应列中所有单元格数据的一般性描述。上述设置便于对表格中数据的比对。
所述系统中，DH始终是静止的；AH在纵方向上始终是静止的；DB在横方向上始终是静止的；DB和AB可以在纵方向上同方向同速度滚动；AH和AB可以在横方向上同方向同速度滚动。DB和AB在纵方向上的滚动由纵向滚动系统(VS)来控制。AH和AB在横方向上的滚动由横向滚动系统(HS)来控制。
所述纵向滚动子系统26、横向滚动子系统25可以利用网页脚本技术实现，例如，JavaScript脚本。
所述冻结表格头21、冻结表格体23、活动表格头22以及活动表格体24可以利用可层叠样式表辅助进行设置。
所述实现表格局部滚动显示的系统，还可以包括框架表格。所述冻结表格头、冻结表格体、活动表格头以及活动表格体分别嵌入在框架表格的各单元格中。所述框架表格可以非常简便的控制各表格之间的尺寸对应关系以及位置关系，使上述各表格更好的形成一个整体。优选的，所述框架表格采用两行两列的形式。
当然，本发明所述的实现表格局部滚动显示的系统，还可以由四个以上的表格单元组成，从而可以形成在由各表格组成的整体系统中，有多个部分冻结显示，同时存在多个部分滚动显示。这样可以满足更复杂的表格显示需求。
上述系统中活动表格头和冻结表格体虽然本身并没有滚动条，但是由于活动表格头和冻结表格体隐藏了超出显示区域的表格数据，所以当采用其他方式实现活动表格头和冻结表格体的滚动时，可以带动活动表格体在相同的方向上滚动相同的距离。例如，如果活动表格头横向滚动，则活动表格体在相同的方向上滚动相同的距离；如果冻结表格体纵向滚动，则活动表格体在相同的方向上滚动相同的距离。所述其他方式可以是通过按住鼠标左键拖动而导致的冻结表格体或活动表格头的滚动；以及通过鼠标中间的滚轮导致冻结表格体的滚动(由于现有的鼠标滚轮只能实现纵向的滚动)等。
上述对本发明所提供的一种实现表格局部滚动显示的系统的描述中，其未尽之信息，可以参见前述对一种实现表格局部滚动显示的方法的描述。
以上对本发明所提供的一种在网页中实现表格局部滚动显示的方法即系统进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式
及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。
权利要求
1.一种在网页中实现表格局部滚动显示的方法，其特征在于，包括设置四个表格，以2×2的方式排列；设置表格(2)和表格(3)隐藏超出显示区域的部分；设置表格(4)隐藏超出显示区域的部分，并包括纵横两个滚动条；监视滚动条，如果横向滚动，则表格(2)在相同的方向上滚动相同的距离；如果纵向滚动，则表格(3)在相同的方向上滚动相同的距离。
2.如权利要求1所述的在网页中实现表格局部滚动显示的方法，其特征在于，还包括如果表格(2)横向滚动，则表格(4)在相同的方向上滚动相同的距离；如果表格(3)纵向滚动，则表格(4)在相同的方向上滚动相同的距离。
3.如权利要求1所述的在网页中实现表格局部滚动显示的方法，其特征在于，还包括设置一两行两列的框架表格，将表格(1)、表格(2)、表格(3)以及表格(4)分别嵌入框架表格的各单元格中。
4.如权利要求1所述的在网页中实现表格局部滚动显示的方法，其特征在于，利用可层叠样式表设置表格(2)、(3)和(4)。
5.如权利要求1所述的在网页中实现表格局部滚动显示的方法，其特征在于，利用网页脚本技术监视滚动条。
6.一种在网页中实现表格局部滚动显示的系统，其特征在于，包括冻结表格头，其宽度与冻结表格体的宽度相等；冻结表格体，其高度与活动表格体的高度相等，隐藏超出显示区域的部分；活动表格头，其高度与冻结表格头的高度相等，隐藏超出显示区域的部分；活动表格体，其宽度与活动表格头的宽度相等，隐藏超出显示区域的部分，并包括纵横两个滚动条；纵向滚动子系统，用于控制冻结表格体和活动表格体在纵方向上的同时滚动；横向滚动子系统，用于控制活动表格头和活动表格体在横方向上的同时滚动。
7.如权利要求6所述的在网页中实现表格局部滚动显示的系统，其特征在于，所述纵向滚动子系统、横向滚动子系统通过网页脚本技术实现。
8.如权利要求6所述的在网页中实现表格局部滚动显示的系统，其特征在于，所述冻结表格头、冻结表格体、活动表格头以及活动表格体通过可层叠样式表进行设置。
9.如权利要求6所述的在网页中实现表格局部滚动显示的系统，其特征在于，还包括框架表格，所述冻结表格头、冻结表格体、活动表格头以及活动表格体分别嵌入在框架表格的各单元格中。
全文摘要
本发明公开了一种在网页中实现表格局部滚动显示的方法，包括设置四个表格，以2×2的方式排列；设置表格(2)和表格(3)隐藏超出显示区域的部分；设置表格(4)隐藏超出显示区域的部分，并包括纵横两个滚动条；监视滚动条，如果横向滚动，则表格(2)在相同的方向上滚动相同的距离；如果纵向滚动，则表格(3)在相同的方向上滚动相同的距离。由于本发明可以实现网页中局部滚动显示和部分冻结显示的表格，可以在网页中显示任意多列的数据并保持良好的可读性，从而可以满足一些大数据量表格的数据显示以及数据比对，使用者可随意、方便地把任意的表格单元格滚动到显示区域内显示。
文档编号G06F3/048GK1815478SQ20061005676
公开日2006年8月9日 申请日期2006年3月6日 优先权日2006年3月6日
发明者陈琪 申请人:阿里巴巴公司