jQuery QueryBuilder 高级查询构建器使用指南

jQuery QueryBuilder 高级查询构建器使用指南

【免费下载链接】jQuery-QueryBuilder jQuery plugin offering an interface to create complex queries 项目地址: https://gitcode.com/gh_mirrors/jq/jQuery-QueryBuilder

项目概述

jQuery QueryBuilder 是一个功能强大的jQuery插件，用于构建复杂的查询条件界面。它提供了一个直观的图形化界面，允许用户通过简单的点击和选择操作来构建复杂的查询逻辑，支持多种数据类型和操作符，并能将查询条件转换为多种格式（如JSON、SQL、MongoDB查询等）。

核心功能特性

1. 多语言支持

该插件内置了20多种语言支持，包括简体中文、英语、法语、德语等，开发者可以轻松切换界面语言。

2. 主题定制

提供默认和暗黑两种主题风格，开发者可以根据项目需求选择合适的界面风格。

3. 丰富的过滤器类型

• 文本输入：支持单行文本、多行文本输入
• 数字输入：支持整数、浮点数，可设置最小/最大值
• 选择器：单选、多选、下拉菜单
• 复选框/单选框：用于布尔值或多选项
• 滑块控件：用于范围选择
• 自定义输入：开发者可以完全自定义输入控件

4. 多种操作符支持

包括等于、不等于、包含、不包含、大于、小于、介于等常见操作符，支持按数据类型分组显示。

5. 查询条件转换

• 支持将构建的查询条件转换为JSON格式
• 支持生成SQL查询语句（包括参数化查询）
• 支持生成MongoDB查询语法

使用示例解析

基本初始化

$('#builder').queryBuilder(options);

其中options对象包含所有配置参数，如过滤器定义、操作符配置等。

过滤器定义示例

filters: [
  {
    id: 'name',
    field: 'username',
    label: 'Name',
    type: 'string',
    value_separator: ',',
    default_value: 'Mistic',
    size: 30,
    validation: {
      allow_empty_value: true
    }
  },
  {
    id: 'age',
    label: 'Age',
    type: 'integer',
    value_separator: '|',
    description: function(rule) {
      // 动态描述文本
    }
  }
]

自定义输入控件

{
  id: 'coord',
  label: 'Coordinates',
  type: 'string',
  input: function(rule, name) {
    // 返回自定义HTML
  },
  valueGetter: function(rule) {
    // 从自定义控件获取值
  },
  valueSetter: function(rule, value) {
    // 设置自定义控件的值
  }
}

查询条件设置

可以通过多种方式设置初始查询条件：

// 从JSON设置
$('#builder').queryBuilder('setRules', {
  condition: 'AND',
  rules: [/* 规则数组 */]
});

// 从MongoDB查询设置
$('#builder').queryBuilder('setRulesFromMongo', {
  "$or": [/* MongoDB查询条件 */]
});

// 从SQL语句设置
$('#builder').queryBuilder('setRulesFromSQL', 'username LIKE "Mistic%"');

查询结果获取

// 获取JSON格式规则
var rules = $('#builder').queryBuilder('getRules');

// 获取SQL语句
var sql = $('#builder').queryBuilder('getSQL');

// 获取MongoDB查询
var mongoQuery = $('#builder').queryBuilder('getMongo');

高级功能

1. 动态描述文本

可以为过滤器添加动态描述，根据用户选择的操作符显示不同的提示信息。

2. 输入验证

支持正则表达式验证、最小值/最大值验证等。

3. 插件系统

• 错误提示：显示验证错误
• 排序：允许拖拽排序规则
• 唯一过滤器：确保每个过滤器只使用一次
• 反转条件：支持NOT逻辑

4. 规则标记

可以为规则添加各种标记：

• no_delete：禁止删除
• filter_readonly：过滤器只读
• no_drop：禁止拖放

实际应用建议

1. 表单集成：将QueryBuilder集成到表单中，作为复杂查询条件的输入组件。

2. 报表系统：用于构建自定义报表的筛选条件。

3. 数据分析：在数据分析工具中提供灵活的查询构建界面。

4. 权限控制：根据用户角色动态调整可用的过滤器和操作符。

5. 响应式设计：确保在移动设备上也有良好的用户体验。

性能优化

1. 对于大型数据集，考虑延迟加载过滤器选项。

2. 使用unique-filter插件避免重复使用同一过滤器。

3. 合理使用skip_empty选项，避免处理空规则。

4. 对于复杂查询，考虑分步构建或保存常用查询模板。

jQuery QueryBuilder 是一个功能全面且高度可定制的查询构建解决方案，通过合理的配置和扩展，可以满足各种复杂查询场景的需求。

【免费下载链接】jQuery-QueryBuilder jQuery plugin offering an interface to create complex queries 项目地址: https://gitcode.com/gh_mirrors/jq/jQuery-QueryBuilder