一种表格组件的创建及检索方法与流程

本发明涉及信息化系统技术领域，具体涉及一种表格组件的创建及检索方法。

背景技术：

随着互联网的发展，网络应用越来越多，数据的载体也随之发生变化。相较于传统的纸质数据，利用网页展示数据更加直观、便捷。而在众多展示数据的网页组件中，表格组件占有举足轻重的地位。

表格主要用以展示大量结构化的数据，由于数据量大，检索功能不可或缺。当前网页进行表格的检索，主要是通过以下两种方式实现：1)在表格上方通过多个表单组件(如：输入框、下拉选择框等)结合按钮实现部分字段的检索；2)通过单个输入框结合按钮实现全文检索。这两种方式均需要在表格上方分配单独的空间，若检索条件较多时，则分配的空间相应增加。对于单个输入框实现的全文检索，则检索效率较差，引入全文检索，则技术复杂度略高。

技术实现要素：

为了解决上述技术问题，本发明提出了一种表格组件的创建及检索方法，用以节省检索功能组件占用的网页空间，提升用户检索体验。

为实现上述目的，本发明采用以下技术方案：

一种表格组件的创建方法，包括：

引用固定javascript文件；

创建容器，为容器命名容器id；

在初始化javascript文件中配置表格组件：将检索框配置在表格每列的表头单元格内，表格组件容器内配置历史检索数据条目；

调用表格初始化接口，根据配置，初始化表格组件；

渲染表格组件，调用数据检索接口，加载表格数据。

进一步地，所述在初始化javascript文件中配置表格组件，还包括：配置表格组件的容器id、组件样式、组件可选功能、组件表头、组件数据。

所述组件可选功能包括分页、排序、列宽调整等，组件表头包括标题、检索框name等，组件数据包括数组或url。

本发明还提供了一种表格组件检索方法，利用上述方法创建的表格组件，包括：

1)检测表格检索框值；

2)检索框值发生变化时，将检索框值与历史检索数据条目匹配，若匹配成功，以匹配到的历史检索数据的检索框值作为key，根据key获取客户端缓存的相应数据，更新表格数据；

3)若匹配不成功，以检索框值作为检索条件，调用数据检索接口，检索并更新表格数据。

进一步地，检索框获取焦点时，检索框下方展示历史检索框值。

进一步地，所述步骤2)中，对于匹配成功的历史检索数据条目，该历史检索数据条目对应频次加1。

进一步地，所述步骤3)中，将检索框值和检索结果以key-value形式的历史检索数据条目存入客户端缓存中，对应频次为1。

进一步地，添加历史检索数据条目时，判断组件历史检索数据条目是否超过存储上限，若未超过存储上限，直接添加历史检索数据条目；

若已达到存储上限，替换频次最低的历史检索数据条目。

本发明的有益效果是：

本发明提供了一种表格组件的创建和检索方法，将记忆检索功能集成于表格组件之中，经过简单的配置，表格组件加载后可在表格每一列的表头单元格内集成检索框，开发人员无需单独开发检索功能，提升了开发效率；网页中无需设计用于展示检索框、标题以及检索按钮等组件的单独空间，节约了检索功能所占用的网页空间，降低了网页复杂度，使网页更加简洁，增加了网页中可用于展示数据的空间。通过记忆功能在客户端中缓存历史检索数据，提升了用户检索体验。

附图说明

图1是本发明表格组件创建方法流程图；

图2是本发明表格组件检索方法流程图。

具体实施方式

为能清楚说明本方案的技术特点，下面通过具体实施方式，并结合其附图，对本发明进行详细阐述。下文的公开提供了许多不同的实施例或例子用来实现本发明的不同结构。为了简化本发明的公开，下文中对特定例子的部件和设置进行描述。此外，本发明可以在不同例子中重复参考数字和/或字母。这种重复是为了简化和清楚的目的，其本身不指示所讨论各种实施例和/或设置之间的关系。应当注意，在附图中所图示的部件不一定按比例绘制。本发明省略了对公知组件和处理技术及工艺的描述以避免不必要地限制本发明。

如图1所示，本发明提供了一种表格组件的创建方法，包括：

s1)引用固定javascript文件；

s2)创建容器，为容器命名容器id；

s3)在初始化javascript文件中配置表格组件：将检索框配置在表格每列的表头单元格内，表格组件容器内配置历史检索数据条目；

具体地，配置表格组件的配置项包括：容器id、组件样式、组件可选功能、组件表头、组件数据等。所述组件可选功能包括分页、排序、列宽调整等，组件表头包括标题、检索框name等，组件数据包括数组或url。

s4)调用表格初始化接口，根据配置项，初始化表格组件；

s5)渲染表格组件，调用数据检索接口，加载表格数据。

基于上述表格组件的创建方法，所创建表格组件集成了记忆功能和检索功能，经过简单的配置，组件加载后可在表格每一列的表头单元格内集成检索框。运用所述表格组件进行检索的方法流程如图2所示，具体步骤包括：

1)检测表格检索框值；

2)当表格某列检索框值发生变化时，将检索框值与历史检索数据条目进行匹配，若与历史检索数据条目匹配成功，以匹配到的历史检索数据的检索框值作为key，根据key获取客户端缓存的相应数据，更新表格数据；

具体地，更新表格数据后，该匹配到的历史检索数据条目对应频次加1。

3)若与历史检索数据条目匹配不成功，以用户输入的检索框值作为检索条件，调用数据检索接口，检索并更新表格数据。

具体地，所述用户输入的检索框值和其对应的检索结果可以作为新的历史检索数据条目存入客户端缓存中，存储形式为key-value，并将其频次记为1。

当检索框获取焦点时，检索框下方还可以展示历史检索框值，提升用户检索体验。

上述虽然结合附图对本发明的具体实施方式进行了描述，但并非对本发明保护范围的限制。对于所属领域的技术人员来说，在上述说明的基础上还可以做出其它不同形式的修改或变形。这里无需也无法对所有的实施方式予以穷举。在本发明的技术方案的基础上，本领域技术人员不需要付出创造性劳动即可做出的各种修改或变形仍在本发明的保护范围以内。