CN109240693A - 一种基于react的多条件组合搜索控件的创建方法 - Google Patents

Abstract

本发明公开了一种基于react的多条件组合搜索控件的创建方法，包括以下步骤：(1)使用html代码搭建所需要的搜索框组件，通过css来编写相应的样式；(2)创建一个数组用来存储所有的搜索条件值，初始时置为空，当页面进行刷新时也重置为空；(3)为所述搜索框组件绑定相应的click事件，但并不触发搜索条件；(4)用户对搜索条件进行选择或输入；(5)编写搜索函数；(6)将搜索框组件、事件、函数封装起来，作为一个控件进行使用。采用该方法创建的搜索控件可以实现对搜索结果的精准定位，尤其是针对有大量订单往来的管理系统，可以提高利用效率。

Description

一种基于react的多条件组合搜索控件的创建方法

技术领域

本发明涉及搜索控件技术领域，具体涉及一种基于react的多条件组合搜索控件的创建方法。

背景技术

作为一种构建用户界面的工具，毫无疑问React已经是最流行的前端框架之一，它具有很多非常实用而便捷的功能性组件。在实际的开发过程中，搜索控件的使用率是很高的，它需要获取用户输入或选择的数据，将其传送至后台，通过后台数据库的筛选，得到即将展示的搜索结果。无论是交易系统、管理系统，都必不可少的应用到搜索控件，然而React所提供给我们的搜索组件的使用较为单一刻板，并且缺乏多条件组合搜索功能，常常不适用于具体的业务实现，例如进销存系统，它常常需要非常精准甚至苛刻的搜索条件，并且库存量级或者说流水量级越是庞大，搜索条件就越加复杂，否则，很容易出现成千上万条相似的搜索结果。因此，只有一个搜索条件的原生组件，是远远达不到需求方所要求的效果的。

发明内容

为了克服上述技术缺陷，本发明提供了一种基于react的多条件组合搜索控件的创建方法，采用该方法创建的搜索控件可以实现对搜索结果的精准定位，尤其是针对有大量订单往来的管理系统，可以提高利用效率。

为了达到上述技术效果，本发明采用如下技术方案：

一种基于react的多条件组合搜索控件的创建方法，其特征在于，包括以下步骤：

(1)使用html代码搭建所需要的搜索框组件，通过css来编写相应的样式；

(2)创建一个数组用来存储所有的搜索条件值，初始时置为空，当页面进行刷新时也重置为空；

(3)为所述搜索框组件绑定相应的click事件，但并不触发搜索条件；

(4)用户对搜索条件进行选择或输入，并按下搜索按钮，通过event.targe直接获取用户选择或输入的dom元素，将其装入条件数组中；

(5)编写搜索函数，当用户按下搜索按钮时，首先判断搜索条件数组是否为空，目的在于满足后台查询接口有值才传参数的要求，避免误操作，如果数组不为空，便将打包好的数据数组发送给后台作为条件进行搜索；

(6)将搜索框组件、事件、函数封装起来，作为一个控件进行使用。

进一步的技术方案为，所述搜索框组件包括日期选择控件、下拉框、输入框、搜索按钮。

下面对本发明进行进一步的说明，本发明基于React技术，使用ES6的基本方法进行相关的逻辑控制，对ant design的DatePicker、Select、Button、Input进行了功能绑定并二次封装，实现了通过生成日期、组织机构、币种、订单号等多种条件对目标订单的精准搜索。相较于以往的原生搜索控件，本发明实现了对搜索结果的精准定位，避免了大量级系统在查询过程中出现成千上万条相似的搜索结果的问题。具体表现为可以通过选择或输入订单的组织机构来源、订单金额、订单所使用的币种、订单的生成日期等条件共同搜索目标订单。

与现有技术相比，本发明具有如下有益效果：通过提供了一款方便简洁的多条件组合搜索控件，实现对搜索结果的精准定位，尤其是针对有大量订单往来的管理系统，使用本发明会大大提高利用效率。并且该发明的外形和使用都设置的非常简单，只是保留了必要成分。这样在下次开发的过程中，既可以使用这个现有的组件，也可以对它的样式和功能进行微调。而且它的封装打包也为其他需要实现该功能的前端开发人员提供了便利。不仅如此，它还具有非常简洁直白的外观，使的用户在使用过程中非常的赏心悦目，而且操作非常的简单，大大提升了用户体验。

附图说明

图1为本发明的多条件组合搜索控件初始效果图；

图2为点击单个组件，弹出组件选项的效果图；

图3为选中多个条件进行搜索的效果图。

具体实施方式

为使本设计的目的、技术方案和优点更加清楚，下面结合附图和实施例对本发明做进一步地详细描述。

实施例1

一种基于react的多条件组合搜索控件的创建方法，包括以下步骤：

(1)首先使用html代码搭建所需要的搜索框组件，通过css来编写相应的样式；本发明以一个日期选择控件、一个下拉框、一个输入框、一个搜索按钮为例；

(2)创建一个数组用来存储所有的搜索条件值，初始时置为空，当页面进行刷新时也重置为空；

(3)为所述搜索框组件绑定相应的click事件，但并不触发搜索条件；

(4)用户对搜索条件进行选择或输入，并按下搜索按钮，通过event.targe直接获取用户选择或输入的dom元素，将其装入条件数组中；

(5)编写搜索函数，当用户按下搜索按钮时，首先判断搜索条件数组是否为空，目的在于满足后台查询接口有值才传参数的要求，避免误操作，如果数组不为空，便将打包好的数据数组发送给后台作为条件进行搜索；

(6)将搜索框组件、事件、函数封装起来，作为一个控件进行使用。本发明的多条件组合搜索控件，展示弹出的日期选择弹窗、下拉框选项弹窗以及信息输入框页面，分别包含了两个完整的日历视图，用于选择日期的开始和结束时间；对人民币、美元、日语等币种的选择；以及对订单号吗、名称的输入。展示用户对多种搜索条件选择之后的信息：在初始的“开始日期”和“结束日期”处将显示选中的时间节点，在初始的“全部币种”处显示选中的币种，在初始的“请输入订单名称”处显示输出的文字，同时调用接口将数值传送给后台，实现查询操作。

图1为本发明创建的多条件组合搜索控件的初始状态效果图，即用户打开界面时所观测的初始效果，显示的文字提示用户各个控件可选择的的查询内容。

图2所示为点击单个组件，弹出组件选项的效果图，用户点击日期选择的图标，弹出日期选择弹窗，里面包含了两个完整的日历视图，分别用于选择日期的开始和结束时间。“<>”可用于选择月份，“《》”图标可用于选择年份；用户单击币种下拉框，可在人民币、日元、美元中进行选择；而输入框中用户可直接输入想要查询的订单账号、名称等。

图3所示为选中多个条件进行搜索的效果图：用户选择日历中的某两个时间节点点击，同时选中人民币作为搜索币种，并输入订单名称，点击搜索按钮，将会调用接口将该多个选项组成的数据传送给后台，以实现该有的查询操作。

通过上述过程，实现了通过生成日期、组织机构、币种、订单号等多种条件对目标订单的精准搜索，避免了大量级系统在查询过程中出现成千上万条相似的搜索结果的问题。本发明对该组件进行了封装操作，便于它的移植和复用，提高编程人员开发的效率，便利了广大的前端开发人员。

尽管这里参照本发明的解释性实施例对本发明进行了描述，上述实施例仅为本发明较佳的实施方式，本发明的实施方式并不受上述实施例的限制，应该理解，本领域技术人员可以设计出很多其他的修改和实施方式，这些修改和实施方式将落在本申请公开的原则范围和精神之内。

Claims (2)

1.一种基于react的多条件组合搜索控件的创建方法，其特征在于，包括以下步骤：

(1)使用html代码搭建所需要的搜索框组件，通过css来编写相应的样式；

(2)创建一个数组用来存储所有的搜索条件值，初始时置为空，当页面进行刷新时也重置为空；

(3)为所述搜索框组件绑定相应的click事件，但并不触发搜索条件；

(4)用户对搜索条件进行选择或输入，并按下搜索按钮，通过event.targe直接获取用户选择或输入的dom元素，将其装入条件数组中；

(5)编写搜索函数，当用户按下搜索按钮时，首先判断搜索条件数组是否为空，目的在于满足后台查询接口有值才传参数的要求，避免误操作，如果数组不为空，便将打包好的数据数组发送给后台作为条件进行搜索；

(6)将搜索框组件、事件、函数封装起来，作为一个控件进行使用。

2.根据权利要求1所述的基于react的多条件组合搜索控件的创建方法，其特征在于，所述搜索框组件包括日期选择控件、下拉框、输入框、搜索按钮。