jquery queryBuilder过滤插件的使用

1.此插件用于过滤搜索的功能，功能强大，可实现复杂条件过滤，单选多选的等条件的过滤。还可以在插件中调用其他插件。

　　下载地址和文档阅读：http://querybuilder.js.org/

　　效果图：

 

2.全英文文档，感觉学起来有丢丢的困难==

需要引入的文件

<link rel="stylesheet" href="${ctx}/resource/plugins/QueryBuilder/css/query-builder.default.min.css">

//基于jquery，还要引入jquery框架

<script type="text/javascript" src="${ctx}/resource/plugins/QueryBuilder/js/query-builder.standalone.js"></script>

<script type="text/javascript" src="${ctx}/resource/plugins/QueryBuilder/i18n/query-builder.zh-CN.js"></script>//中文显示　

3.基本用法

<div id='builder-basic'></div>

$('#builder-basic').queryBuilder({
　　plugins: {
    'bt-selectpicker':{liveSearch:true,style:'btn-inverse'},//引用了selectpicker
    'bt-tooltip-errors':{delay:100},
    },

　　filters: data,
　　rules: rules_basic

})

上面的引用了selectpicker插件，使搜索框带一个搜索字段的功能。

例如：

未完待续。。。。。。。。。。。。

 

转载于:https://www.cnblogs.com/wgl0126/p/8890983.html