쿼리 빌더 모델 사용
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
속성을 설정할 수 있습니다. 또한 쿼리가 변경될 때마다 엔드포인트에 대한 새 요청이 트리거되고 그리드에 표시된 결과 데이터가 새로 고쳐집니다.