syncfusion-react-query-builder

用途

Syncfusion React Query Builder 是一个用于创建和管理复杂筛选条件的 React UI 组件。它提供图形化界面，让用户以规则和分组的形式搭建过滤逻辑，适用于高级搜索、数据看板、查询模板系统、报表构建等需要动态筛选数据的场景。组件输出结构化 JSON，可进一步转换为 SQL、Mongo 查询或自定义谓词，用于后端执行或前端数据过滤。

主要能力

• 规则管理：创建、编辑、删除和嵌套规则与分组。
• 多数据类型：支持字符串、数字、日期、布尔以及自定义类型。
• 运算符支持：内置 16 种以上运算符，如 equal、contains、between、in 等。
• 查询转换：可转换为 SQL、Mongo 或参数化查询，也可从 SQL 导入规则。
• 定制能力：支持自定义模板、主题与样式。
• 无障碍：符合 WCAG，支持键盘导航和屏幕阅读器。
• 高级功能：拖拽、状态持久化、克隆、锁定、RTL、摘要视图等。

使用方式

安装并初始化组件后，通过 columns 定义可筛选字段，通过 rule 设置初始过滤规则。组件支持绑定本地数据数组或通过 DataManager 连接远程数据（含 ODataV4Adaptor）。可通过 addRules、addGroups 等方法以编程方式操作规则，通过 getSqlFromRules、getMongoQuery 生成查询，通过 setRulesFromSql 从 SQL 导入规则。常用属性包括 displayMode（Horizontal/Vertical）、allowDragAndDrop、enablePersistence、enableRtl、allowValidation、summaryView、showButtons、maxGroupCount、readonly 等。

快速上手示例：

import { ColumnsModel, QueryBuilderComponent, RuleModel } from '@syncfusion/ej2-react-querybuilder';
import React from 'react';

function App() {
  const columnData: ColumnsModel[] = [
    { field: 'EmployeeID', label: 'Employee ID', type: 'number' },
    { field: 'FirstName', label: 'First Name', type: 'string' },
    { field: 'Title', label: 'Title', type: 'string' },
    { field: 'HireDate', label: 'Hire Date', type: 'date', format: 'dd/MM/yyyy' },
    { field: 'Country', label: 'Country', type: 'string' }
  ];

  const initialRules: RuleModel = {
    condition: 'and',
    rules: [
      {
        field: 'EmployeeID',
        label: 'Employee ID',
        operator: 'equal',
        type: 'number',
        value: 1001
      }
    ]
  };

  return (
    <QueryBuilderComponent 
      width="100%" 
      columns={columnData} 
      rule={initialRules}
    />
  );
}

export default App;

常见模式：

• 获取 SQL：qryBldrObj.getSqlFromRules()
• 编程添加规则：qryBldrObj.addRules([...], 'group0')
• 从 SQL 导入规则：qryBldrObj.setRulesFromSql(sqlString)
• 显示摘要视图：<QueryBuilderComponent columns={columnData} summaryView={true} />

适用场景

• 高级搜索过滤：为用户提供多条件组合的搜索界面，提交时获取 SQL 并在后端执行。
• 数据驱动看板：绑定远程 DataManager，按数据类型配置列，启用拖拽，使用 getPredicate() 过滤数据并动态展示结果。
• 查询模板系统：通过 enablePersistence 自动保存状态，或手动保存 getRules() 到数据库，需要时用 setRules() 加载。
• 报表构建器：使用自定义头部模板、自定义运算符、allowValidation 校验和 summaryView 摘要，并生成 SQL 用于报表执行。

限制

资料未提供关于收费、价格、平台兼容性、性能效果或具体版本要求的信息，暂未提供。