Angular 트리 그리드 그룹 기준

비계층적 데이터가 있고 다음을 원하는 경우 그룹화 기준 하나 이상의 열을 입력하고 상위 행을 다음으로 채웁니다. 집계된 값, 당신은 IgxTreeGridComponent와 함께 treeGridGrouping 선택기가 있는 파이프 및 UI 구성요소 igx-tree-grid-group-by-area.

​treeGridGrouping 파이프는 제공된 매개변수를 기반으로 데이터를 그룹화하고 결과 계층 구조가 별도의 열에 표시됩니다. 집계가 제공되는 경우 파이프는 생성된 상위 행에 대해 집계된 값을 계산할 수도 있습니다. 다음은 템플릿에서 파이프를 사용하는 방법의 예입니다.

<igx-tree-grid #grid 
               [data]="data | treeGridGrouping:groupingExpressions:groupKey:childDataKey:grid:aggregations"
               [childDataKey]="childDataKey"
               [sortStrategy]="sorting">

파이프 인수는 다음과 같습니다.

• groupingExpressions - 계층 구조를 생성하는 데 사용되는 필드에 대한 정보와 각 그룹의 정렬 세부 정보가 포함된 IGroupingExpression 개체의 배열입니다.
• groupKey - 생성된 계층 열 이름의 문자열 값
• childDataKey - 생성된 상위 행의 하위 컬렉션이 저장되는 필드의 문자열 값
• Grid - 그룹화에 사용되는 IgxTreeGridComponent​
• aggregations (선택 사항) - 집계 함수에 대한 정보가 포함된 ITreeGridAggregation 개체의 배열

​igx-tree-grid-group-by-area 선택기가 있는 UI 구성 요소는 그룹화에 사용되는 열과 관련된 UI 상호 작용을 처리합니다. 다음은 템플릿에서 구성요소를 사용하는 방법의 예입니다.

<igx-tree-grid-group-by-area
    [grid]='grid'
    [(expressions)]='groupingExpressions'
    [hideGroupedColumns]='true'>
</igx-tree-grid-group-by-area>

구성요소의 입력은 다음과 같습니다.

• Grid - 그룹화에 사용되는 IgxTreeGridComponent​
• 표현식 - 계층 구조를 생성하는 데 사용되는 필드가 포함된 IGroupingExpression 객체의 배열
• hideGroupedColumns - 그룹화가 수행된 열을 숨길지 여부를 나타내는 부울 값
• dropAreaTemplate - 기본 드롭 영역 템플릿을 재정의하는 데 사용할 수 있는 드롭 영역용 템플릿
• dropAreaMessage - 기본 드롭 영역 템플릿에 대한 기본 메시지를 재정의하는 데 사용할 수 있는 문자열

Note

정렬이 올바르게 작동하려면 IgxTreeGridComponent의 sortStrategy 속성을 IgxGroupedTreeGridSorting의 인스턴스로 설정해야 합니다.

Angular Tree Grid Group By Example

구현

이 샘플에서는 그룹화를 위해 treeGridGrouping 파이프와 igx-tree-grid-group-by-area 선택기가 있는 UI 구성 요소를 사용하고 있습니다. 데이터는 "카테고리", "유형" 및 "계약" 필드별로 그룹화됩니다. 결과 계층 구조는 새로 생성된 "범주" 열에 표시됩니다. 또한 파이프는 "price", "change" 및 "changeP" 열에 대해 생성된 상위 행의 집계된 값을 계산합니다.

<igx-tree-grid #grid1
    [data]="data$ | async | treeGridGrouping:groupingExpressions:groupColumnKey:childDataKey:grid1:aggregations"
    [childDataKey]="childDataKey"
    [sortStrategy]="sorting">
    <igx-tree-grid-group-by-area
        [grid]="grid1"
        [(expressions)]="groupingExpressions"
        [hideGroupedColumns]="true">
    </igx-tree-grid-group-by-area>
    <igx-column [field]="groupColumnKey"></igx-column>

여기에서 그룹화 표현식과 집계가 정의되는 방법을 확인할 수 있습니다.

public groupingExpressions: IGroupingExpression[] = [
    { fieldName: 'category', dir: 2, ignoreCase: true, strategy: DefaultSortingStrategy.instance() },
    { fieldName: 'type', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() },
    { fieldName: 'contract', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }
];
public aggregations: ITreeGridAggregation[] = [
    {
        aggregate: (parent: any, data: any[]) => data.map((r) => r.change).reduce((ty, u) => ty + u, 0),
        field: 'change'
    },
    {
        aggregate: (parent: any, data: any[]) => data.map((r) => r.price).reduce((ty, u) => ty + u, 0),
        field: 'price'
    },
    {
        aggregate: (parent: any, data: any[]) => parent.change / (parent.price - parent.change) * 100,
        field: 'changeP'
    }
];
public childDataKey = 'children';
public groupColumnKey = 'categories';
public sorting = IgxGroupedTreeGridSorting.instance();

Angular Tree Grid Group By Load On Demand Example

구현

이 샘플에서는 데이터가 부분적으로 로드됩니다. 처음에는 최상위 카테고리만 표시되고, 상위 행이 확장되면 하위 데이터가 제공됩니다. 이 접근 방식에 대한 자세한 내용은 요청 시 트리 그리드 로드 항목을 참조하세요. 데이터는 "ShipCountry", "ShipCity" 및 "Discontinued" 필드로 그룹화되고 결과 계층 구조는 별도의 열에 표시됩니다. 그룹화는 원격 서비스에서 수행됩니다. 즉, 데이터가 수정되고 계층 보기에 최종 데이터를 표시하는 데 사용되는 해당 하위 및 상위 키가 할당됩니다. 이 서비스의 작동 방식에 대한 자세한 내용은 remoteService.ts 파일의 TreeGridGroupingLoadOnDemandService 클래스를 참조하세요.

다음은 요청 시 로드를 사용하는 방법의 예입니다.

    <igx-tree-grid #treeGrid
        [data]="data"
        [loadChildrenOnDemand]="loadChildren"
        [primaryKey]="primaryKey"
        [foreignKey]="foreignKey"
        [hasChildrenKey]="hasChildrenKey">
        <igx-tree-grid-group-by-area
            [grid]="treeGrid"
            [(expressions)]="groupingExpressions"
            (expressionsChange)="onExpressionsChange($event)"
            [hideGroupedColumns]="true">
        </igx-tree-grid-group-by-area>
        <igx-column [field]="groupColumnKey"></igx-column>

사용자가 행을 확장할 때 하위 행을 로드하기 위해 트리 그리드는 콜백 입력 속성 loadChildrenOnDemand 제공합니다. 하위 데이터는 서버에서 검색되고 그룹화 매개변수에 따라 요청된 상위 행에 할당됩니다.

public groupingExpressions: IGroupingExpression[] = [
    { fieldName: 'ShipCountry', dir: 2, ignoreCase: true, strategy: DefaultSortingStrategy.instance() },
    { fieldName: 'ShipCity', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() },
    { fieldName: 'Discontinued', dir: 1, ignoreCase: true, strategy: DefaultSortingStrategy.instance() }
];
public primaryKey = 'id';
public foreignKey = 'parentId';
public hasChildrenKey = 'children';
public groupColumnKey = '';

private dataService = new TreeGridGroupingLoadOnDemandService();

public ngOnInit() {
    this.reloadData();
}

public loadChildren = (parentID: any, done: (children: any[]) => void) => {
    const groupingParameters = this.assembleGroupingParameters();
    this.dataService.getData(parentID, this.hasChildrenKey, groupingParameters, (children) => done(children));
};

private reloadData() {
    this.treeGrid.isLoading = true;
    this.treeGrid.expansionStates.clear();
    const groupingParameters = this.assembleGroupingParameters();
    this.dataService.getData(null, this.hasChildrenKey, groupingParameters, (children) => {
        this.data = children;
        this.treeGrid.isLoading = false;
        this.treeGrid.reflow();
    });
}

API References

• IgxTreeGridComponent
• IgxGrid구성 요소 스타일

Additional Resources

• TreeGrid 개요
• TreeGrid 요약
• 그리드 요약

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

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub