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插件，使搜索框帶一個搜索字段的功能。

例如：

未完待續。。。。。。。。。。。。