本发明涉及互联网场景页面展示领域，尤指一种包含表格的页面交互装置及方法。
背景技术：
：：随着移动互联网的快速发展，人们通过浏览器看电影、办公、浏览新闻、办理生活相关事宜等，浏览器已经成为互联网访问不可或缺的条件之一。目前的浏览器没有对表格区分标题头和数据，也就是没有固定标题头的方法，大多数浏览器中展现给用户的表格中的数据量比较大，需要通过竖向滚动条滑动来展现完整的数据，但当表格中的数据项比较多时或者数据项描述的内容比较相似时，用户在滑动滚动条查看后面的数据时可能会遗忘数据项的含义，这样就需要用户滑动到顶端观看数据项的含义后再继续浏览表格中的数据，对用户体验带来极坏的影响。技术实现要素：本发明目的在于提供了一种页面中表格的交互装置及方法，提供用户在线编辑表格的功能，避免了由于客户在滑动竖向滚动条浏览后面的数据时记不清数据项的含义，提升用户使用体验。为达上述目的，本发明所提供的包含表格的页面交互装置，具体包含：页面模块、表格交互模块和表格模块；所述页面模块用于根据用户指令于当前浏览器界面生成预定页面；所述表格交互模块与所述页面模块相连，用于根据用户指令于所述预定页面中绘制对应待编辑表格，并根据所述待编辑表格于预定数据库中获得展示数据，将所述展示数据补入所述待编辑表格；以及，接收用户输入的编辑数据，根据所述编辑数据调整所述待编辑表格的显示参数后将所述编辑数据对应更新至所述预定数据库中；所述表格模块与所述表格交互模块相连，用于根据调整后的所述待编辑表格及所述预定数据库中的所述编辑数据生成展示表格并展示输出。在上述包含表格的页面交互装置中，可选的，所述表格交互模块包含表格定义单元、表格参数设置单元和表格初始化单元；所述表格定义单元用于根据所述用户指令获得所述待编辑表格的属性；所述表格参数设置单元与所述表格定义单元相连，用于根据所述待编辑表格的属性获得所述待编辑表格的配置参数；所述表格初始化单元与所述表格参数设置单元相连，用于根据所述配置参数与所述待编辑表格的属性，于预定数据库中获得展示数据生成所述待编辑表格。在上述包含表格的页面交互装置中，可选的，所述表格初始化单元还包含根据所述待编辑表格生成对应标识，并将所述待编辑表格及对应标识关联后存储至预定数据库。在上述包含表格的页面交互装置中，可选的，所述表格交互模块还包含表格操作单元和表格编辑单元；所述表格操作单元用于接收用户输入的修正数据，调整所述待编辑表格的配置参数；所述表格编辑单元用于接收用户输入的编辑数据。在上述包含表格的页面交互装置中，可选的，所述表格交互模块还包含表格修正单元和表格数据存储单元；所述表格修正单元与所述表格初始化单元相连，用于根据所述编辑数据调整所述待编辑表格的显示参数；所述表格数据存储单元用于存储预定数据库。在上述包含表格的页面交互装置中，可选的，所述表格修正单元还包含位置判断器；所述待编辑表格包含标题头和数据区；所述位置判断器用于判断所述待编辑表格中数据区的高度是否大于预定高度；当数据区的高度大于预定高度时，设置数据区的高度为预定高度显示输出；当数据区的高度小于或等于预定高度时，以预定高度显示输出；以及判断数据区是否有数据，如果有数据则设置标题头与数据区每一列的宽度一致。在上述包含表格的页面交互装置中，可选的，所述位置判断器还用于当数据区高度大于设定高度时，于所述待编辑表格中补入滚动条，所述滚动条用于提供用户滑动查看所述数据区中显示内容；当数据区高度小于或等于设定高度时，删除所述待编辑表格中的滚动条。在上述包含表格的页面交互装置中，可选的，所述位置判断器还包含：当数据区存在数据时，获取数据区第一行每一列的宽度存储于数组中，并设置标题头每一列的宽度与数据区第一行数据每一列宽度一致。本发明还提供一种包含表格的页面交互方法，所述方法具体包含：根据用户指令于当前浏览器界面生成预定页面；根据用户指令于所述预定页面中绘制对应待编辑表格，并根据所述待编辑表格于预定数据库中获得展示数据，将所述展示数据补入所述待编辑表格；接收用户输入的编辑数据，根据所述编辑数据调整所述待编辑表格的显示参数后将所述编辑数据对应更新至所述预定数据库中；根据调整后的所述待编辑表格及所述预定数据库中的所述编辑数据生成展示表格并展示输出。在上述包含表格的页面交互方法中，可选的，所述根据用户指令于所述预定页面中绘制对应待编辑表格包含：根据所述用户指令获得所述待编辑表格的属性；根据所述待编辑表格的属性获得所述待编辑表格的配置参数；根据所述配置参数与所述待编辑表格的属性，于预定数据库中获得展示数据生成所述待编辑表格。在上述包含表格的页面交互方法中，可选的，所述于预定数据库中获得展示数据生成所述待编辑表格还包含根据所述待编辑表格生成对应标识，并将所述待编辑表格及对应标识关联后存储至预定数据库。在上述包含表格的页面交互方法中，可选的，所述根据所述配置参数与所述待编辑表格的属性，于预定数据库中获得展示数据生成所述待编辑表格还包含根据所述编辑数据调整所述待编辑表格的显示参数。在上述包含表格的页面交互方法中，可选的，所述待编辑表格包含标题头和数据区；根据所述编辑数据调整所述待编辑表格的显示参数还包含判断所述待编辑表格中数据区的高度是否大于预定高度；当数据区的高度大于预定高度时，设置数据区的高度为预定高度显示输出；当数据区的高度小于或等于预定高度时，以预定高度显示输出；以及判断数据区是否有数据，如果有数据则设置标题头与数据区每一列的宽度一致。在上述包含表格的页面交互方法中，可选的，当数据区高度大于设定高度时，于所述待编辑表格中补入滚动条，所述滚动条用于提供用户滑动查看所述数据区中显示内容；当数据区高度小于或等于设定高度时，删除所述待编辑表格中的滚动条。在上述包含表格的页面交互方法中，可选的，当数据区存在数据时，获取数据区第一行每一列的宽度存储于数组中，并设置标题头每一列的宽度与数据区第一行数据每一列宽度一致。本发明还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法。本发明还提供一种计算机可读存储介质，所述计算机可读存储介质存储有执行上述方法的计算机程序。本发明的有益技术效果在于：提供了浏览器页面中表格交互的装置及方法，支持用户对页面中的表格进行编辑，编辑后展现编辑结果，使得在滑动竖向滚动条浏览表格数据时，保持数据与表头对齐。同时还可通过划分表头区、数据区，在预定区域对齐显示表头区、数据区，当在数据区内容发生变化，即表格中的数据变化时，表格每一列的宽度也就产生变化，需要保持两个区域每一列对齐，以此显著提升用户使用浏览器浏览表格数据的满意度。附图说明此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，并不构成对本发明的限定。在附图中：图1为本发明一实施例所提供的包含表格的页面交互装置的结构示意图；图2为本发明一实施例所提供的表格交互模块的结构示意图；图3为本发明一实施例所提供的表格修正单元的结构示意图；图4为本发明一实施例所提供的包含表格的页面交互方法的流程示意图；图5为本发明一实施例所提供的表格修正流程示意图；图6为本发明一实施例所提供的包含表格的页面交互方法的使用流程示意图。具体实施方式为使本发明实施例的目的、技术方案和优点更加清楚明白，下面结合实施例和附图，对本发明做进一步详细说明。在此，本发明的示意性实施例及其说明用于解释本发明，但并不作为对本发明的限定。请参考图1所示，本发明所提供的包含表格的页面交互装置，具体包含：页面模块、表格交互模块和表格模块；所述页面模块用于根据用户指令于当前浏览器界面生成预定页面；所述表格交互模块与所述页面模块相连，用于根据用户指令于所述预定页面中绘制对应待编辑表格，并根据所述待编辑表格于预定数据库中获得展示数据，将所述展示数据补入所述待编辑表格；以及，接收用户输入的编辑数据，根据所述编辑数据调整所述待编辑表格的显示参数后将所述编辑数据对应更新至所述预定数据库中；所述表格模块与所述表格交互模块相连，用于根据调整后的所述待编辑表格及所述预定数据库中的所述编辑数据生成展示表格并展示输出。在上述实施例中，所述页面模块可为jsp页面1，可为html模板，用于生成html页面以用于浏览器展示；所述表格交互模块可为表格交互构件2，可为由js组成的代码，提供表格数据交互功能。所述表格模块可为表格3，其中所述表格3可包含表头、表格数据和表格滚动条，其可为html中的table，用于以表格的形式展示数据，表头显示在数据区域的上方；实际使用时，jsp页面1通过调用表格交互构件2绘出所需的表格，具体的，jsp页面1加载完成后，调用表格交互构件2中的初始化方法，完成表格的初始化，包括滚动条是否展示、表格中内容宽度与标题头宽度对齐以及自适应高度，在jsp页面1中用户可以在调用表格交互构件2的添加/删除按钮或者编辑表格中的内容后，调整表头和数据对齐，然后调用表格交互构件2中的获取数据方法，获取编辑数据的结果，jsp页面1中的表格可以自动生成标题头且滚动条不移动标题头，以提高用户体验。该自动生成方法可采用现有技术，本发明在此不再详述。请参考图2所示，在本发明一实施例中，所述表格交互模块包含表格定义单元10、表格参数设置单元11和表格初始化单元12；所述表格定义单元10用于根据所述用户指令获得所述待编辑表格的属性；所述表格参数设置单元11与所述表格定义单元10相连，用于根据所述待编辑表格的属性获得所述待编辑表格的配置参数；所述表格初始化单元12与所述表格参数设置单元11相连，用于根据所述配置参数与所述待编辑表格的属性，于预定数据库中获得展示数据生成所述待编辑表格。其中，所述表格初始化单元12还可根据所述待编辑表格生成对应标识，并将所述待编辑表格及对应标识关联后存储至预定数据库。实际工作中，表格定义单元10主要定义表格交互构件的属性和方法，包括表格区div的唯一标识，表格区需要展示的数据，标题对象，数据区的高度，唯一标识列，可编辑列的位置等。表格参数设置单元11则在初始化表格前设置交互构件的可配置参数，例如：是否展示操作列，操作列的回调函数数组，用于存储点击操作列的操作调用的函数，唯一标识列等。表格初始化单元12主要根据调用方定义的参数初始化表格，根据标题对象的数据区列参数，输出对应列的数据，tr的id为唯一标识列的值，如果唯一标识列id不存在，则进行创建一个临时唯一标识列id。再请参考图2所示，在本发明一实施例中，所述表格交互模块还可包含表格操作单元14和表格编辑单元15；所述表格操作单元14用于接收用户输入的修正数据，调整所述待编辑表格的配置参数；所述表格编辑单元15用于接收用户输入的编辑数据。实际工作中，表格操作单元14为表格交互模块提供修正数据行的通道，滑动条滚动时滚动数据与表头对齐特征，滚动条只作用于数据区域，并不影响头部区域，调用方也可自定义操作函数，入参均为唯一标识，自定义函数需要调用方实现，自定义函数命名规则为icbctablebox_func_序号，自定义的方法按照顺序初始化到操作列中。表格编辑单元15可用于设置表格的可编辑操作列，表格数据初始化后，可编辑操作列的内容。再请参考图2所示，在本发明一实施例中，所述表格交互模块还包含表格修正单元13和表格数据存储单元16；所述表格修正单元13与所述表格初始化单元12相连，用于根据所述编辑数据调整所述待编辑表格的显示参数；所述表格数据存储单元16用于存储预定数据库。请参考图3所示，其中所述表格修正单元还可包含位置判断器；所述待编辑表格包含标题头和数据区；所述位置判断器用于判断所述待编辑表格中数据区的高度是否大于预定高度；当数据区的高度大于预定高度时，设置数据区的高度为预定高度显示输出；当数据区的高度小于或等于预定高度时，以预定高度显示输出；以及判断数据区是否有数据，如果有数据则设置标题头与数据区每一列的宽度一致。所述位置判断器还用于当数据区高度大于设定高度时，于所述待编辑表格中补入滚动条，所述滚动条用于提供用户滑动查看所述数据区中显示内容；当数据区高度小于或等于设定高度时，删除所述待编辑表格中的滚动条。所述位置判断器还包含：当数据区存在数据时，获取数据区第一行每一列的宽度存储于数组中，并设置标题头每一列的宽度与数据区第一行数据每一列宽度一致。实际工作中，表格修正单元13主要是在表格初始化数据行后调用，其具体使用方法也可参考图5所示，首先判断数据库的高度是否超过了规定高度(当前窗体高度乘以设置的百分比，此处为自定义设置)，则设置滚动条显示，否则隐藏，获取数据区任意行数据每一列的宽度存储于数组中，该单元默认选取第一行数据的列宽存储与数组中，然后循环设置标题头的宽度与数组中的值和顺序相同。表格数据存储单元16，表格展示的数据存储于data属性中，编辑后的数据更新到data中，该数据数组是表格展示数据的数据源。请参考图4所示，本发明还提供一种包含表格的页面交互方法，所述方法具体包含：s401根据用户指令于当前浏览器界面生成预定页面；s402根据用户指令于所述预定页面中绘制对应待编辑表格，并根据所述待编辑表格于预定数据库中获得展示数据，将所述展示数据补入所述待编辑表格；s403接收用户输入的编辑数据，根据所述编辑数据调整所述待编辑表格的显示参数后将所述编辑数据对应更新至所述预定数据库中；s404根据调整后的所述待编辑表格及所述预定数据库中的所述编辑数据生成展示表格并展示输出。在上述步骤s402中，所述根据用户指令于所述预定页面中绘制对应待编辑表格包含：根据所述用户指令获得所述待编辑表格的属性；根据所述待编辑表格的属性获得所述待编辑表格的配置参数；根据所述配置参数与所述待编辑表格的属性，于预定数据库中获得展示数据生成所述待编辑表格。其中，所述于预定数据库中获得展示数据生成所述待编辑表格还包含根据所述待编辑表格生成对应标识，并将所述待编辑表格及对应标识关联后存储至预定数据库。在上述实施例中，所述根据所述配置参数与所述待编辑表格的属性，于预定数据库中获得展示数据生成所述待编辑表格还包含根据所述编辑数据调整所述待编辑表格的显示参数。其中，所述待编辑表格包含标题头和数据区；请参考图5所示，根据所述编辑数据调整所述待编辑表格的显示参数还包含s100判断所述待编辑表格中数据区的高度是否大于预定高度；s101当数据区的高度大于预定高度时，设置数据区的高度为预定高度显示输出；s103当数据区的高度小于或等于预定高度时，以预定高度显示输出；以及s105判断数据区是否有数据，如果有数据则设置标题头与数据区每一列的宽度一致。又或者s102当数据区高度大于设定高度时，可于所述待编辑表格中补入滚动条，所述滚动条用于提供用户滑动查看所述数据区中显示内容；s104当数据区高度小于或等于设定高度时，删除所述待编辑表格中的滚动条。最后s107调整宽度，亦即当数据区存在数据时，获取数据区第一行每一列的宽度存储于数组中，并设置标题头每一列的宽度与数据区第一行数据每一列宽度一致。实际工作中，本发明所提供的包含表格的页面交互方法的具体实现流程可参考图1至图6所示，具体包含：步骤s200：进入页面，调用表格定义单元定义交互构件，调用表格初始化单元11设置初始化参数，输入项：标题头数组、数据数组、唯一标识所在列、是否隐藏操作列标识、自定义操作数组、数据区固定高度。步骤s201：表格定义单元10根据交互构件的属性绘制表格，如果当前列为可编辑列则使用textarea标签，如果有操作列，则展示操作列，包括自定义操作和删除链接。步骤s202：展示表格，包含标题头和数据区，从交互装置的表格存储单元16中获取数据，格式为二维数组。步骤s203：客户编辑表格中的数据后，点击保存按钮，调用交互装置的表格编辑单元的dealeditdata方法，将数据更新到表格存储单元16中。步骤s204：在设置表格参数单元11后，将回调函数按顺序设置在操作列中，客户点击操作列后，调用方自定义函数，自定义函数由调用方实现，实现方法为调用js函数，icbctablebox_func_1或者icbctablebox_func_2、icbctablebox_func_n。步骤s205：客户操作表格中的数据后，交互装置调用表格正单元13，调整表格的展示，使得表格标题头与数据区的每一列对齐。在上述实施例中，主要采用javascript脚本语言编写，定义构件交互对象，具体代码如下：非初始化字段提供set方法设置。可采用javascript脚本语言编写，初始化交互构件装置，根据icbctablebox对象中的值在页面上画出表格，该功能分为两部分，第一部分为画标题头，第二部分为画数据区，具体源码如下：采用javascript脚本语言编写，调整数据和标题头对齐，具体源码如下：采用javascript脚本语言编写，获取编辑数据，以&&分隔，具体源码如下：采用javascript脚本语言编写，获取当前窗体的高度，具体源码如下：本发明还提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法。本发明还提供一种计算机可读存储介质，所述计算机可读存储介质存储有执行上述方法的计算机程序。本发明的有益技术效果在于：提供了浏览器页面中表格交互的装置及方法，支持用户对页面中的表格进行编辑，编辑后展现编辑结果，使得在滑动竖向滚动条浏览表格数据时，保持数据与表头对齐。同时还可通过划分表头区、数据区，在预定区域对齐显示表头区、数据区，当在数据区内容发生变化，即表格中的数据变化时，表格每一列的宽度也就产生变化，需要保持两个区域每一列对齐，以此显著提升用户使用浏览器浏览表格数据的满意度。本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd-rom、光学存储器等)上实施的计算机程序产品的形式。本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施例而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。当前第1页12当前第1页12