Grupo de grade de árvore Angular por

    Se você tiver dados não hierárquicos e quiser agrupar por uma ou mais colunas e preencher as linhas pai com valores agregados, você pode usar o IgxTreeGridComponent junto com o pipe treeGridGrouping e o componente de interface do usuário com o seletor igx-tree-grid-group-by-area.

    O pipe treeGridGrouping agrupa os dados com base nos parâmetros fornecidos e a hierarquia resultante é exibida em uma coluna separada. O pipe também pode calcular valores agregados para as linhas pai geradas se agregações forem fornecidas. Aqui está um exemplo de como usar o pipe no modelo:

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

    Os argumentos do pipe são os seguintes:

    • groupingExpressions - uma matriz de objetos IGroupingExpression que contém informações sobre os campos usados para gerar a hierarquia e os detalhes de classificação para cada grupo
    • groupKey - um valor de string para o nome da coluna de hierarquia gerada
    • childDataKey - um valor de string para o campo onde a coleção filho das linhas pai geradas é armazenada
    • grid -IgxTreeGridComponent que é usado para o agrupamento
    • agregações (opcional) - uma matriz de objetos ITreeGridAggregation que contém informações sobre as funções de agregação

    O componente UI com seletor igx-tree-grid-group-by-area manipula as interações UI relacionadas às colunas que são usadas para o agrupamento. Aqui está um exemplo de como usar o componente no template:

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

    As entradas do componente são as seguintes:

    • grid -IgxTreeGridComponent que é usado para o agrupamento
    • expressões - uma matriz de objetos IGroupingExpression que contém os campos usados para gerar a hierarquia
    • hideGroupedColumns - um valor booleano que indica se deve ocultar as colunas pelas quais o agrupamento foi executado
    • dropAreaTemplate - um modelo para a área de lançamento que pode ser usado para substituir o modelo de área de lançamento padrão
    • dropAreaMessage - uma string que pode ser usada para substituir a mensagem padrão do modelo de área de depósito padrão
    Note

    Para que a classificação funcione corretamente, você deve definir a propriedade sortStrategy do IgxTreeGridComponent como uma instância de IgxGroupedTreeGridSorting.

    Angular Tree Grid Group By Example

    Implementação

    Neste exemplo, estamos usando o pipe treeGridGrouping e o componente UI com seletor igx-tree-grid-group-by-area para o agrupamento. Os dados são agrupados pelos campos "category", "type" e "contract". A hierarquia resultante é exibida na coluna "categories" recém-criada. O pipe também calcula valores agregados para as linhas pai geradas para as colunas "price", "change" e "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>

    Aqui você pode ver como as expressões de agrupamento e agregações são definidas:

    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

    Implementação

    Neste exemplo, os dados são carregados em partes. Inicialmente, apenas as categorias de nível superior são exibidas, então os dados filhos são servidos quando uma linha pai é expandida. Para obter mais informações sobre essa abordagem, consulte o tópico Tree Grid Load On Demand. Os dados são agrupados pelos campos "ShipCountry", "ShipCity" e "Discontinued" e a hierarquia resultante é exibida em uma coluna separada. O agrupamento é realizado em um serviço remoto - os dados são modificados e as chaves filho e pai correspondentes são atribuídas, que são usadas para exibir os dados finais em uma exibição hierárquica. Para obter mais informações sobre como esse serviço funciona, você pode dar uma olhada na classe TreeGridGroupingLoadOnDemandService no arquivo remoteService.ts.

    Aqui está um exemplo de como usar carga sob demanda:

        <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>

    Para carregar as linhas filhas quando o usuário expande uma linha, o Tree Grid fornece a propriedade de entrada de retorno de chamada loadChildrenOnDemand- os dados filhos são recuperados do servidor e atribuídos à linha pai solicitada com base nos parâmetros de agrupamento.

    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

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.