CN113449226A - 一种表格创建方法 - Google Patents

Abstract

本申请涉及一种表格创建方法，通过在网页生成互相嵌套的第一块级标签和第二块级标签，并将一个表格写入所述第二块级标签，由于外层增加固定高度的第一块级标签，所以表格将不会把第一块级标签同级的其它标签内容，挤出网页浏览器的可视区之外。通过创建一个与所述表格相互映射的数组，依照网页的分页顺序，依次将每一页的表格选中数据置入所述数组中并顺次排列；可以实现对出现在不同页面的所有表格选中数据同时进行批量操作。

Description

一种表格创建方法

技术领域

本申请涉及表格渲染技术领域，特别是涉及一种表格创建方法。

背景技术

对于客户端网页系统中大批量的数据显示，一般采用表格显示。基于市场上现有的用户界面组件库生成的网页表格，当表格内容比较多时，当前页面无法展示表格的所有内容，不能灵活的根据用户界面展示用户所需要的数据。

其一，当前页面无法展示表格的所有内容。表格在用户界面中的高度，都是取决于自身及子元素。导致表格的高在用户界面上是固定的，如果表格的高度过高，表格下方的内容没法在当前界面展示，界面会出现纵向滚动条，表格下方的内容需要滑动滚动条才能展示。其二，不能跨页和跨条件点选表格内的数据，即无法进行批量操作，比如用户需要操作的两条数据分别在第一页和第二页，就没法选中这两条数据同时进行批量处理。

发明内容

基于此，有必要针对基于传统表格创建方法创建的表格无法展示表格的所有内容，不能灵活的根据用户界面展示用户所需要的数据的问题，提供一种表格创建方法。

本申请提供一种表格创建方法，所述方法包括：

在网页生成互相嵌套的第一块级标签和第二块级标签，并将一个表格写入所述第二块级标签；所述第二块级标签在所述第一块级标签内部，且所述第一块级标签的高度设置为固定高度；

向表格中增添所需显示的表格数据；

判断是否接收到批量操作表格选中数据的指令；

若接收到批量操作表格选中数据的指令，则创建一个与所述表格相互映射的数组，依照网页的分页顺序，依次将每一页的表格选中数据置入所述数组中并顺次排列；

对所述数组中的所有表格选中数据进行批量操作。

本申请涉及一种表格创建方法，通过在网页生成互相嵌套的第一块级标签和第二块级标签，并将一个表格写入所述第二块级标签，由于外层增加固定高度的第一块级标签，所以表格将不会把第一块级标签同级的其它标签内容，挤出网页浏览器的可视区之外。通过创建一个与所述表格相互映射的数组，依照网页的分页顺序，依次将每一页的表格选中数据置入所述数组中并顺次排列；可以实现对出现在不同页面的所有表格选中数据同时进行批量操作。

附图说明

图1为本申请一实施例提供的一种表格创建方法的流程示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

本申请提供一种表格创建方法。需要说明的是，本申请提供的表格创建方法的应用于任何类型的表格。可选地，本申请提供的表格创建方法用于创建网页客户端中的网页中的表格。

此外，本申请提供的一种表格创建方法不限制其执行主体。可选地，本申请提供的一种表格创建方法的执行主体的可以为一种网页客户端。

如图1所示，在本申请的一实施例中，所述表格创建方法包括如下S100至S500：

S100，在网页生成互相嵌套的第一块级标签和第二块级标签，并将一个表格写入所述第二块级标签。所述第二块级标签在所述第一块级标签内部，且所述第一块级标签的高度设置为固定高度。

S200，向表格中增添所需显示的表格数据。

S300，判断是否接收到批量操作表格选中数据的指令。

S400，若接收到批量操作表格选中数据的指令，则创建一个与所述表格相互映射的数组。依照网页的分页顺序，依次将每一页的表格选中数据置入所述数组中并顺次排列。

S500，对所述数组中的所有表格选中数据进行批量操作。

具体地，S100中，由于在第二块级标签的外层增加固定高度的第一块级标签，所以表格将不会把与第一块级标签同级的其它标签内容，挤出网页浏览器的可视区之外。例如，在网页的一个页面中，第一块级标签是网页中的新闻区域，与第一块级标签同级的还有广告区域和天气预报区域。本申请通过设置第一块级标签的高度为固定高度，再向第一块级标签嵌入第二块级标签，以及向第二块级标签写入表格，表格内展示的内容再多，表格也不会超过第一块级标签划定的范围，而把广告区域和天气预报区域显示的内容挤出本页面。

S200属于填充所需显示的表格数据的步骤。

S300至S500属于表格创建完成之前的批量操作确认步骤。因为在S200中填充的一些表格数据可能会出现错误，需要批量删除或者调整，抑或是S200中填充的一些表格数据需要批量增添一些图片等附加数据，因此可能会需要进行批量操作。因此S300至S500通过将每一页的表格选中数据置入所述数组中并顺次排列，实现了对出现在不同页面的所有表格选中数据同时进行批量操作的功能。

可选地，将每一页的表格选中数据置入所述数组中时，表格选中数据以JSON字符串的数据形式存放于数组中。

当然，网页的分页顺序并不是唯一的。分页顺序可以是第一页，第二页，第三页......直至最后一页，那么数组的形式就是{第一页的表格选中数据，第二页的表格选中数据，第三页的表格选中数据，......最后一页的表格选中数据}。分页顺序也可以是第一页，第五页，第三页，第二页......这种打乱的随机顺序，也就是说，每次置入数组中的表格选中数据对应的页码是可以任意页码。这个分页顺序也可以预设。

本实施例中，在S500执行之后，表格创建完毕，网页客户端对表格进行渲染。

本实施例中，通过在网页生成互相嵌套的第一块级标签和第二块级标签，并将一个表格写入所述第二块级标签，由于外层增加固定高度的第一块级标签，所以表格将不会把第一块级标签同级的其它标签内容，挤出网页浏览器的可视区之外。通过创建一个与所述表格相互映射的数组，依照网页的分页顺序，依次将每一页的表格选中数据置入所述数组中并顺次排列，可以实现对出现在不同页面的所有表格选中数据同时进行批量操作。

在本申请的一实施例中，所述S100包括如下S110至S130：

S110，在网页中添加第一块级标签，控制所述第一块级标签应用盒布局样式，设置并固定所述第一块级标签的高度。

S120，在所述第一块级标签的内部置入第二块级标签。

S130，将一个表格写入所述第二块级标签中，并所述第二块级标签设置为所述表格的父容器。

具体地，第一块级标签的高度可以为预设高度，所述预设高度依据网页页面的显示内容的排布方式设定。

本实施例中，通过在第二块级标签的外层增加固定高度的第一块级标签，且设置表格写入第二块级标签，使得表格不会把第一块级标签同级的其它标签内容，挤出网页浏览器的可视区之外。

在本申请的一实施例中，所述S400包括如下S411至S414：

S411，创建一个与所述表格相互映射的数组。

S412，获取网页的第一页中的所有表格选中数据，为每一个表格选中数据附加选中标记，将第一页中的所有表格选中数据置入所述数组。

S413，切换至下一页，获取当前页中的所有表格选中数据，为每一个表格选中数据附加选中标记，将当前页中的所有表格选中数据置入所述数组的末尾。

S414，反复执行所述S413，直至所有页面中的表格选中数据均被置入所述数组。

具体地，可以为每一个表格设置一个数组标签，表格设置表格标签，这样数组和表格可以相互映射。

S412中，为每一个表格选中数据附加选中标记，该选中标记可以以key-value的键值对的方式设置，即表格选中数据可以设置一个序号，作为键，设置一个键值作为选中标记，该键值与序号形成映射关系。

在本申请的一实施例中，所述S400包括如下S421至S422：

S421，创建一个与所述表格相互映射的数组。

S422，依据不同条件筛选出网页中符合第一条件的所有表格数据置入所述数组；表格数据在所述数组中依照条件的序号从小到大的顺序排列。

具体地，本实施例相对于S411至S414，增加了筛选的条件设定，本实施例存在同一页面根据不同条件筛选出的表格数据。那么数组的呈现方式就是{第一条件对应的第一页的表格数据，第一条件对应的第二页的表格数据，...第一条件对应的最后一页的表格数据，第二条件对应的第一页的表格数据，第二条件对应的第二页的表格数据，...第二条件对应的最后一页的表格数据，...，最后一个条件对应的第一页的表格数据，最后一个条件对应的第二页的表格数据，...最后一个条件对应的最后一页的表格数据}，可见数组中的所有表格数据，总体上按条件的序号从小到大的顺序排列，直至最后一个条件的表格数据排布完毕。

在本申请的一实施例中，所述条件包括第一条件和第二条件，所述S422包括如下S422a至S422f：

S422a，依据第一条件筛选出网页的第一页中符合第一条件的所有表格数据，作为第一类数据，为每一个第一类数据附加选中标记，将第一页中的所有第一类数据置入所述数组。

S422b，依切换至下一页，继续筛选出当前页中的所有第一类数据，为每一个第一类数据附加选中标记，将当前页中的所有第一类数据置入所述数组的末尾。

S422c，依反复执行所述S422b，直至所有页面中的第一类数据均被置入所述数组。

S422d，依依据第二条件筛选出网页的第一页中符合第二条件的所有表格数据，作为第二类数据，为每一个第二类数据附加选中标记，将第一页中的所有第二类数据置入所述数组。

S422e，依切换至下一页，继续筛选出当前页中的所有第二类数据，为每一个第二类数据附加选中标记，将当前页中的所有第二类数据置入所述数组的末尾。

S422f，依反复执行所述S422e，直至所有页面中的第二类数据均被置入所述数组。

具体地，可见，本实施例有两个条件，分别为第一条件和第二条件，数组中的所有表格数据，总体上按条件的序号从小到大的顺序排列。同一条件下的表格数据，按网页的页码从小到大的顺序排列。数组的呈现方式就是{第一条件对应的第一页的表格数据，第一条件对应的第二页的表格数据，...第一条件对应的最后一页的表格数据，第二条件对应的第一页的表格数据，第二条件对应的第二页的表格数据，...第二条件对应的最后一页的表格数据}。

在本申请的一实施例中，在所述S500之后，所述表格创建方法还包括如下S600至S700：

S600，监控所述表格的列宽是否产生变化，在监控到所述表格的列宽产生变化后，记录列宽变化后的表格的列宽，并存储为表格列宽数据，将所述表格列宽数据发送至服务器存储。

S700，监控网页是否刷新，每当网页刷新时，从所述服务器中获取与所述表格对应的表格列宽数据，依据所述表格列宽数据设置所述表格的列宽。

具体地，在S500批量处理完毕后，本实施例还增加了列宽的调整步骤。在表格创建时，用户可能存在对某一列，或者某几列的列宽不满意的情况出现，因此，会对列宽进行调整。用户在用户界面上进行拖拽列宽的操作，网页客户端会实时监控表格的列宽是否产生变化，从而执行S600至S700的保留列宽数据存储于服务器，下次网页刷新直接从服务器拉取列宽数据的步骤。

本实施例中，在S700执行之后，表格创建完毕，网页客户端对表格进行渲染。

本实施例可以实现当网页再次被浏览时，网页刷新后的表格的列宽还是保持在上次调整列宽后的数值，不会还原成列宽的初始数值。

在本申请的一实施例中，所述表格列宽数据为多个以JSON数据格式呈现的键值对。所述S600包括如下S610至S640：

S610，判断所述表格是否存在某一列的列宽产生变化。

S620，若所述表格存在某一列的列宽产生变化，则读取当前表格的每一列的列宽，以及每一列的唯一标识符。

S630，以唯一标识符为键，以列宽为键的值，生成每一列的键值对，生成多个键值对。

S640，将所有键值对以JSON数据格式发送至所述服务器存储。

具体地，用户可以通过用户界面进行拖拽操作，客户端的网页可以响应这个拖拽操作，从而改变列宽。当然每一列的列宽都需要设置唯一标识符来区分不同的列。这样才可以生成不同列对应的键值对。后续从服务器提取键值对时也需要通过唯一标识符来拿去对应列的键值数据。

在本申请的一实施例中，所述S700包括如下S710至S740：

S710，判断是否收到网页刷新请求。

S720，当收到网页刷新请求时，刷新网页，向所述服务器发送获取表格列宽数据的请求。

S730，从所述服务器获取多个以JSON数据格式呈现的键值对。

S740，依据键值对中唯一标识符与键值的关系，匹配网页中表格的每一列，依据键值设置网页中表格的每一列的列宽。

在本申请的一实施例中，在所述S500之后，所述S600之前，还包括如下步骤：

S550，设置所述表格每一列的列宽初始值，存储为表格列宽数据。将所述表格列宽数据发送至所述服务器存储。

在本申请的一实施例中，每当所述服务器接收到新的表格列宽数据并执行存储动作时，覆盖所述服务器中原有的表格列宽数据。

本申请还提供一种表格创建系统，所述表格创建系统包括网页客户端和服务器。所述网页客户端与所述服务器通信连接。所述网页客户端用于执行前述任意一个实施例中所提及的表格创建方法。所述服务器用于存储网页客户端发送的表格列宽数据。每当所述服务器接收到网页客户端发送的新的表格列宽数据并执行存储动作时，自动覆盖所述服务器中原有的表格列宽数据，以实现表格列宽数据的更新。

以上所述实施例的各技术特征可以进行任意的组合，各方法步骤也并不做执行顺序的限制，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请的保护范围应以所附权利要求为准。

Claims (10)

1.一种表格创建方法，其特征在于，所述方法包括：

在网页生成互相嵌套的第一块级标签和第二块级标签，并将一个表格写入所述第二块级标签；所述第二块级标签在所述第一块级标签内部，且所述第一块级标签的高度设置为固定高度；

向表格中增添所需显示的表格数据；

判断是否接收到批量操作表格选中数据的指令；

若接收到批量操作表格选中数据的指令，则创建一个与所述表格相互映射的数组，依照网页的分页顺序，依次将每一页的表格选中数据置入所述数组中并顺次排列；

对所述数组中的所有表格选中数据进行批量操作。

2.根据权利要求1所述的表格创建方法，其特征在于，所述在网页生成互相嵌套的第一块级标签和第二块级标签，并将一个表格写入所述第二块级标签，包括：

在网页中添加第一块级标签，控制所述第一块级标签应用盒布局样式，设置并固定所述第一块级标签的高度；

在所述第一块级标签的内部置入第二块级标签；

将一个表格写入所述第二块级标签中，并所述第二块级标签设置为所述表格的父容器。

3.根据权利要求2所述的表格创建方法，其特征在于，所述创建一个与所述表格相互映射的数组，依照网页的分页顺序，依次将每一页的表格选中数据置入所述数组中并顺次排列，包括：

创建一个与所述表格相互映射的数组；

获取网页的第一页中的所有表格选中数据，为每一个表格选中数据附加选中标记，将第一页中的所有表格选中数据置入所述数组；

切换至下一页，获取当前页中的所有表格选中数据，为每一个表格选中数据附加选中标记，将当前页中的所有表格选中数据置入所述数组的末尾；

反复执行前一步骤，直至所有页面中的表格选中数据均被置入所述数组。

4.根据权利要求2所述的表格创建方法，其特征在于，所述创建一个与所述表格相互映射的数组，依照网页的分页顺序，依次将每一页的表格选中数据置入所述数组中并顺次排列，包括：

创建一个与所述表格相互映射的数组；

依据不同条件筛选出网页中符合第一条件的所有表格数据置入所述数组；表格数据在所述数组中依照条件的序号从小到大的顺序排列。

5.根据权利要求4所述的表格创建方法，其特征在于，所述条件包括第一条件和第二条件，所述依据不同条件筛选出网页中符合第一条件的所有表格数据置入所述数组，包括：

依据第一条件筛选出网页的第一页中符合第一条件的所有表格数据，作为第一类数据，为每一个第一类数据附加选中标记，将第一页中的所有第一类数据置入所述数组；

切换至下一页，继续筛选出当前页中的所有第一类数据，为每一个第一类数据附加选中标记，将当前页中的所有第一类数据置入所述数组的末尾；

反复执行前一个步骤，直至所有页面中的第一类数据均被置入所述数组；

依据第二条件筛选出网页的第一页中符合第二条件的所有表格数据，作为第二类数据，为每一个第二类数据附加选中标记，将第一页中的所有第二类数据置入所述数组；

切换至下一页，继续筛选出当前页中的所有第二类数据，为每一个第二类数据附加选中标记，将当前页中的所有第二类数据置入所述数组的末尾；

反复执行前一个步骤，直至所有页面中的第二类数据均被置入所述数组。

6.根据权利要求3或5所述的表格创建方法，其特征在于，所述对所述数组中的所有表格选中数据进行批量操作之后，所述方法还包括：

监控所述表格的列宽是否产生变化，在监控到所述表格的列宽产生变化后，记录列宽变化后的表格的列宽，并存储为表格列宽数据，将所述表格列宽数据发送至服务器存储；

监控网页是否刷新，每当网页刷新时，从所述服务器中获取与所述表格对应的表格列宽数据，依据所述表格列宽数据设置所述表格的列宽。

7.根据权利要求6所述的表格创建方法，其特征在于，所述表格列宽数据为多个以JSON数据格式呈现的键值对，所述监控所述表格的列宽是否产生变化，在监控到所述表格的列宽产生变化后，记录所述表格的列宽，并存储为表格列宽数据，将所述表格列宽数据发送至所述服务器存储，包括：

判断所述表格是否存在某一列的列宽产生变化；

若所述表格存在某一列的列宽产生变化，则读取当前表格的每一列的列宽，以及每一列的唯一标识符；

以唯一标识符为键，以列宽为键的值，生成每一列的键值对，生成多个键值对；

将所有键值对以JSON数据格式发送至所述服务器存储。

8.根据权利要求7所述的表格创建方法，其特征在于，所述监控网页是否刷新，每当网页刷新时，从所述所述服务器中获取与所述表格对应的表格列宽数据，依据所述表格列宽数据设置所述表格的列宽，包括；

判断是否收到网页刷新请求；

当收到网页刷新请求时，刷新网页，向所述服务器发送获取表格列宽数据的请求；

从所述服务器获取多个以JSON数据格式呈现的键值对；

依据键值对中唯一标识符与键值的关系，匹配网页中表格的每一列，依据键值设置网页中表格的每一列的列宽。

9.根据权利要求8所述的表格创建方法，其特征在于，在所述监控所述表格的列宽是否产生变化之前，还包括：

设置所述表格每一列的列宽初始值，存储为表格列宽数据，将所述表格列宽数据发送至所述服务器存储。

10.根据权利要求9所述的一种表格创建方法，其特征在于，每当所述服务器接收到新的表格列宽数据并执行存储动作时，覆盖所述服务器中原有的表格列宽数据。

Images