쿼리 빌더 모델 사용

Angular Query Builder는 직렬화 가능/역직렬화 가능한 JSON 형식 모델을 제공하므로 SQL 쿼리를 쉽게 작성할 수 있습니다.

개요

이 Angular 쿼리 작성기 예제에서는 식 트리를 IgxQueryBuilderComponent 사용하여 엔드포인트 Northwind WebAPI에서 데이터를 요청하고 데이터 소스로 IgxGridComponent 설정하는 방법을 보여 줍니다.

이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

쿼리 빌더 모델

표현식 트리를 the IgxQueryBuilderComponent로 설정하려면 a FilteringExpressionsTree를 정의해야 합니다. 각각 FilteringExpressionsTree 에는 데이터 레코드가 트리에 대해 확인되는 방법을 나타내는 필터링 논리가 있어야 하며 사용 사례에 따라 필드 이름, 엔터티 이름 및 반환 필드 배열을 전달할 수 있습니다. 특정 엔터티의 모든 필드를 반환해야 하는 경우 returnFields 속성을 ['*']로 설정할 수 있습니다.

const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Entity A', ['*']);
ts

루트 FilteringExpressionsTree가 생성되면 조건, 그룹 또는 하위 쿼리를 추가하려면 해당 filteringOperands 속성을 (단일 표현식 또는 그룹) 또는 IFilteringExpressionsTree (하위 쿼리)의 IFilteringExpression 배열로 설정하여 수행할 수 있습니다. 각 IFilteringExpression and IFilteringExpressionsTree는 필터링 표현식이 배치된 열의 이름인 a fieldName와 condition type IFilteringOperation 또는 a conditionName를 가져야 합니다. 필요한 경우 type searchVal searchTree IExpressionTree, ignoreCase properties 를 설정할 수도 있습니다.

간단한 표현식 정의하기:

tree.filteringOperands.push({
            fieldName: 'Name',
            conditionName: IgxStringFilteringOperand.instance().condition('endsWith').name,
            searchVal: 'a'
        });
ts

표현식 그룹 정의:

const group = new FilteringExpressionsTree(FilteringLogic.Or, undefined, 'Entity A', ['*']);
group.filteringOperands.push({
    fieldName: 'Name',
    conditionName: IgxStringFilteringOperand.instance().condition('endsWith').name,
    searchVal: 'a'
});
group.filteringOperands.push({
    fieldName: 'DateTime created',
    conditionName: IgxDateFilteringOperand.instance().condition('today').name
});
tree.filteringOperands.push(group);
ts

하위 쿼리 정의:

const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Entity B', ['Number']);
innerTree.filteringOperands.push({
    fieldName: 'Number',
    conditionName: 'equals',
    searchVal: 123
});
 tree.filteringOperands.push({
    fieldName: 'Id',
    conditionName: 'inQuery',
    searchTree: innerTree
});
ts

모델은 JSON 형식으로 직렬화/역직렬화할 수 있으므로 클라이언트와 서버 간에 쉽게 전송할 수 있습니다.

JSON.stringify(tree, null, 2);
ts

하위 쿼리 사용

컨텍스트 IgxQueryBuilderComponent에서 IN / NOT-IN 연산자는 WHERE 절에서 새로 노출된 하위 쿼리 기능과 함께 사용됩니다.

하위 쿼리는 외부 쿼리의 조건으로 사용될 데이터를 검색하는 데 사용되는 다른 쿼리 내에 중첩된 쿼리입니다.

를 선택하면 인/낫 연산자 FilteringExpression 하위 쿼리를 만듭니다. 반환할 엔터티와 열을 선택한 후 외부 쿼리에서 지정된 열의 값이 하위 쿼리에서 반환된 값과 일치하는지 여부를 확인합니다.

다음 식 트리는 다음과 같습니다.

const innerTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Products', ['supplierId']);
innerTree.filteringOperands.push({
    fieldName: 'supplierId',
    conditionName: IgxNumberFilteringOperand.instance().condition('greaterThan').name,
    searchVal: 10
});

const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Suppliers', ['supplierId']);
tree.filteringOperands.push({
    fieldName: 'supplierId',
    conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
    searchTree: innerTree
});
ts

다음을 호출하여 직렬화 할 수 있습니다.

JSON.stringify(tree, null, 2);
ts

이는 다음과 같이 전송됩니다.

{
  "filteringOperands": [
    {
      "fieldName": "supplierId",
      "condition": {
        "name": "inQuery",
        "isUnary": false,
        "isNestedQuery": true,
        "iconName": "in"
      },
      "conditionName": "inQuery",
      "searchVal": null,
      "searchTree": {
        "filteringOperands": [
          {
            "fieldName": "supplierId",
            "condition": {
              "name": "greaterThan",
              "isUnary": false,
              "iconName": "filter_greater_than"
            },
            "conditionName": "greaterThan",
            "searchVal": 10,
            "searchTree": null
          }
        ],
        "operator": 0,
        "entity": "Suppliers",
        "returnFields": [
          "supplierId"
        ]
      }
    }
  ],
  "operator": 0,
  "entity": "Products",
  "returnFields": [
    "supplierId"
  ]
}
json

SQL 예제

Ignite UI for Angular Query Builder 구성 요소를 사용하여 SQL 쿼리를 작성하는 방법에 대한 실제 예를 살펴보겠습니다.

아래 샘플에는 'Suppliers', 'Categories' 및 'Products'라는 이름의 3 entities 개가 있습니다.

'음료' 카테고리에 속하는 제품을 공급하는 모든 공급업체를 찾고 싶다고 가정해 보겠습니다. 데이터가 모든 엔터티에 분산되어 있기 때문에 IN 연산자를 활용하고 하위 쿼리를 생성하여 작업을 수행할 수 있습니다. 각 하위 쿼리는 a FilteringExpressionsTree로 표시되며 메서드를 통해 SQL 쿼리로 변환할 수 있습니다 transformExpressionTreeToSqlQuery(tree: IExpressionTree).

먼저, 레코드 name에 대해 where 를 Beverages 반환할 categoryId а categoriesTree를 만듭니다. 이것은 가장 안쪽의 하위 쿼리입니다.

const categoriesTree = new FilteringExpressionsTree(0, undefined, 'Categories', ['categoryId']);
categoriesTree.filteringOperands.push({
    fieldName: 'name',
    conditionName: IgxStringFilteringOperand.instance().condition('equals').name,
    searchVal: 'Beverages'
});
ts

이에 FilteringExpressionsTree 대한 해당 SQL 쿼리는 다음과 같습니다.

SELECT categoryId FROM Categories WHERE name = 'Beverages'
pgsql

그런 다음 가장 안쪽의 하위 쿼리에서 반환된 항목과 일치하는 categoryId 레코드 categoryId에 categoriesTree 대한 필드를 반환하는 supplierId а productsTree를 만듭니다. 우리는 조건과 관련성 searchTree을 inQuery 설정하여 이를 수행합니다. 다음은 중간 하위 쿼리입니다.

const productsTree = new FilteringExpressionsTree(0, undefined, 'Products', ['supplierId']);
productsTree.filteringOperands.push({
    fieldName: 'categoryId',
    conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
    searchTree: categoriesTree
});
ts

다음은 SQL 쿼리의 업데이트된 상태입니다.

SELECT supplierId FROM Products WHERE categoryId IN (
    SELECT categoryId FROM Categories WHERE name = 'Beverages'
  )
pgsql

마지막으로, 중간 하위 쿼리에서 반환된 s 중 supplierId 하나와 일치하는 entity supplierId의 Suppliers 모든 필드를 반환하는 а suppliersTree를 만듭니다. 다음은 가장 바깥쪽 쿼리입니다.

const suppliersTree = new FilteringExpressionsTree(0, undefined, 'Suppliers', ['*']);
suppliersTree.filteringOperands.push({
    fieldName: 'supplierId',
    conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
    searchTree: productsTree
});
ts

이제 SQL 쿼리가 완료되었습니다.

SELECT * FROM Suppliers WHERE supplierId IN (
  SELECT supplierId FROM Products WHERE categoryId IN (
      SELECT categoryId FROM Categories WHERE name = 'Beverages'
    )
)
pgsql

이제 to suppliersTree의 expressionsTree IgxQueryBuilderComponent 속성을 설정할 수 있습니다. 또한 쿼리가 변경될 때마다 엔드포인트에 대한 새 요청이 트리거되고 그리드에 표시된 결과 데이터가 새로 고쳐집니다.

API 참조

추가 리소스

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.