jQuery QueryBuilder 教程

jQuery-QueryBuilderjQuery plugin offering an interface to create complex queries项目地址:https://gitcode.com/gh_mirrors/jq/jQuery-QueryBuilder

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>

集成其他插件

可以将jQuery QueryBuilder与Bootstrap Datepicker、Bootstrap Slider等小部件结合使用，以提供更丰富的用户体验。

4. 典型生态项目

JAVA (JDBC): itfsw/QueryBuilder
JAVA (JOOQ): Kowalski.io/jqb2jooq
NET: castle-it/dynamic-linq-query-builder
PHP (Doctrine ORM): fourlabsldn/QBJSParser, fourlabsldn/QBJSParserBundle
PHP (Illuminate/Laravel with Illuminate): timgws/QueryBuilderParser
PHP (Yii 2): leandrogehlen/yii2-querybuilder
Python (NorthIsUp/querybuilder, shunyeka/jQuery-QueryBuilder-Python-Evaluator)
Python (SQLAlchemy ORM): shunyeka/jQuery-QueryBuilder-Python-Evaluator

以上只是部分生态项目，还有更多语言和框架的实现等待你的发现。

希望这个教程对你使用jQuery QueryBuilder有所帮助，祝你编码愉快！

jQuery-QueryBuilderjQuery plugin offering an interface to create complex queries项目地址:https://gitcode.com/gh_mirrors/jq/jQuery-QueryBuilder

标签

jQuery QueryBuilder 教程