本发明专利技术公开了一种复合条件过滤组件的实现方法及系统，属于UI设计和前端交互领域；所述的方法的具体步骤如下：S1组件以input作为基本展现形式；S2设置组件允许外部传入的配置项；S3渲染模板包括查询项列表模板、查询内容输入系统的模板及查询项标签模板；S4判断监听到的操作，触发交互动效；校验输入系统内置输入的合法性，允许开发者添加配置项限制用户的输入；S5根据用户输入项生成查询项标签，触发查询方法，发送查询请求；提供了在一个input中写入多个查询项及查询内容组合的实现方法，适用于进行复合查询的情况；提供配置功能，实现过程快捷高效；提供动效交互，实现对用户输入的及时反馈；查询内容输入系统的多样，满足开发需求。发需求。发需求。
【技术实现步骤摘要】
一种复合条件过滤组件的实现方法及系统
[0001]本专利技术公开一种复合条件过滤组件的实现方法及系统，涉及UI设计和前端交互
技术介绍
[0002]越来越多的复杂数据展示需要实现多项查询条件复合查询的功能，一方面原有的多项查询实现方法是通过多个input、select等元素的堆叠，需要占据较大的空间，而且缺乏查询项的标注，各查询项及查询内容的展示不够简洁直观，不方便用户使用。另一方面这些复合查询功能的使用频率较高，意味着开发者在开发的过程中需要实现大量重复的代码，开发过程繁琐，效率低下。
[0003]故现专利技术一种复合条件过滤组件的实现方法及系统，以解决上述问题。
技术实现思路
[0004]本专利技术针对现有技术的问题，提供一种复合条件过滤组件的实现方法及系统，所采用的技术方案为：一种复合条件过滤组件的实现方法，所述方法的具体步骤如下：
[0005]S1组件以input作为基本展现形式，此input作为组件的根input；
[0006]S2在配置阶段设置组件允许外部传入的配置项，包括查询项列表、各查询项的内容输入系统、查询项输入限制、默认查询项；
[0007]S3渲染阶段的模板包括查询项列表模板、各种查询内容输入系统的模板及查询项标签模板；
[0008]S4在判断阶段，一方面对监听到的用户的聚焦、失焦、键盘事件操作进行判断，触发相应的交互动效，渲染和显示相应的模板内容；另一方面对部分可能需要校验的输入系统内置输入的合法性校验，允许开发者添加配置项限制用户的输入；
[0009]S5在查询阶段，根据用户当前的输入项生成一个查询项标签，包括查询项名称和查询内容，并触发查询方法，发送查询请求。
[0010]2、所述的S1具体步骤如下：
[0011]组件以input作为基本展现形式；在渲染阶段，查询项列表模板、查询内容输入系统模板以浮层的形式在组件被触发时进行相应的渲染，于input边框处展开；查询项标签直接显示在组件的根input中。
[0012]3、所述的S2具体步骤如下：
[0013]S21接收传入的配置，生成个性化的复合条件查询框，实现开发者需要功能；开发者能够对查询项列表、查询项的内容输入系统、查询项的输入限制、默认的查询项进行配置；
[0014]S22其中查询项的输入限制包括预先内置限制项；
[0015]S23其中默认的查询项用于当用户不选择查询项直接在input中输入查询内容时，以默认的查询项生成查询项标签。
[0016]4、所述的S3具体步骤如下：
[0017]S31渲染阶段的模板包括查询项列表模板、各种查询内容输入系统的模板及查询项标签模板；
[0018]S311其中查询内容输入系统模板，对用户的输入进行引导和限制，其中input形式的查询内容输入系统模板不作单独显示，可直接在组件的根input输入；
[0019]S312根据开发者通过配置阶段传入的配置项对查询项列表、与各查询项一一对应的查询项内容输入系统进行渲染，根据用户对查询模块的触发渲染相应的查询项标签。
[0020]5、所述的S4具体步骤如下：
[0021]S41在判断阶段，对用户的聚焦、失焦、键盘事件操作进行监听判断，触发相应的交互事件和渲染模块，其中交互事件包括：聚焦事件、失焦事件、删除事件、查询项确认事件，查询内容校验事件；
[0022]S411聚焦事件：输入框聚焦时，若没有已选中的查询项，则触发查询项列表的显示，若已有选中的查询项，则触发与当前查询项对应的查询内容输入系统的显示；
[0023]S412失焦事件：输入框失焦时，隐藏查询项列表和查询内容输入系统；
[0024]S413删除事件：删除事件可选的包括根input的删除和查询项标签删除；根input删除提供删除正在输入的查询项及查询内容功能，查询项标签删除提供删除已生成的查询项标签功能；
[0025]S414查询项确认事件：确认当前选中的查询项，触发与该查询项对应的查询内容输入系统的显示；
[0026]S415查询内容校验事件：根据配置对当前输入的查询内容进行长度、格式校验。
[0027]6、所述的S5具体步骤如下：
[0028]在查询阶段，根据用户当前输入的查询内容和选中的查询项生成新的查询项标签，显示在输入框中；然后清除查询项的选中状态；并执行查询操作，调用查询接口将所有已生成的查询项标签作为复合查询条件传递到后台；
[0029]一种复合条件过滤组件的实现系统，其特征是所述的系统具体包括实现根input模块、实现配置模块、实现渲染模块、实现判断模块和实现查询模块：
[0030]实现根input模块：组件以input作为基本展现形式，此input作为组件的根input；
[0031]实现配置模块：设置组件允许外部传入的配置项，包括查询项列表、各查询项的内容输入系统、查询项输入限制、默认查询项；
[0032]实现渲染模块：包括查询项列表模板、各种查询内容输入系统的模板及查询项标签模板；
[0033]实现判断模块：一方面对监听到的用户的聚焦、失焦、键盘事件操作进行判断，触发相应的交互动效，渲染和显示相应的模板内容；另一方面对部分可能需要校验的输入系统内置输入的合法性校验，允许开发者添加配置项限制用户的输入；
[0034]实现查询模块：根据用户当前的输入项生成一个查询项标签，包括查询项名称和查询内容，并触发查询方法，发送查询请求。
[0035]8、所述实现根input模块具体为：
[0036]组件以input作为基本展现形式；在渲染阶段，查询项列表模板、查询内容输入系统模板以浮层的形式在组件被触发时进行相应的渲染，于input边框处展开；查询项标签直
接显示在组件的根input中。
[0037]9、所述实现配置模块具体包括配置生成模块、输入限制模块和默认查询模块：
[0038]配置生成模块：接收传入的配置，生成个性化的复合条件查询框，实现开发者需要功能；开发者能够对查询项列表、查询项的内容输入系统、查询项的输入限制、默认的查询项进行配置；
[0039]输入限制模块：预先对查询项的输入进行内置限制；
[0040]默认查询模块：其中默认的查询项用于当用户不选择查询项直接在input中输入查询内容时，以默认的查询项生成查询项标签。
[0041]10、所述实现渲染模块具体包括查询项列表模板模块、查询内容输入系统模板模块和查询项标签模块；
[0042]查询项列表模板模块：包括查询项列表模板、各种查询内容输入系统的模板及查询项标签模板；
[0043]查询内容输入系统模板模块：其中查询内容输入系统模板，对用户的输入进行引导和限制，其中input形式的查询内容输入系统模板不作单独显示，可直接在组件的根input输入；
[0044]查询项标签模块：根据开发者通过配置阶段传入的配置项对查询项列表、本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种复合条件过滤组件的实现方法，其特征是所述方法的具体步骤如下：S1组件以input作为基本展现形式，此input作为组件的根input；S2在配置阶段设置组件允许外部传入的配置项，包括查询项列表、各查询项的内容输入系统、查询项输入限制、默认查询项；S3渲染阶段的模板包括查询项列表模板、各种查询内容输入系统的模板及查询项标签模板；S4在判断阶段，一方面对监听到的用户的聚焦、失焦、键盘事件操作进行判断，触发相应的交互动效，渲染和显示相应的模板内容；另一方面对部分可能需要校验的输入系统内置输入的合法性校验，允许开发者添加配置项限制用户的输入；S5在查询阶段，根据用户当前的输入项生成一个查询项标签，包括查询项名称和查询内容，并触发查询方法，发送查询请求。2.根据权利要求1所述的方法，其特征是所述的S1具体步骤如下：组件以input作为基本展现形式；在渲染阶段，查询项列表模板、查询内容输入系统模板以浮层的形式在组件被触发时进行相应的渲染，于input边框处展开；查询项标签直接显示在组件的根input中。3.根据权利要求2所述的方法，其特征是所述的S2具体步骤如下：S21接收传入的配置，生成个性化的复合条件查询框，实现开发者需要功能；开发者能够对查询项列表、查询项的内容输入系统、查询项的输入限制、默认的查询项进行配置；S22其中查询项的输入限制包括预先内置限制项；S23其中默认的查询项用于当用户不选择查询项直接在input中输入查询内容时，以默认的查询项生成查询项标签。4.根据权利要求3所述的方法，其特征是所述的S3具体步骤如下：S31渲染阶段的模板包括查询项列表模板、各种查询内容输入系统的模板及查询项标签模板；S311其中查询内容输入系统模板，对用户的输入进行引导和限制，其中input形式的查询内容输入系统模板不作单独显示，可直接在组件的根input输入；S312根据开发者通过配置阶段传入的配置项对查询项列表、与各查询项一一对应的查询项内容输入系统进行渲染，根据用户对查询模块的触发渲染相应的查询项标签。5.根据权利要求4所述的方法，其特征是所述的S4具体步骤如下：S41在判断阶段，对用户的聚焦、失焦、键盘事件操作进行监听判断，触发相应的交互事件和渲染模块，其中交互事件包括：聚焦事件、失焦事件、删除事件、查询项确认事件，查询内容校验事件；S411聚焦事件：输入框聚焦时，若没有已选中的查询项，则触发查询项列表的显示；若已有选中的查询项，则触发与当前查询项对应的查询内容输入系统的显示；S412失焦事件：输入框失焦时，隐藏查询项列表和查询内容输入系统；S413删除事件：删除事件可选的包括根input的删除和查询项标签删除；根input删除提供删除正在输入的查询项及查询内容功能，查询项标签删除提供删除已生成的查询项标签功能；S414查询项确认事件：确认当前选中的...
【专利技术属性】
技术研发人员：张凯，孙思清，高传集，张建伟，宋亚萍，
申请(专利权)人：浪潮云信息技术股份公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。