本发明涉及互联网
技术领域：
：，具体涉及一种实现网页表格行/列锁定的方法和装置。
背景技术：
：：近年来随着网络系统的快速发展，b/s(browser/server，浏览器/服务器)架构的应用越来越广泛，随之带来的便是web页面(即网页)展示的效果也越来越多样化。从早前简单的文字图片页面展现，到现在丰富多彩的多媒体展现方式，各种各样的页面展现方式竭力满足着人们越来越高的设计需求。网页表格table就是其中一种能够满足用户的展现需求并方便人们进行网页布局的元素。由于计算机屏幕宽度有限，很多情况下当网页表格的数据很多、很宽时横向拖动会无法看到列头信息，从而带来很多麻烦。如果能够实现行/列锁定无疑能够改善用户体验。目前，实现网页表格行/列锁定的通常做法是：将网页表格进行拆分和拼接，先拆分为几个子表格，然后对子表格重新排列布局，达到行/列锁定效果。例如，将表格表头和列头分别放到单独的表格中，而将数据行放到另一个表格，拖动数据所在的表格时利用js动态实现其他表格的同步拖动，从而控制实现表格的行/列锁定。网页的展现依赖于html(hypertextmark-uplanguage，超文本标记语言)文档对应的dom(documentobjectmodel，文档对象模型)树形结构。在网页对应的原生dom树中，用于页面展现的表格，是一个不可拆分的完整的结构。而现有的这种对表格进行拆分实现行/列锁定方案则存在下列缺陷：一方面，对表格原有的dom结构的侵入修改非常大，过程繁琐、费时费力。另一方面，可能导致一系列兼容问题，后期维护困难。因此，亟需一种实现网页表格行/列锁定的新方案。技术实现要素：本发明提供了一种实现网页表格行/列锁定的方法和装置，以解决现有技 术，破坏原有网页表格的结构进而导致的过程繁琐、耗时费力以及维护困难等问题。根据本发明的一个方面，提供了一种实现网页表格行/列锁定的方法，该方法包括：获取原表格所在的超文本标记语言html文档对应的文档对象模型dom树，在dom树中原表格的同级新建一个表格，并设置新表格与原表格待锁定行/列样式一致且内容相同；获取原表格待锁定行/列在页面的位置，并将新表格移动并层叠至原表格待锁定行/列的位置上；在层叠下方的原表格滚动时，通过控制层叠上方的新表格，保持新表格不动。可选地，获取原表格待锁定行/列在页面的位置包括：通过网络脚本语言javascript获取原表格待锁定行/列在页面的宽度值和高度值，将获取的宽度值和高度值分别赋值给新表格的层叠样式表css的宽度属性和高度属性。可选地，在层叠下方的原表格滚动时，通过控制层叠上方的新表格，保持新表格不动包括：在层叠下方的原表格滚动时，通过控制层叠上方的新表格的css的定位属性，保持新表格不动。可选地，原表格的父节点为div块，div块的css的overflow属性值为自动，宽度属性为预定阈值；控制层叠上方的新表格的css的定位属性包括：控制将新表格的css的定位属性值设为绝对定位。可选地，设置新表格与原表格待锁定行/列样式一致且内容相同包括：获取原表格的待锁定行/列的相应属性值和内容；将获取的原网页表格的待锁定行/列的相应属性值，赋值给新表格的相应属性，使得新表格与原表格的样式一致；将原表格待锁定行/列的内容传递给新表格，使得新表格与原表格待锁定行/列的内容相同。根据本发明的另一个方面，提供了一种实现网页表格行/列锁定的装置，该装置包括：新表格创建单元，用于获取原表格所在的超文本标记语言html文档对应的文档对象模型dom树，在dom树中原表格的同级新建一个表格，并设置新表格与原表格待锁定行/列样式一致且内容相同；层叠单元，用于获取原表格待锁定行/列在页面的位置，并将新表格移动并层叠至原表格待锁定行/列的位置上；锁定单元，用于在层叠下方的原表格滚动时，通过控制层叠上方的新表格，保持新表格不动。可选地，层叠单元，还用于通过网络脚本语言javascript获取原表格待锁定行/列在页面的宽度值和高度值，将获取的宽度值和高度值分别赋值给新表格的css的宽度属性和高度属性。可选地，锁定单元，具体用于在层叠下方的原表格滚动时，通过控制层叠上方的新表格的css的定位属性，保持新表格不动。可选地，新表格创建单元，具体用于获取原表格的待锁定行/列的相应属性值和内容；将获取的原网页表格的待锁定行/列的相应属性值，赋值给新表格的相应属性，使得新表格与原表格的样式一致。本发明提供的这种实现网页表格行/列锁定的方法和装置具有如下优点：首先，不会破坏原有表格的文档对象模型dom结构，保持原表格标记完整性，不影响表格原有功能，无需修改表格原有样式。其次，避免了对原表格元素的拆分和繁琐的重新排列布局，只需要在同级增加一个表格元素，再利用js和css根据实际情况对新表格加以控制，即可实现在原表格滚动时的待锁定行/列的锁定效果。再次，不会引起兼容性问题，因为对原有样式不做修改所以也不会破坏表格原有的样式兼容性。最后，方便后期维护。由于原有dom树依然完整，原表格结构完整，因此在对表格原有功能拓展新功能上比较容易。附图说明图1是本发明一个实施例的一种实现网页表格行/列锁定的方法的流程图；图2是本发明另一个实施例的一种实现网页表格行/列锁定的方法的流程图；图3a是本发明一个实施例的原表格滚动前表格层叠展现效果示意图；图3b是本发明一个实施例的原表格滚动时列锁定效果示意图；图4是本发明一个实施例一种实现网页表格行/列锁定的装置的框图。具体实施方式在使用网页表格显示数据时，由于显示屏幕尺寸都是有限的，所以经常会遇到数据过多而无法通过一个屏幕完全显示的问题，虽然可以借助页面上显示滚动条来拖动表格而实现完全显示。但是，很多情况下表格都带有表头和列头，如果纵向拖动滚动条则往往就看不到表头，而横向拖动滚动条又会出现看不到列头的问题，此时，就需要用到网页表格的行/列锁定功能，通过锁定表格的某一行或某几行(也可以是某一列或某几列)，从而在表格其他的行/列随滚动条滚动时，锁定的行/列保持不动，以方便查看表格的锁定行/列的内容。本发明实施例即是提供一种实现网页表格的行/列锁定效果的技术方案。本发明的设计构思是：针对现有技术表格行/列锁定时，必须拆分原表格然后对拆分后的表格重新排版组合带来的问题，本发明提出了一种相反的技术手段，即不对原有的表格对象进行修改，而是在原表格对象同级新增另一个表格对象，新表格对象仅包含待锁定行/列的内容信息，并且新表格对象展现样式与原表格待锁定行/列的样式完全一致。然后再利用css(cascadingstylesheets，层叠样式表)以及网络脚本语言js(javascript)协同控制，将新表格附在原表格的对应位置，进而实现原表格的行/列锁定效果，并且还保持了原表格的结构，方案实现简单也方便后续维护。实施例一图1是本发明一个实施例的一种实现网页表格行/列锁定的方法的流程图，参见图1，本实施例的这种实现网页表格行/列锁定的方法包括下列步骤：步骤101，获取原表格所在的超文本标记语言html文档对应的文档对象模型dom树，在所述dom树中原表格的同级新建一个表格，并设置新表格与所述原表格待锁定行/列样式一致且内容相同；本实施例中，行/列表示的含义是行或者列。步骤102，获取所述原表格待锁定行/列在页面的位置，并将新表格移动并层叠至所述原表格待锁定行/列的位置上；步骤103，在层叠下方的所述原表格滚动时，通过控制层叠上方的所述新表格，保持所述新表格不动。通过图1所示的方法，不需要将原有表格进行拆分，而是新建一个表格，并将新表格与原表格待锁定行/列的样式调整为完全一致且新表格的内容与原表格待锁定行/列的内容相同，这样再将新表格层叠到原表格之上，当原表格横向滚动或纵向滚动时，控制新表格保持不动，从而实现了原表格行/列锁定的效果。需要说明的是，本实施例中，只是示意性的说明了该实现网页表格行/列锁定的方法包括的步骤以及这些步骤之间的实现过程，例如，本实施例中可以先执行步骤101，然后执行步骤102，最后执行步骤103。但是在其他实施例中，可先执行步骤102而后执行步骤101，或者步骤101和步骤102同时执行。即本发明实施例对该实现网页表格行/列锁定的方法包括的步骤之间的实现顺序不做限制。实施例二本实施例中，以如何实现网页表格列锁定效果进行示意性说明。但是需要说明的是本发明的技术方案不限于实现列锁定，也可以实现行锁定或者同时实现行锁定或列锁定，对此不作限制。图2是本发明另一个实施例的一种实现网页表格行/列锁定的方法的流程图，参见图2，本实施例的实现网页表格列锁定的方法的流程包括：首先，获取需要增加列锁定功能的网页表格所在的html(hypertextmarkuplanguage，超文本标记语言)文档，找到原网页表格table标记。利用dom(documentobjectmodel，文档对象模型)树对该html文档进行解析，得到该html文档对应的dom树。然后，在得到原表格的dom树的基础上，不对这个原表格结构进行拆分，而在原表格的dom树同级节点上，新建一个表格对象(即新表格与原表格是同胞节点关系)。同时，根据原表格待锁定的列的内容设置新表格带有的内容，将新表格的其他样式调整至与原表格待锁定列的展示效果完全一样，相当于生成一个原表格锁定列部分的副本。这样就可以得到一张与原表格锁定列内容、样式一模一样的新表格。例如，在设计新表格的外观样式时，获取原表格中待锁定列的宽度值(如果待锁定列为一列，则获取该列单元格的宽度，如果待锁定列为多列，则获取多列单元格的总宽度值)。接着，利用网络脚本语言js和css，将这个新表格移动至原表格的对应位置，使其覆盖在原表格上，得到层叠的表格展现(如，将新表格层叠到原表格的待锁定列在页面的位置)。本实施例中，通过网络脚本语言javascript获取原表格待锁定行/列在页面的宽度值和高度值，将获取的宽度值和高度值分别赋值给新表格的层叠样式表css的宽度属性和高度属性，得到层叠的表格展现。这里获取的宽度值，例如是原表格在页面呈现时，与页面左边界的距离。获取原表格在页面的宽度值是为了得到原表格在页面的位置，从而方便将新表格呈现在原表格之上，得到层叠的表格展现，进而实现表格列锁定效果，方便用户查看网页表格。最后，控制层叠上方的新表格的层叠样式表css的定位属性，使得层叠下方的原表格滚动时新表格保持不动。实施例三图3a是本发明一个实施例的原表格滚动前表格层叠展现效果示意图，图3b是本发明一个实施例的原表格滚动时列锁定效果示意图，以下结合图3a、图3b以及图3a和图3b的对应的部分代码，对本实施例的网页表格列锁定的实现过程和实现效果进行详细说明。在本实施例中，由上面的代码可知，原表格的父节点为div块，div块的css的overflow属性值为自动(即overflow:auto)，宽度属性为预定阈值 (即width:200px)。当原表格(即div中出现的第一个table)的父节点是一个overflow为auto，具有固定宽度的div标记时，本实施例将新表格的css的定位属性position设置为绝对定位absolute，并使用js获取原表格的高度属性top的值，将该top值赋给新表格的top属性，以将新表格层叠在原表格上。由于层叠上方锁定列的新表格只包含原表格锁定列的内容，且外观与原表格锁定完全列相同，当原表格需要锁定时使新表格固定不动，从而实现原表格的列锁定。<div>标签是html文档中提供的一种标签。div是html中的一个块级元素。<div>可定义html文档中的分区或节(division/section)。<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。并且，层叠下方的原表格横向滚动与增加列锁定功能前完全相同，无需做任何修改。这样就实现了在不破坏原表格标记结构的前提下，利用层叠表格展现方式，低侵入的实现了原表格的列锁定效果。参见图3a，本实施例中的原网页表格包括三行四列，第一行为表头信息(包括：id、name、age、date四个数据项)，第一列是id以及具体的id值，由图3a可见，本实施例中的原表格有两条记录，两条记录的id分别为1和2。参见前面贴出的代码，当需要锁定第一列即id所在的列时，在原table所在的div块中，新建一个table，并设置新table包含原table第一列的内容(如图3b中所示的新表格包含id数据项，并包含两个具体id值1和2)并设置样式与第一列的样式完全一致。根据原table在页面的位置，设置新table出现的位置，以将新table层叠在原table的第一列上。然后设置新table的css的position属性为absolute。参见图3b，当监测到向右滑动页面上的横向滚动条事件时，原表格发生滚动(根据横向滚动条向右滚动的位置，原表格右边相应的内容出现在页面可视范围内，而左边相应的内容被隐藏)。而由于设置了层叠在原表格上方的新表格，这样当监测到向右滑动页面上的横向滚动条事件时，位于原表格左边的id所在列是保持不动的，始终可以在页面中显示，并不会被隐藏，从而实现了列锁定的效果，方便查看id所在列的内容。实施例四图4是本发明一个实施例的一种实现网页表格行/列锁定的装置的框图，参见图4，该实现网页表格行/列锁定的装置40包括：新表格创建单元401，用于获取原表格所在的超文本标记语言html文档对应的文档对象模型dom树，在dom树中原表格的同级新建一个表格，并设置新表格与原表格待锁定行/列样式一致且内容相同；层叠单元402，用于获取原表格待锁定行/列在页面的位置，并将新表格移动并层叠至原表格待锁定行/列的位置上；锁定单元403，用于在层叠下方的原表格滚动时，通过控制层叠上方的新表格，保持新表格不动。本实施例中，层叠单元402还用于通过网络脚本语言javascript获取原表格待锁定行/列在页面的宽度值和高度值，将获取的宽度值和高度值分别赋值给新表格的层叠样式表css的宽度属性和高度属性。本实施例中，锁定单元403具体用于控制层叠上方的新表格的层叠样式表css的定位属性，使得层叠下方的原表格滚动时新表格保持不动。新表格创建单元401，用于获取原表格的待锁定行/列的相应属性值和内容；将获取的原网页表格的待锁定行/列的相应属性值，赋值给新表格的相应属性，使得新表格与原表格的样式一致；将原表格待锁定行/列的内容传递给新表格，使得新表格与原表格待锁定行/列的内容相同。需要说明的是，本实施例中的这种实现网页表格行/列锁定的装置的工作过程是和前面实施例中实现网页表格行/列锁定的方法的实现步骤相对应的，所以，实现网页表格行/列锁定的装置的具体工作过程可以参见前述实现网页表格行/列锁定方法部分的相关内容说明，在此不再赘述。综上所述，本实施例的这种实现网页表格行/列锁定的方法和装置，通过在原表格同级新建一个表格，该新表格仅包含锁定行/列部分的内容，且展现样式与原表格待锁定行/列的样式完全相同。然后利用css样式以及js脚本协同控制，将新表格层叠在原表格对应位置，进而实现原表格行/列锁定效果。由此，本发明技术方案具有如下优点：1、低侵入。不对原有的table标记进行修改，不破坏原有表格的dom 结构，保持了原表格的完整性，不影响原有功能。2、实现简单。避免了对原表格的拆分和繁琐的重新排列布局工作，只需要在原表格同级增加一个新表格，进而利用js和css根据实际情况加以控制即可实现列锁定功能，省时省力。3、不会带来兼容性问题。因为对原有表格样式未做修改，不破坏原有表格的样式兼容性。4、方便维护。由于原表格结构完整，因而后期对表格原有功能拓展新增功能也比较容易。以上所述仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。凡在本发明的精神和原则之内所作的任何修改、等同替换、改进等，均包含在本发明的保护范围内。当前第1页12当前第1页12