Grupo de cuadrícula de árbol Angular por

    Si tiene datos no jerárquicos y desea agruparlos por una o más columnas y completar las filas principales con valores agregados, puede usar IgxTreeGridComponent junto con la tubería treeGridGrouping y el componente UI con el selector igx-tree-grid-group-by-area.

    La canalización treeGridGrouping agrupa los datos según los parámetros proporcionados y la jerarquía resultante se muestra en una columna separada. La canalización también puede calcular valores agregados para las filas principales generadas si se proporcionan agregaciones. A continuación se muestra un ejemplo de cómo utilizar la tubería en la plantilla:

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

    Los argumentos de la tubería son los siguientes:

    • groupingExpressions: una matriz de objetos IGroupingExpression que contiene información sobre los campos utilizados para generar la jerarquía y los detalles de clasificación para cada grupo.
    • groupKey: un valor de cadena para el nombre de la columna de jerarquía generada
    • childDataKey: un valor de cadena para el campo donde se almacena la colección secundaria de las filas principales generadas.
    • grid -IgxTreeGridComponent que se utiliza para la agrupación
    • agregaciones (opcional): una matriz de objetos ITreeGridAggregation que contiene información sobre las funciones de agregación

    El componente de interfaz de usuario con selector igx-tree-grid-group-by-area maneja las interacciones de la interfaz de usuario relacionadas con las columnas que se utilizan para la agrupación. A continuación se muestra un ejemplo de cómo utilizar el componente en la plantilla:

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

    Las entradas del componente son las siguientes:

    • grid -IgxTreeGridComponent que se utiliza para la agrupación
    • expresiones: una matriz de objetos IGroupingExpression que contiene los campos utilizados para generar la jerarquía
    • hideGroupedColumns: un valor booleano que indica si se deben ocultar las columnas mediante las cuales se realizó la agrupación
    • dropAreaTemplate: una plantilla para el área de colocación que se puede utilizar para anular la plantilla de área de colocación predeterminada
    • dropAreaMessage: una cadena que se puede utilizar para anular el mensaje predeterminado para la plantilla de área de colocación predeterminada
    Note

    Para que la clasificación funcione correctamente, debe establecer la propiedad sortStrategy de IgxTreeGridComponent en una instancia de IgxGroupedTreeGridSorting.

    Angular Tree Grid Group By Example

    Implementación

    En este ejemplo, utilizamos la canalización treeGridGrouping y el componente UI con el selector igx-tree-grid-group-by-area para la agrupación. Los datos están agrupados por los campos "categoría", "tipo" y "contrato". La jerarquía resultante se muestra en la columna "categorías" recién creada. La tubería también calcula valores agregados para las filas principales generadas para las columnas "precio", "cambio" y "cambioP".

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

    Aquí puede ver cómo se definen las expresiones de agrupación y agregaciones:

    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

    Implementación

    En este ejemplo, los datos se cargan en porciones. Inicialmente, solo se muestran las categorías de nivel superior; luego, los datos secundarios se entregan una vez que se expande una fila principal. Para obtener más información sobre este enfoque, consulte el tema Carga según demanda de la red de árboles. Los datos se agrupan por los campos "ShipCountry", "ShipCity" y "Discontinued" y la jerarquía resultante se muestra en una columna separada. La agrupación se realiza en un servicio remoto: los datos se modifican y se asignan las claves secundarias y principales correspondientes que se utilizan para mostrar los datos finales en una vista jerárquica. Para obtener más información sobre cómo funciona este servicio, puede consultar la clase TreeGridGroupingLoadOnDemandService en el archivo remoteService.ts.

    A continuación se muestra un ejemplo de cómo utilizar la carga bajo 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 cargar las filas secundarias cuando el usuario expande una fila, Tree Grid proporciona la propiedad de entrada de devolución de llamada loadChildrenOnDemand: los datos secundarios se recuperan del servidor y se asignan a la fila principal solicitada según los parámetros de agrupación.

    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

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.