쿼리 빌더 모델 사용

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

    개요

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

    EXAMPLE

    이 샘플이 마음에 드시나요? 전체 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 fieldNamecondition 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 레코드 categoryIdcategoriesTree 대한 필드를 반환하는 supplierId а productsTree를 만듭니다. 우리는 조건과 관련성 searchTreeinQuery 설정하여 이를 수행합니다. 다음은 중간 하위 쿼리입니다.

    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 supplierIdSuppliers 모든 필드를 반환하는 а 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 suppliersTreeexpressionsTree​ ​IgxQueryBuilderComponent 속성을 설정할 수 있습니다. 또한 쿼리가 변경될 때마다 엔드포인트에 대한 새 요청이 트리거되고 그리드에 표시된 결과 데이터가 새로 고쳐집니다.

    EXAMPLE

    App Builder | CTA 배너

    API 참조

    추가 리소스

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