# react15-querybuilder

**Repository Path**: HenryMorganJo/react15-querybuilder

## Basic Information

- **Project Name**: react15-querybuilder
- **Description**: 基于React15构建SQL查询条件的组件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2021-06-09
- **Last Updated**: 2025-02-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react15-querybuilder

这个 React 组件是在[React QueryBuilder](https://github.com/react-querybuilder/react-querybuilder) v1.3.8 基础上又新增了新的功能
该项目使用了 React 15，如果要在基于 React 16 以上的版本的项目中使用，可以使用 [React QueryBuilder](https://github.com/react-querybuilder/react-querybuilder)

## Getting Started

```shell
npm install react15-querybuilder --save
```

## Usage

```jsx
import QueryBuilder from "react15-querybuilder";

const fields = [
  { name: "firstName", label: "First Name" },
  { name: "lastName", label: "Last Name" },
  { name: "age", label: "Age" },
  { name: "address", label: "Address" },
  { name: "phone", label: "Phone" },
  { name: "email", label: "Email" },
  { name: "twitter", label: "Twitter" },
  { name: "isDev", label: "Is a Developer?", value: false },
];

const dom = <QueryBuilder fields={fields} onQueryChange={logQuery} />;

function logQuery(query) {
  console.log(query);
}
```

## API

`<QueryBuilder />` is the only top-level component exposed from this library. It supports the following properties:

#### fields _(Required)_

[ {name:String, label:String} ]

The array of fields that should be used. Each field should be an object with
`{name:String, label:String}` |

#### operators _(Optional)_

[ {name:String, label:String} ]

The array of operators that should be used. The default operators include:

```js
[
  { name: "=", label: "=" },
  { name: "!=", label: "!=" },
  { name: "<", label: "<" },
  { name: ">", label: ">" },
  { name: "<=", label: "<=" },
  { name: ">=", label: ">=" },
  { name: "contains", label: "Contains" },
  { name: "beginsWith", label: "Begins With" },
  { name: "endsWith", label: "Ends With" },
  { name: "doesNotContain", label: "Does Not Contain" },
  { name: "doesNotBeginWith", label: "Does Not Begin With" },
  { name: "doesNotEndWith", label: "Does Not End With" },
  { name: "null", label: "Null" },
  { name: "notNull", label: "Not Null" },
  { name: "in", label: "In " },
  { name: "notIn", label: "Not In" },
];
```

#### combinators _(Optional)_

[ {name:String, label:String} ]

The array of combinators that should be used for RuleGroups.
The default set includes:

```js
[
  { name: "and", label: "AND" },
  { name: "or", label: "OR" },
];
```

#### controlElements _(Optional)_

```js
React.PropTypes.shape({
  addGroupAction: React.PropTypes.func, // React.component
  removeGroupAction: React.PropTypes.func,
  addRuleAction: React.PropTypes.func,
  removeRuleAction: React.PropTypes.func,
  combinatorSelector: React.PropTypes.func,
  fieldSelector: React.PropTypes.func,
  operatorSelector: React.PropTypes.func,
  valueEditor: React.PropTypes.func,
  ignoreCaseCheckbox: React.PropTypes.func,
});
```

This is a custom controls object that allows you to override the control elements used.
The following control overrides are supported:

- `addGroupAction`: By default a `<button />` is used. The following props are passed:

  ```js
  {
    label: React.PropTypes.string, //"+Group"
    className: React.PropTypes.string, //css classNames to be applied
    handleOnClick: React.PropTypes.func, //callback function to invoke adding a <RuleGroup />
    rules: React.PropTypes.array, //Provides the number of rules already present for this group,
    level: React.PropTypes.number //The level of the current group
  }
  ```

- `removeGroupAction`: By default a `<button />` is used. The following props are passed:

  ```js
  {
    label: React.PropTypes.string, //"x"
    className: React.PropTypes.string, //css classNames to be applied
    handleOnClick: React.PropTypes.func, //callback function to invoke removing a <RuleGroup />
    rules: React.PropTypes.array, //Provides the number of rules already present for this group,
    level: React.PropTypes.number //The level of the current group
  }
  ```

- `addRuleAction`: By default a `<button />` is used. The following props are passed:

  ```js
  {
    label: React.PropTypes.string, //"+Rule"
    className: React.PropTypes.string, //css classNames to be applied
    handleOnClick: React.PropTypes.func, //callback function to invoke adding a <Rule />
    rules: React.PropTypes.array, //Provides the number of rules already present for this group,
    level: React.PropTypes.number //The level of the current group
  }
  ```

- `removeRuleAction`: By default a `<button />` is used. The following props are passed:

  ```js
  {
    label: React.PropTypes.string, //"x"
    className: React.PropTypes.string, //css classNames to be applied
    handleOnClick: React.PropTypes.func, //callback function to invoke removing a <Rule />
    level: React.PropTypes.number //The level of the current group
  }
  ```

- `combinatorSelector`: By default a `<select />` is used. The following props are passed:

  ```js
  {
    options: React.PropTypes.array.isRequired, //same as 'combinators' passed into QueryBuilder
    value: React.PropTypes.string, //selected combinator from the existing query representation, if any
    className: React.PropTypes.string, //css classNames to be applied
    handleOnChange: React.PropTypes.func, //callback function to update query representation
    rules: React.PropTypes.array, //Provides the number of rules already present for this group
    level: React.PropTypes.number //The level of the current group
  }
  ```

- `fieldSelector`: By default a `<select />` is used. The following props are passed:

  ```js
  {
    options: React.PropTypes.array.isRequired, //same as 'fields' passed into QueryBuilder
    value: React.PropTypes.string, //selected field from the existing query representation, if any
    className: React.PropTypes.string, //css classNames to be applied
    handleOnChange: React.PropTypes.func, //callback function to update query representation
    ignoreCase: React.PropTypes.bool,// Whether this rule ignores case or not
    level: React.PropTypes.number //The level the group this rule belongs to
  }
  ```

- `operatorSelector`: By default a `<select />` is used. The following props are passed:

  ```js
  {
    field: React.PropTypes.string, //field name corresponding to this Rule
    options: React.PropTypes.array.isRequired, //return value of getOperators(field)
    value: React.PropTypes.string, //selected operator from the existing query representation, if any
    className: React.PropTypes.string, //css classNames to be applied
    handleOnChange: React.PropTypes.func, //callback function to update query representation
    level: React.PropTypes.number, //The level the group this rule belongs to
    ignoreCase: React.PropTypes.bool // Whether this rule ignores case or not
  }
  ```

- `valueEditor`: By default a `<input type="text" />` is used. The following props are passed:

  ```js
  {
    field: React.PropTypes.string, //field name corresponding to this Rule
    operator: React.PropTypes.string, //operator name corresponding to this Rule
    value: React.PropTypes.string, //value from the existing query representation, if any
    handleOnChange: React.PropTypes.func, //callback function to update the query representation
    level: React.PropTypes.number, //The level the group this rule belongs to
    ignoreCase: React.PropTypes.bool, // Whether this rule ignores case or not
  }
  ```

- `ignoreCaseCheckbox`: By default a `<input type="checkbox" />` is used. The following props are passed:

  ```js
  {
    label: React.PropTypes.string, //"忽略大小写"
    className: React.PropTypes.string, //css classNames to be applied
    value: React.PropTypes.bool, //value from the existing query representation, if any
    handleOnClick: React.PropTypes.func, //callback function to invoke removing a <Rule />
    level: React.PropTypes.number //The level of the current group
  }
  ```

#### getOperators _(Optional)_

function(field):[]

This is a callback function invoked to get the list of allowed operators
for the given field

#### onQueryChange _(Optional)_

function(queryJSON):void

This is a notification that is invoked anytime the query configuration changes. The
query is provided as a JSON structure, as shown below:

```json
{
  "combinator": "and",
  "rules": [
    {
      "field": "firstName",
      "operator": "null",
      "value": ""
    },
    {
      "field": "lastName",
      "operator": "null",
      "value": ""
    },
    {
      "combinator": "and",
      "rules": [
        {
          "field": "age",
          "operator": ">",
          "value": "30"
        }
      ]
    }
  ]
}
```

#### controlClassnames _(Optional)_

This can be used to assign specific `CSS` classes to various controls
that are created by the `<QueryBuilder />`. This is an object
with the following properties:

```js
{
    queryBuilder:String, // Root <div> element

    ruleGroup:String, // <div> containing the RuleGroup
    combinators:String, // <select> control for combinators
    addRule:String, // <button> to add a Rule
    addGroup:String, // <button> to add a RuleGroup
    removeGroup:String, // <button> to remove a RuleGroup

    rule:String, // <div> containing the Rule
    fields:String, // <select> control for fields
    operators:String, // <select> control for operators
    value:String, // <input> for the field value
    ignoreCase:String, // <input type=checkbox> for the field ignoreCase
    removeRule:String // <button> to remove a Rule

}
```