Cuadrícula de árbol Angular agrupada 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">
    html

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

    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

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

    Angular Grupo de cuadrícula de árboles por ejemplo

    EXAMPLE
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

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

    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();
    typescript

    Angular Ejemplo de grupo de cuadrícula de árbol por carga bajo demanda

    EXAMPLE
    TS
    HTML
    SCSS

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

    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();
        });
    }
    typescript

    Referencias de API

    Recursos adicionales

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