react-querybuilder noSql

https://react-querybuilder.js.org/
在线案例 https://react-querybuilder.js.org/react-querybuilder
Github https://github.com/react-querybuilder/react-querybuilder

yarn add react-querybuilder
yarn add @react-querybuilder/antd @ant-design/icons antd

load from sql

SELECT *
  FROM my_table
  WHERE (firstName like 'Stev%' and lastName in ('Vai', 'Vaughan') and age > '28' and (isMusician = TRUE or instrument = 'Guitar') and groupedField1 = groupedField4);

load from json

{
  "and": [
    {
      "startsWith": [
        {
          "var": "firstName"
        },
        "Stev"
      ]
    },
    {
      "in": [
        {
          "var": "lastName"
        },
        [
          "Vai",
          "Vaughan"
        ]
      ]
    },
    {
      ">": [
        {
          "var": "age"
        },
        "28"
      ]
    },
    {
      "or": [
        {
          "==": [
            {
              "var": "isMusician"
            },
            true
          ]
        },
        {
          "==": [
            {
              "var": "instrument"
            },
            "Guitar"
          ]
        }
      ]
    },
    {
      "==": [
        {
          "var": "groupedField1"
        },
        {
          "var": "groupedField4"
        }
      ]
    }
  ]
}

QueryBuild在线案例
https://codesandbox.io/s/ug9wk
https://codesandbox.io/s/fe9cc
https://codesandbox.io/examples/package/react-querybuilder

sql queryBuild

https://github.com/sqlkata/querybuilder

vue queryBuild

https://github.com/gloxing/treeRule