【亲测免费】 jQuery QueryBuilder 教程

2026-01-17 08:48:01作者：温玫谨Lighthearted

1. 项目介绍

jQuery QueryBuilder 是一个用于创建用户友好的查询和过滤器的 jQuery 插件。它适用于高级搜索页面、后台管理界面等场景。该组件高度可定制，可以与其他jQuery小部件（如自动完成、滑块和日期选择器）集成，生成结构化的JSON规则，适合各种查询逻辑。

2. 项目快速启动

首先确保已安装jQuery。然后，你可以通过以下方式引入jQuery QueryBuilder：

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery.min.js"></script>

<!-- 引入jQuery QueryBuilder CSS 和 JS -->
<link href="dist/css/query-builder.default.min.css" rel="stylesheet">
<script src="dist/js/query-builder.standalone.min.js"></script>

接下来，设置基本配置并初始化插件：

$(function() {
    $('#builder').queryBuilder({
        filters: [],  // 自定义过滤器数组
        rules: []     // 初始规则集
    });
});

记得替换 filters 和 rules 以匹配你的需求。

3. 应用案例和最佳实践

基本功能演示

在你的HTML中添加一个容器元素，例如<div id="builder"></div>，然后创建规则和获取规则的示例：

<button id="validate">验证</button>
<button id="set-rules">设置规则</button>
<button id="get-rules">获取规则</button>

<script>
$(document).ready(function() {
    var rules = [
        { id: 'name', field: 'name', operator: '=', value: 'John' }
    ];

    $('#builder').queryBuilder({
        filters: [/* 定义过滤器 */],
        rules: rules
    });

    $('#validate').on('click', function() {
        var json = $('#builder').queryBuilder('getRules');
        if (!$('#builder').queryBuilder('isValid')) {
            alert('查询无效');
        } else {
            console.log(JSON.stringify(json));
        }
    });

    $('#set-rules').on('click', function() {
        $('#builder').queryBuilder('setRules', rules);
    });

    $('#get-rules').on('click', function() {
        var json = $('#builder').queryBuilder('getRules');
        console.log(JSON.stringify(json));
    });
});
</script>