CN107423072B - web页面动态列筛选与搜索表格数据的方法和装置 - Google Patents

Abstract

本发明公开了一种web页面动态列筛选与搜索表格数据的方法和装置，该方法包括：根据所接收到的对于表格的一列中的数据的相关设置，把在相关设置中调用的编程接口和相关设置对应的数据属性封装为相关设置的接口；根据相关设置的接口中的数据属性，封装与相关设置的接口对应的前端JavaScript接口；根据从前端JavaScript接口接收的数据筛选请求，反复地采用相关设置的接口搜索表格中的数据并且实时地通过前端JavaScript接口向web页面返回搜索到的数据。本发明公开的方法和装置能够向web页面提供实时数据。

Description

web页面动态列筛选与搜索表格数据的方法和装置

技术领域

本发明涉及数据处理技术，尤指一种web页面动态列筛选与搜索表格数据的方法和装置。

背景技术

Excel是微软办公套装软件的一个重要的组成部分，它可以进行各种数据的处理、统计分析和辅助决策操作，广泛地应用于管理、统计财经、金融等众多领域。当把Excel程序和文件嵌入web页面的时候，需要安装ActiveX插件或者调用VisualBasic数据库等等，因此Excel程序和文件所需加载的数据量大，加载耗时长。为了解决这个问题，可以采用原生的Java语言脚本(又称为“JavaScript”)来编写与Excel程序相同或类似的功能，实现与Excel程序相同或类似的功能。但目前用于实现与Excel程序相同或类似的功能的JavaScript框架没有集成提供实时数据的功能。

发明内容

为了解决上述技术问题，本发明提供了一种web页面动态列筛选与搜索表格数据的方法和装置，能够向web页面提供在表格中显示的实时数据。

为了达到本发明目的，本发明的实施例提供了一种web页面动态筛选与搜索表格数据的方法，包括：

根据所接收到的对于表格的一列中的数据的相关设置，把在相关设置中调用的编程接口和相关设置对应的数据属性封装为相关设置的接口；

根据相关设置的接口中的数据属性，封装与相关设置的接口对应的前端JavaScript接口；

根据从前端JavaScript接口接收的数据筛选请求，反复地根据数据筛选请求中的数据筛选条件采用相关设置的接口搜索表格中的数据并且实时通过前端JavaScript接口向采用JavaScript动态显示表格的web页面返回搜索到的数据。

进一步地，在一个可选的实施例中，在根据所接收到的对于表格的一列中的数据的相关设置，把在相关设置中调用的编程接口和相关设置对应的数据属性封装为相关设置的接口的步骤之前，该方法还包括：

接收对于表格的一列中的数据的相关设置。

进一步地，在一个可选的实施例中，在接收对于表格的一列中的数据的相关设置的步骤之前，该方法还包括：

建立表格，并且将数据加载到表格。

进一步地，在一个可选的实施例中，根据从前端JavaScript接口接收的数据筛选请求，反复地根据数据筛选请求中的数据筛选条件采用相关设置的接口搜索表格中的数据并且实时地向web页面返回搜索到的数据的步骤，包括：

根据从前端JavaScript接口接收的数据筛选请求，反复地根据数据筛选请求中的数据筛选条件采用相关设置的接口搜索相关设置的接口对应的表格中的一列数据，并且实时地通过前端JavaScript接口向采用JavaScript动态显示表格的web页面返回搜索到的数据在表格中所在的行的数据。

为了达到本发明目的，另一方面，本发明的实施例提供了一种web页面动态列筛选与搜索表格数据的装置，该装置包括：

相关设置接口封装模块，设置成根据所接收到的对于表格的一列中的数据的相关设置，把在相关设置中调用的编程接口和相关设置对应的数据属性封装为相关设置的接口；

前端接口封装模块，设置成根据相关设置的接口中的数据属性，封装与相关设置的接口对应的前端JavaScript接口；

数据筛选与搜索模块，设置成根据从前端JavaScript接口接收的数据筛选请求，反复地根据数据筛选请求中的数据筛选条件采用相关设置的接口搜索表格中的数据并且实时通过前端JavaScript接口向采用JavaScript动态显示表格的web页面返回搜索到的数据。

进一步地，在一个可选的实施例中，该装置还包括：

相关设置接收模块，设置成在相关设置接口封装模块封装相关设置的接口之前，接收对于表格的一列中的数据的相关设置。

进一步地，在一个可选的实施例中，相关设置接收模块还设置成：

在接收对于表格的一列中的数据的相关设置之前，建立表格，并且将数据加载到表格。

进一步地，在一个可选的实施例中，数据筛选与搜索模块设置成：

根据从前端JavaScript接口接收的数据筛选请求，反复地根据数据筛选请求中的数据筛选条件采用相关设置的接口搜索相关设置的接口对应的表格中的一列数据，并且实时地通过前端JavaScript接口向采用JavaScript动态显示表格的web页面返回搜索到的数据在表格中所在的行的数据。

与现有技术相比，本发明通过将在设置数据时所调用的编程接口和在设置数据时所针对的数据的属性作为一个整体封装为一个相关设置的接口(该接口可以作为后端接口)，以及封装对应的前端JavaScript接口，相关设置的接口作为一个整体一方面可以从所耦接的前端JavaScript接口接收数据筛选请求，另一方面可以处理所接收到的数据筛选请求，并且反复向其耦接的数据库发出相应指令，对该相关设置的接口所耦接的数据库中的表格执行搜索操作，从而向web页面返回实时搜索到的数据。本发明的技术方案实现了类似于微软公司的Excel软件的动态列数据的筛选与搜索的功能。

本发明的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本发明而了解。本发明的目的和其他优点可通过在说明书、权利要求书以及附图中所特别指出的结构来实现和获得。

附图说明

附图用来提供对本发明技术方案的进一步理解，并且构成说明书的一部分，与本申请的实施例一起用于解释本发明的技术方案，并不构成对本发明技术方案的限制。

图1是本发明的实施例提供的web页面动态列筛选与搜索表格数据的方法的流程图；

图2是本发明的实施例提供的web页面动态列筛选与搜索表格数据的装置的框图；

图3显示了前端JavaScript接口所显示的动态数据和列的属性；

图4显示了前端JavaScript接口的列的属性的选择面板。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，下文中将结合附图对本发明的实施例进行详细说明。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互任意组合。

在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行。并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本发明实施例提供了一种web页面动态列筛选与搜索时表格数据的方法，如图1所示，该方法包括步骤S105至步骤S113。

步骤S105，根据所接收到的对于表格的一列中的数据的相关设置，把在相关设置中调用的编程接口和相关设置对应的数据属性封装为相关设置的接口；

步骤S109，根据相关设置的接口中的数据属性，封装与相关设置的接口对应的前端JavaScript接口；

步骤S113，根据从前端JavaScript接口接收的数据筛选请求，反复地根据数据筛选请求中的数据筛选条件采用相关设置的接口搜索表格中的数据并且实时通过前端JavaScript接口向采用JavaScript动态显示表格的web页面返回搜索到的数据。

需要说明的是，相关设置的接口与存储表格的数据库耦接，并且相关设置的接口还与前端JavaScript接口耦接。

在本文中的前端JavaScript接口是面向用户的接口，向用户展示以表格的形式显示的实时数据以及操作选项，并且通过该操作选项接收用户的输入。例如，如图3所示，前端JavaScript接口向用户展示了动态数据(例如，图中的“在线”)，其中动态数据所在的每一列(例如，动态数据“在线”所在的列的属性为“状态”)分别对应于不同的前端JavaScript接口。并且用户可以在列的属性的下拉列表中的多个选项中进行选择。例如，在图3中左侧的“设备归类”列的下拉列表中，展示了三个选项(即，“网络安全”、“存储”、“主机”)，用户可以通过选择选项来筛选在表格中显示的数据。也就是说，前端JavaScript接口既可以向web页面提供实时的动态数据，也可以通过列的属性来接收用户的数据筛选请求。此外，还提供了前端JavaScript接口选择面板，如图4所示，在该选择面板中，选项被划分为两列(即，“隐藏的列”和“显示的列”)，在“隐藏的列”中列出的列的属性及其对应的数据尚未向用户显示，而在“显示的列”中列出的列的属性及其对应的数据已向用户显示。用户可以通过选择列的属性归属于“隐藏的列”或“显示的列”，来选择隐藏或显示动态数据。

当接收到搜索到的动态数据时，采用JavaScript动态显示表格的web页面显示动态数据。

本发明实施例提供的方法的有益效果在于：通过在步骤S105中将在设置数据时所调用的编程接口和在设置数据时所针对的数据的属性作为一个整体封装为一个相关设置的接口(该接口可以作为后端接口)，以及在步骤S109中定义前端JavaScript接口，相关设置的接口作为一个整体一方面可以从所耦接的前端JavaScript接口接收数据筛选请求，另一方面可以处理所接收到的数据筛选请求，并且反复向其耦接的数据库发出相应指令，对该相关设置的接口所耦接的数据库中的表格执行搜索操作，从而向web页面返回实时搜索到的数据。本发明的技术方案实现了类似于微软公司的Excel软件的动态列数据的筛选与搜索的功能。

将在设置数据时所调用的编程接口和在设置数据时所针对的数据的属性作为一个整体封装成一个相关设置的接口，以及定义所对应的前端JavaScript接口，可以将前端JavaScript接口作为通用的接口，使本发明实施例提供的方法可以应用于各种操作系统平台(例如，谷歌公司的安卓(Android)操作系统以及苹果公司的iOS操作系统)、各种浏览器(例如，采用IE内核的微软公司的Internet Explorer浏览器以及采用WebKit内核的Opera软件公司的Opera浏览器)。

进一步地，在一个可选的实施例中，在步骤S105之前，该方法还包括：

接收对于表格的一列中的数据的相关设置。

在这里，由用户对表格的一列中的数据进行相关设置。

进一步地，在一个可选的实施例中，在接收对于表格的一列中的数据的相关设置的步骤之前，该方法还包括：

建立表格，并且将数据加载到表格。

进一步地，在一个可选的实施例中，步骤S113包括：

根据从前端JavaScript接口接收的数据筛选请求，反复地根据数据筛选请求中的数据筛选条件采用相关设置的接口搜索相关设置的接口对应的表格中的一列数据，并且实时地通过前端JavaScript接口向采用JavaScript动态显示表格的web页面返回搜索到的数据在表格中所在的行的数据。

在这里，所返回的数据不仅有在表格中的一列数据中采用相关设置的接口搜索到的若干数据，还有该若干数据在表格中所在的行中的其他数据。因此，这里所指的数据可以是一行数据，或者是若干行数据。

应当理解的是，以上的实施例中所提到的“动态列筛选与搜索表格数据”不限于是筛选与搜索在表格中的竖直方向上排列的数据，也可以是筛选与搜索在表格中的水平方向上排列的数据；当所筛选与搜索的表格数据是在表格中的竖直方向上排列的数据时，“搜索到的数据在表格中所在的行的数据”指的是在表格中在水平方向上与搜索到的数据对齐的数据；当所筛选与搜索的数据是在表格中的水平方向上排列的数据时，“搜索到的数据在表格中所在的行的数据”指的是在表格中在竖直方向上与搜索到的数据对齐的数据。

另一方面，本发明实施例还提供了一种web页面动态列筛选与搜索表格数据的装置，如图2所示，该装置包括相关设置接口封装模块205、前端接口封装模块209以及数据筛选与搜索模块213。

相关设置接口封装模块205，设置成根据所接收到的对于表格的一列中的数据的相关设置，把在相关设置中调用的编程接口和相关设置对应的数据属性封装为相关设置的接口；

前端接口封装模块209，设置成根据相关设置的接口中的数据属性，封装与相关设置的接口对应的前端JavaScript接口；

数据筛选与搜索模块213，设置成根据从前端JavaScript接口接收的数据筛选请求，反复地根据数据筛选请求中的数据筛选条件采用相关设置的接口搜索表格中的数据并且实时通过前端JavaScript接口向采用JavaScript动态显示表格的web页面返回搜索到的数据。

需要说明的是，相关设置的接口与存储表格的数据库耦接，并且相关设置的接口还与前端JavaScript接口耦接。

本发明实施例提供的装置的有益效果在于：通过将在设置数据时所调用的编程接口和在设置数据时所针对的数据的属性作为一个整体封装为一个相关设置的接口(该接口可以作为后端接口)，以及定义前端JavaScript接口，相关设置的接口作为一个整体一方面可以从所耦接的前端JavaScript接口接收数据筛选请求，另一方面可以处理所接收到的数据筛选请求，并且反复向其耦接的数据库发出相应指令，对该相关设置的接口所耦接的数据库中的表格执行搜索操作，从而向web页面返回实时搜索到的数据。本发明的技术方案实现了类似于微软公司的Excel软件的动态列数据的筛选与搜索的功能。

将在设置数据时所调用的编程接口和在设置数据时所针对的数据的属性作为一个整体封装成一个相关设置的接口，以及定义所对应的前端JavaScript接口，可以将前端JavaScript接口作为通用的接口，使本发明实施例提供的方法可以应用于各种操作系统平台(例如，谷歌公司的安卓(Android)操作系统以及苹果公司的iOS操作系统)、各种浏览器(例如，采用IE内核的微软公司的Internet Explorer浏览器以及采用WebKit内核的Opera软件公司的Opera浏览器)。

进一步地，在一个可选的实施例中，该装置还包括：

相关设置接收模块，设置成在相关设置接口封装模块封装相关设置的接口之前，接收对于表格的一列中的数据的相关设置。

在这里，相关设置接收模块接收由用户对表格的一列中的数据进行相关设置。

进一步地，在一个可选的实施例中，相关设置接收模块还设置成：

在接收对于表格的一列中的数据的相关设置之前，建立表格，并且将数据加载到表格。

进一步地，在一个可选的实施例中，数据筛选与搜索模块213设置成：

根据从前端JavaScript接口接收的数据筛选请求，反复地根据数据筛选请求中的数据筛选条件采用相关设置的接口搜索相关设置的接口对应的表格中的一列数据，并且实时地通过前端JavaScript接口向采用JavaScript动态显示表格的web页面返回搜索到的数据在表格中所在的行的数据。

虽然本发明所揭露的实施方式如上，但上述的内容仅为便于理解本发明而采用的实施方式，并非用以限定本发明。任何本发明所属领域内的技术人员，在不脱离本发明所揭露的精神和范围的前提下，可以在实施的形式及细节上进行任何的修改与变化，但本发明的专利保护范围，仍须以所附的权利要求书所界定的范围为准。

Claims (8)

1.一种web页面动态列筛选与搜索表格数据的方法，其特征在于，包括：

根据所接收到的对于表格的一列中的数据的相关设置，把在所述相关设置中调用的编程接口和所述相关设置对应的数据属性封装为所述相关设置的接口；

根据所述相关设置的接口中的所述数据属性，封装与所述相关设置的接口对应的前端JavaScript接口；

根据从所述前端JavaScript接口接收的数据筛选请求，反复地根据所述数据筛选请求中的数据筛选条件采用所述相关设置的接口搜索所述表格中的数据并且实时地通过所述前端JavaScript接口向采用JavaScript动态显示表格的web页面返回搜索到的数据。

2.根据权利要求1所述的web页面动态列筛选与搜索表格数据的方法，其特征在于，在所述根据所接收到的对于表格的一列中的数据的相关设置，把在所述相关设置中调用的编程接口和所述相关设置对应的数据属性封装为所述相关设置的接口的步骤之前，所述方法还包括：

接收对于所述表格的一列中的数据的相关设置。

3.根据权利要求2所述的web页面动态列筛选与搜索表格数据的方法，其特征在于，在所述接收对于所述表格的一列中的数据的相关设置的步骤之前，所述方法还包括：

建立所述表格，并且将数据加载到所述表格。

4.根据权利要求1所述的web页面动态列筛选与搜索表格数据的方法，其中，所述根据从所述前端JavaScript接口接收的数据筛选请求，反复地根据所述数据筛选请求中的数据筛选条件采用所述相关设置的接口搜索所述表格中的数据并且实时地通过所述前端JavaScript接口向采用JavaScript动态显示表格的web页面返回搜索到的数据的步骤，包括：

根据从所述前端JavaScript接口接收的数据筛选请求，反复地根据所述数据筛选请求中的数据筛选条件采用所述相关设置的接口搜索所述相关设置的接口对应的所述表格中的一列数据，并且实时地向所述采用JavaScript动态显示表格的web页面返回搜索到的数据在所述表格中所在的行的数据。

5.一种web页面动态列筛选与搜索表格数据的装置，其特征在于，所述装置包括：

相关设置接口封装模块，设置成根据所接收到的对于表格的一列中的数据的相关设置，把在所述相关设置中调用的编程接口和所述相关设置对应的数据属性封装为所述相关设置的接口；

前端接口封装模块，设置成根据所述相关设置的接口中的所述数据属性，封装与所述相关设置的接口对应的前端JavaScript接口；

数据筛选与搜索模块，设置成根据从所述前端JavaScript接口接收的数据筛选请求，反复地根据所述数据筛选请求中的数据筛选条件采用所述相关设置的接口搜索所述表格中的数据并且实时通过所述前端JavaScript接口向采用JavaScript动态显示表格的web页面返回搜索到的数据。

6.根据权利要求5所述的web页面动态列筛选与搜索表格数据的装置，其特征在于，所述装置还包括：

相关设置接收模块，设置成在所述相关设置接口封装模块封装所述相关设置的接口之前，接收对于所述表格的一列中的数据的相关设置。

7.根据权利要求6所述的web页面动态列筛选与搜索表格数据的装置，所述相关设置接收模块还设置成：

在接收对于所述表格的一列中的数据的相关设置之前，建立所述表格，并且将数据加载到所述表格。

8.根据权利要求5所述的web页面动态列筛选与搜索表格数据的装置，其中，所述数据筛选与搜索模块设置成：

根据从所述前端JavaScript接口接收的数据筛选请求，反复地根据所述数据筛选请求中的数据筛选条件采用所述相关设置的接口搜索所述相关设置的接口对应的所述表格中的一列数据，并且实时地向所述采用JavaScript动态显示表格的web页面返回搜索到的数据在所述表格中所在的行的数据。

Images