react-query-builder查询构建器中文文档

Posted 2023-05-19 泥燕

简介

react-query-builder是一个React组件库，用于构建可配置的查询构建器。

使用react-query-builder，您可以轻松地构建复杂的查询表单，使用户能够以直观的方式构建和执行查询。

以下是一些常见的用例：

• 构建高级搜索表单，允许用户根据不同的条件搜索数据。
• 在数据可视化应用程序中使用，以允许用户筛选和过滤数据。
• 作为电子商务应用程序中的筛选器，允许用户根据价格范围、品牌、颜色等条件筛选商品。

react-query-builder的主要特点包括：

• 可配置性：react-query-builder允许您自定义每个查询条件的行为、外观和验证逻辑。
• 易于使用：react-query-builder提供了一个简单的API，使您能够轻松地构建和管理查询构建器。
• 可扩展性：react-query-builder是一个可扩展的库，允许您自定义和扩展其功能。

安装

您可以使用npm或yarn安装react-query-builder：

npm install react-query-builder

或者

yarn add react-query-builder

示例

下面是一个简单的示例，演示如何使用react-query-builder构建一个简单的查询表单：

import React from \'react\';

import QueryBuilder from \'react-query-builder\';

const fields = [

  name: \'firstName\', label: \'First Name\', type: \'string\' ,

  name: \'lastName\', label: \'Last Name\', type: \'string\' ,

  name: \'age\', label: \'Age\', type: \'number\' ,

  name: \'gender\', label: \'Gender\', type: \'select\', options: [\'Male\', \'Female\'] ,

];

 const operators = [

  name: \'=\', label: \'=\' ,

  name: \'!=\', label: \'!=\' ,

  name: \'<\', label: \'<\' ,

  name: \'>\', label: \'>\' ,

];

const QueryBuilderExample = () => 

 const [query, setQuery] = React.useState(null);

 const onQueryChange = (query) => 

  setQuery(query);

 ;

 return (

  <QueryBuilder

   fields=fields

   operators=operators

   onQueryChange=onQueryChange

  />

 );

; 

export default QueryBuilderExample;

在这个示例中，我们定义了四个字段：firstName、lastName、age和gender。每个字段都有一个名称、一个标签和一个类型。我们还定义了四个运算符：=、!=、<和>。

基本用法

QueryBuilder组件接受三个必需的属性：fields、operators和onQueryChange。

• fields：一个数组，包含所有可用的字段。每个字段应该有一个名称、一个标签和一个类型。
• operators：一个数组，包含所有可用的运算符。
• onQueryChange：一个回调函数，每当查询发生变化时都会被调用。这个函数应该接受一个查询对象作为参数。

在上面这个示例中，我们将onQueryChange函数定义为一个状态更新函数，以便我们能够在组件中跟踪查询状态。在实际应用程序中，您可能会将查询对象传递给API调用或其他组件等。

扩展用法

react-query-builder提供了许多选项和属性，以便您自定义和扩展其功能

属性

以下是QueryBuilder组件的可用属性：

• fields：一个包含所有可用字段的数组。每个字段应该是一个对象，包含以下属性：

  • name（必需）：字段名称，用于标识该字段。
  • label（必需）：字段标签，用于显示给用户。
  • type（必需）：字段类型。可以是文本（text）、数字（number）、日期（date）、时间（time）、日期时间（datetime）、下拉选项（select）等。支持的类型包括：string、number、date、time、datetime和select。
  • options（可选）：如果字段类型为select，则提供可用选项的数组。如果字段类型为下拉选项，则可以提供选项列表。这应该是一个字符串数组或对象数组，每个对象包含value和label属性。
  • operators：字段支持的运算符数组。如果省略，则使用默认运算符。
  • defaultValue：字段的默认值。
  • valueSources：字段支持的值来源。默认为[\'value\']，即手动输入值。
  • fieldSettings：一个对象，包含用于自定义字段行为和外观的属性。有关更多信息，请参见下面的“自定义字段行为和外观”部分。

• operators：一个包含所有可用运算符的数组。每个运算符应该是一个对象，包含以下属性：

  • name（必需）：运算符名称；操作符名称，用于标识该操作符。

  • label（必需）：运算符标签。操作符标签，用于显示给用户。

  • valueTypes（必需）：操作符可以接受的值类型，应该是一个字符串数组，包含text、number、date、time、datetime和select。

  • defaultValue：运算符的默认值。

  • textSeparators：如果运算符需要两个文本输入值，则

以下是可用的组合器：

• combinators：一个包含所有可用组合器的数组。每个组合器应该是一个对象，包含以下属性：
  • name（必需）：组合器名称，用于标识该组合器。
  • label（必需）：组合器标签，用于显示给用户。
  • clause（必需）：组合器可以包含的子句数量，可以是single（单个子句）或multiple（多个子句）。

其他属性：

• onQueryChange：当查询更改时调用的回调函数。它接收当前查询作为参数。

• controlElements：一个对象，用于定义自定义控件元素。键应该是控件名称，值应该是一个包含以下属性的对象：

  • type（必需）：控件类型，可以是text、number、date、time、datetime和select。

  • props（可选）：控件属性，可以是任何传递给控件的属性，比如options（如果控件类型为下拉选项）。

  • allowEmpty：是否允许空查询，默认为false。

  • showCombinatorsBetweenRows：是否在行之间显示组合器，默认为false。

  • showNotToggle：是否显示否定切换按钮，默认为false。

  • enableDragAndDrop：是否启用拖放支持，默认为false。

  • enableCollapse：是否启用折叠支持，默认为false。

  • enableInvert：是否启用反转支持，默认为false。

  • enableDelete：是否启用删除支持，默认为false。

QueryBuilder组件具有许多可用的属性，以便您可以自定义和控制查询构建器的行为和外观。以下是QueryBuilder组件的可用属性：

• fields：一个数组，包含所有可用的字段。每个字段应该有一个名称、一个标签和一个类型。默认值为[]。
• operators：一个数组，包含所有可用的运算符。默认值为[]。
• combinators：一个数组，包含所有可用的组合器。默认值为[]。
• controlClassnames：一个对象，用于自定义控件的类名。可以使用这个属性来自定义控件的样式。默认值为。
• translations：一个对象，用于自定义组件的翻译。可以使用这个属性来自定义组件的语言。默认值为。
• getOperators：一个函数，用于获取特定字段的可用运算符。默认值为一个返回所有运算符的函数。
• getCombinaors：一个函数，用于获取特定条件的可用组合器。默认值为一个返回所有组合器的函数。
• onQueryChange：一个回调函数，每当查询发生变化时都会被调用。这个函数应该接受一个查询对象作为参数。默认值为一个空函数。
• controlElements：一个对象，用于自定义每个控件的外观和行为。默认值为一个包含所有默认控件元素的对象。
• enableMountQueryChange：一个布尔值，控制是否在组件挂载时调用onQueryChange函数。默认值为false。

上述属性中，fields、operators和combinators是QueryBuilder组件最基本的属性。它们定义了查询构建器中所有可用的字段、运算符和组合器。

controlClassnames和translations允许您自定义查询构建器中每个控件的样式和语言。

getOperators和getCombinators允许您自定义每个字段和条件的可用运算符和组合器。

onQueryChange是一个回调函数，每当查询发生变化时都会被调用。您可以使用这个函数来处理查询结果，例如将查询结果传递给API调用或其他组件。

controlElements允许您自定义每个控件的外观和行为。

enableMountQueryChange允许您在组件挂载时调用onQueryChange函数。默认情况下，只有在用户交互后才会调用onQueryChange函数。

这些属性使QueryBuilder组件非常灵活和可配置，允许您自定义和控制查询构建器的每个方面。

在 laravel 查询构建器中使用多个 where 子句

【中文标题】在 laravel 查询构建器中使用多个 where 子句

【英文标题】：Using multiple where clauses with laravel query builder

【发布时间】：2015-06-03 05:19:11

【问题描述】：

我在转换以下 SQL 查询以使用 Laravel 的查询构建器时遇到了很多麻烦。

SELECT * FROM gifts 
JOIN giftcategory ON gifts.id = giftcategory.giftid
JOIN giftoccasions ON gifts.id = giftoccasions.giftid
JOIN giftrelationship ON gifts.id = giftrelationship.giftid

WHERE (gifts.gender = 'any' OR gifts.gender = 'male')
AND giftoccasions.occasionid = '2'
AND (giftcategory.categoryid = '0' OR giftcategory.categoryid = '1')
AND giftrelationship.relationshipid = '1'

这个查询工作正常，但使用 Laravel 的查询生成器时我无法得到相同的结果。到目前为止，我有以下代码。它根本无法正常工作。我认为问题可能出在 orWhere 部分，因为它似乎返回的结果与任何其他 where 子句都不匹配。

$giftQuery = DB::Table('gifts')
->Join('giftcategory', 'gifts.id', '=', 'giftcategory.giftid')
->Join('giftoccasions', 'gifts.id', '=', 'giftoccasions.giftid')
->where('gifts.gender', '=', "male")
->orwhere('gifts.gender', '=', "any")
->where('giftoccasions.occasionid', '=', "2")
->where('giftoccasions.relationshipid', '=', "1")
->Where('giftcategory.categoryid', '=', "0")
->orWhere('giftcategory.categoryid', '=', "1");

【问题讨论】：

如果您对我在下面的回答感到满意，您可以接受：)

【参考方案1】：

您想将advanced where 与参数分组一起使用：

$giftQuery = DB::table('gifts')
    ->join('giftcategory', 'gifts.id', '=', 'giftcategory.giftid')
    ->join('giftoccasions', 'gifts.id', '=', 'giftoccasions.giftid')
    ->where(function($query) 
        $query->where('gifts.gender', '=', "male")
            ->orWhere('gifts.gender', '=', "any");
    )
    ->where('giftoccasions.occasionid', '=', "2")
    ->where('giftoccasions.relationshipid', '=', "1")
    ->where('giftcategory.categoryid', '=', "0")
    ->orWhere('giftcategory.categoryid', '=', "1");