Descripción general del componente de cuadrícula de árbol Angular

La cuadrícula de árbol Ignite UI for Angular se utiliza para mostrar y manipular datos jerárquicos o planos autorreferenciales. Vincule rápidamente sus datos con muy poco código o use una variedad de eventos para personalizar diferentes comportamientos. Este componente proporciona un amplio conjunto de funciones como selección de datos, filtrado de estilo de Excel, ordenación, paginación, agrupación, plantillas, movimiento de columnas, anclaje de columnas, exportación a Excel y CSV, y más.

最速で機能豊富な Angular Data Grid は、ページング、ソート、フィルタリング、グループ化、PDF および Excel へのエクスポートなどの機能を提供します。究極のアプリ構築エクスペリエンスとデータ操作に必要なすべてが揃っています。

無料で試してみる

Ejemplo de cuadrícula de árbol Angular

En este ejemplo, puedes ver cómo los usuarios pueden mostrar datos jerárquicos. Hemos incluido opciones de filtrado y ordenación, fijación y ocultación, selección de filas, exportación a Excel y CSV, y plantillas de celdas que utilizan nuestro componente Sparkline. Además, puedes ver un ejemplo de paginación personalizada con Angular Pagination.

EXAMPLE

TS

HTML

SCSS

import { Component, OnInit } from '@angular/core';
import { GridSelectionMode, IColumnExportingEventArgs, IgxCsvExporterService, IgxExcelExporterService, IgxTreeGridComponent, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular';
import { EMPLOYEE_DATA } from './data';
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive';
import { IgxSparklineCoreModule } from 'igniteui-angular-charts';

@Component({
    selector: 'app-tree-grid-childdatakey-sample',
    styleUrls: ['./tree-grid-childdatakey-sample.component.scss'],
    templateUrl: './tree-grid-childdatakey-sample.component.html',
    imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxPaginatorComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSparklineCoreModule]
})
export class TreeGridChilddatakeySampleComponent implements OnInit {
    public localData: any[];
    public selectionMode: GridSelectionMode = 'multiple';
    constructor(private excelExporter: IgxExcelExporterService, private csvExporter: IgxCsvExporterService) {
        const skipColumnExport = (eventArgs: IColumnExportingEventArgs) => {
            eventArgs.cancel = eventArgs.header === 'Performance';
        };

        this.excelExporter.columnExporting.subscribe(skipColumnExport);
        this.csvExporter.columnExporting.subscribe(skipColumnExport);
    }

    public ngOnInit() {
        const employees = EMPLOYEE_DATA;
        for (const employee of employees) {
            this.getPerformance(employee);
        }
        this.localData = employees;
    }

    public getPerformance(employee: any): any {
        employee['Performance'] = this.getPerformanceData(12);
        const hasEmployees = employee.Employees === undefined;
        if (hasEmployees) {
            return employee;
        } else {
            for (const employer of employee.Employees) {
                this.getPerformance(employer);
            }
        }
    }

    public getPerformanceData(weeks?: number): any[] {
        if (weeks === undefined) {
            weeks = 20;
        }
        const performance: any[] = [];
        for (let w = 0; w < weeks; w++) {
            const value = this.getRandomNumber(0, 100);
            // eslint-disable-next-line @typescript-eslint/naming-convention
            performance.push({Points: value, Week: w});
        }
        return performance;
    }

    public  getRandomNumber(min: number, max: number): number {
        return Math.round(min + Math.random() * (max - min));
    }
}
tsコピー

<div class="grid__wrapper">
    <igx-tree-grid [igxPreventDocumentScroll]="true" #treeGrid [data]="localData" childDataKey="Employees" width="100%" height="800px"
                   [autoGenerate]="false" [rowSelection]="selectionMode" [moving]="true" [allowFiltering]="true">
        <igx-paginator></igx-paginator>
        <igx-grid-toolbar>
            <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
                <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
                <igx-grid-toolbar-exporter>
                    <span excelText>Export to Excel</span>
                    <span csvText>Export to CSV</span>
                </igx-grid-toolbar-exporter>
            </igx-grid-toolbar-actions>
        </igx-grid-toolbar>

        <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true"  [resizable]="true" [hasSummary]="true"></igx-column>
        <igx-column field="HireDate" dataType="date" [sortable]="true" [editable]="true"  [resizable]="true"></igx-column>
        <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true"  [resizable]="true"></igx-column>
        <igx-column field="Performance" header="Performance" [width]="'260px'" [filterable]="false" >
            <ng-template igxCell let-val>
                <igx-sparkline height="40px" width="250px"
                    [dataSource]="val"
                    valueMemberPath="Points"
                    displayType="Line"
                    lineThickness="2"
                    brush="rgb(21, 190, 6)">
                </igx-sparkline>
            </ng-template>
        </igx-column>
    </igx-tree-grid>
</div>
htmlコピー

.grid__wrapper {
    margin: 15px;
}
scssコピー

Edit in: CodesandboxStackBlitz

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

Primeros pasos con Ignite UI for Angular cuadrícula de árboles

Para comenzar con el componente Ignite UI for Angular Tree Grid, primero debe instalar Ignite UI for Angular. En una aplicación Angular existente, escriba el siguiente comando:

ng add igniteui-angular
cmd

Para obtener una introducción completa al Ignite UI for Angular, lea el tema de introducción.

El siguiente paso es importar IgxTreeGridModule en su archivo app.module.ts.

// app.module.ts

import { IgxTreeGridModule } from 'igniteui-angular';
// import { IgxTreeGridModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxTreeGridModule,
        ...
    ]
})
export class AppModule {}
typescript

Alternativamente, a partir de 16.0.0, puede importar IgxTreeGridComponent como una dependencia independiente o usar el token IGX_TREE_GRID_DIRECTIVES para importar el componente y todos sus componentes y directivas de soporte.

// home.component.ts

import { IGX_TREE_GRID_DIRECTIVES } from 'igniteui-angular';
// import { IGX_TREE_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: '<igx-tree-grid [data]="data"></igx-tree-grid>',
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_TREE_GRID_DIRECTIVES]
    /* or imports: [IgxTreeGridComponent] */
})
export class HomeComponent {
    public data: Employee [];
}
typescript

Ahora que tiene el módulo o las directivas Ignite UI for Angular Tree Grid importados, puede comenzar a usar el igx-tree-grid componente.

Uso de la cuadrícula de árbol Angular

Este componente puede utilizar el HammerModule ​ ​opcionalmente. Se puede importar en el módulo raíz de la aplicación para que las interacciones táctiles funcionen como se espera.​

​IgxTreeGridComponent comparte muchas características con IgxGridComponent, pero también agrega la capacidad de mostrar sus datos jerárquicamente. Para lograr esto, IgxTreeGridComponent nos proporciona un par de formas de definir las relaciones entre nuestros objetos de datos: usando una colección secundaria para cada objeto de datos o usando claves primarias y externas para cada objeto de datos.

Células de árbol

Independientemente de qué opción se utilice para construir la jerarquía de la cuadrícula de árbol (colección secundaria o claves primarias y externas), las filas de la cuadrícula de árbol se construyen con dos tipos de celdas:

• IgxGridCell: celda ordinaria que contiene un valor.
• IgxGridCell: celda de árbol que contiene un valor, un indicador de expansión/contraer y un elemento div de sangría, que se basa en el nivel de la fila de la celda. Se puede acceder al nivel de un componente de fila a través de la propiedad de level de su treeRow interno.

Cada fila puede tener solo una celda de árbol, pero puede tener múltiples (o ninguna) celdas ordinarias.

Profundidad de expansión inicial

Inicialmente, la cuadrícula de árbol expandirá todos los niveles de nodos y los mostrará. Este comportamiento se puede configurar utilizando la propiedad expansionDepth. De forma predeterminada, su valor es Infinito, lo que significa que se expandirán todos los niveles de nodos. Puede controlar la profundidad de expansión inicial estableciendo esta propiedad en un valor numérico. Por ejemplo, 0 mostrará solo los nodos de nivel raíz, 1 mostrará los nodos de nivel raíz y sus nodos secundarios, etc.

Colección infantil

Cuando utilizamos la opción de colección secundaria, cada objeto de datos contiene una colección secundaria, que se completa con elementos del mismo tipo que el objeto de datos principal. De esta forma, cada registro de nuestra grilla de árbol tendrá una referencia directa a cualquiera de sus hijos. En este caso, la propiedad data de nuestra cuadrícula de árbol que contiene la fuente de datos original será una colección definida jerárquicamente.

Para este ejemplo, usemos la siguiente estructura de colección:

// Sample Employee Data

export const EMPLOYEE_DATA = [
    {
        Name: "Johnathan Winchester",
        ID: 1,
        HireDate: new Date(2008, 3, 20),
        Age: 55,
        Employees: [
            {
                Name: "Michael Burke",
                ID: 3,
                HireDate: new Date(2011, 6, 3),
                Age: 43,
                Employees: []
            },
            {
                Name: "Thomas Anderson"
                ID: 2,
                HireDate: new Date(2009, 6, 19),
                Age: 29,
                Employees: []
            },
            ...
        ]
    },
    ...
]
typescript

Ahora comencemos importando nuestra colección de datos y vinculándola a la entrada data de nuestra cuadrícula de árbol.

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData">
</igx-tree-grid>
html

Para que IgxTreeGridComponent construya la jerarquía, tendremos que establecer su propiedad childDataKey en el nombre de la colección secundaria que se utiliza en cada uno de nuestros objetos de datos. En nuestro caso esa será la colección de Empleados. Además, desactivaremos la generación automática de columnas y las definiremos manualmente haciéndolas coincidir con las propiedades reales de nuestros objetos de datos. (La colección Empleados se usará automáticamente para la jerarquía, por lo que no es necesario incluirla en las definiciones de las columnas).

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
               [autoGenerate]="false">
    <igx-column field="Name" dataType="string"></igx-column>
    <igx-column field="HireDate" dataType="date"></igx-column>
    <igx-column field="Age" dataType="number"></igx-column>
</igx-tree-grid>
html

Ahora habilitaremos las funciones de selección de filas y paginación de la cuadrícula de árbol utilizando las propiedades rowSelection y de paging. También habilitaremos la función de resúmenes en la primera columna y las funciones de filtrado, clasificación, edición, movimiento y cambio de tamaño para cada una de nuestras columnas.

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
               [autoGenerate]="false" [rowSelection]="'multiple'" [allowFiltering]="true" [moving]="true">
    <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [resizable]="true"
                [hasSummary]="true"></igx-column>
    <igx-column field="HireDate" dataType="date" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-paginator>
    </igx-paginator>
</igx-tree-grid>
html

Finalmente, habilitaremos la barra de herramientas de nuestra cuadrícula de árbol, junto con las funciones de ocultación de columnas, fijación de columnas y exportación utilizando IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent e IgxGridToolbarExporterComponent respectivamente.

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="localData" childDataKey="Employees"
               [autoGenerate]="false" [rowSelection]="'multiple'" [allowFiltering]="true" [moving]="true">
    <igx-grid-toolbar>
            <igx-grid-toolbar-title>Employees</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
                <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
                <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
            </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
    <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="HireDate" dataType="date" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-paginator [perPage]="6">
    </igx-paginator>
</igx-tree-grid>
html

Puedes ver el resultado del código anterior al comienzo de este artículo en la sección Ejemplo de cuadrícula de árbol Angular.

Claves primarias y externas

Cuando utilizamos la opción de claves primarias y externas, cada objeto de datos contiene una clave primaria y una clave externa. La clave principal es el identificador único del objeto de datos actual y la clave externa es el identificador único de su objeto principal. En este caso, la propiedad data de nuestra cuadrícula de árbol que contiene la fuente de datos original será una colección plana.

El siguiente es un ejemplo de un componente que contiene una colección plana definida con una relación de claves primarias y externas:

// treeGridSample.component.ts

@Component({...})
export class MyComponent implements OnInit {

    public data: any[];

    constructor() { }

    public ngOnInit() {
        // Primary and Foreign keys sample data
        this.data = [
            { ID: 1, ParentID: -1, Name: "Casey Houston", JobTitle: "Vice President", Age: 32 },
            { ID: 2, ParentID: 1, Name: "Gilberto Todd", JobTitle: "Director", Age: 41 },
            { ID: 3, ParentID: 2, Name: "Tanya Bennett", JobTitle: "Director", Age: 29 },
            { ID: 4, ParentID: 2, Name: "Jack Simon", JobTitle: "Software Developer", Age: 33 },
            { ID: 5, ParentID: 8, Name: "Celia Martinez", JobTitle: "Senior Software Developer", Age: 44 },
            { ID: 6, ParentID: -1, Name: "Erma Walsh", JobTitle: "CEO", Age: 52 },
            { ID: 7, ParentID: 2, Name: "Debra Morton", JobTitle: "Associate Software Developer", Age: 35 },
            { ID: 8, ParentID: 10, Name: "Erika Wells", JobTitle: "Software Development Team Lead", Age: 50 },
            { ID: 9, ParentID: 8, Name: "Leslie Hansen", JobTitle: "Associate Software Developer", Age: 28 },
            { ID: 10, ParentID: -1, Name: "Eduardo Ramirez", JobTitle: "Development Manager", Age: 53 }
        ];
    }
}
typescript

En los datos de ejemplo anteriores, todos los registros tienen un ID, un ParentID y algunas propiedades adicionales como Nombre, Título del trabajo y Edad. Como se mencionó anteriormente, el ID de los registros debe ser único. ParentID contiene el ID del nodo principal. Si una fila tiene un ParentID que no coincide con ninguna fila en la cuadrícula de árbol, eso significa que esta fila es una fila raíz.

La relación padre-hijo se configura utilizando las propiedades primaryKey y foreignKey de la cuadrícula de árbol.

Aquí está la plantilla del componente que demuestra cómo configurar la cuadrícula de árbol para mostrar los datos definidos en la colección plana anterior:

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
    [autoGenerate]="false">
    <igx-column field="Name" dataType="string"></igx-column>
    <igx-column field="JobTitle" dataType="string"></igx-column>
    <igx-column field="Age" dataType="number"></igx-column>
</igx-tree-grid>
html

Además, habilitaremos la función de selección de filas de la cuadrícula de árbol utilizando la propiedad rowSelection y también las funciones de filtrado, clasificación, edición, movimiento y cambio de tamaño para cada una de nuestras columnas.

<!--treeGridSample.component.html-->

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
    [autoGenerate]="false" [rowSelection]="'multiple'" [allowFiltering]="true" [moving]="true">
    <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="JobTitle" dataType="string" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
    <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [resizable]="true"></igx-column>
</igx-tree-grid>
html

Y aquí está el resultado final:

EXAMPLE

TS

HTML

SCSS

import { Component, OnInit } from '@angular/core';
import { GridSelectionMode, IgxTreeGridComponent, IgxColumnComponent, IgxCellTemplateDirective } from 'igniteui-angular';
import { Data } from './data';
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive';
import { IgxSparklineCoreModule } from 'igniteui-angular-charts';

@Component({
    selector: 'app-tree-grid-primaryforeignkey-sample',
    styleUrls: ['./tree-grid-primaryforeignkey-sample.component.scss'],
    templateUrl: './tree-grid-primaryforeignkey-sample.component.html',
    imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSparklineCoreModule]
})
export class TreeGridPrimaryforeignkeySampleComponent implements OnInit {
    public data: any[];
    public selectionMode: GridSelectionMode = 'multiple';
    constructor() { }

    public ngOnInit() {
        const employees = Data.employeePrimaryForeignKeyTreeData();
        for (const employee of employees) {
            this.getPerformance(employee);
        }
        this.data = employees;
    }

    public getPerformance(employee: any): any {
        employee['Performance'] = this.getPerformanceData(12);
        const hasEmployees = employee.Employees === undefined;
        if (hasEmployees) {
            return employee;
        } else {
            for (const employer of employee.Employees) {
                this.getPerformance(employer);
            }
        }
    }

    public getPerformanceData(weeks?: number): any[] {
        if (weeks === undefined) {
            weeks = 20;
        }
        const performance: any[] = [];
        for (let w = 0; w < weeks; w++) {
            const value = this.getRandomNumber(0, 100);
            // eslint-disable-next-line @typescript-eslint/naming-convention
            performance.push({Points: value, Week: w});
        }
        return performance;
    }

    public  getRandomNumber(min: number, max: number): number {
        return Math.round(min + Math.random() * (max - min));
    }
}
tsコピー

<div class="grid__wrapper">
    <igx-tree-grid [igxPreventDocumentScroll]="true" #treeGrid [data]="data" [allowFiltering]="true" [moving]="true"
        primaryKey="ID" foreignKey="ParentID" width="100%" height="400px"
        [rowSelection]="selectionMode">
        <igx-column field="Name" dataType="string" [sortable]="true" [editable]="true" [resizable]="true" ></igx-column>
        <igx-column field="JobTitle" dataType="string" [sortable]="true" [editable]="true" [resizable]="true" ></igx-column>
        <igx-column field="Age" dataType="number" [sortable]="true" [editable]="true" [resizable]="true" ></igx-column>
        <igx-column field="Performance" header="Performance" [width]="'260px'" [filterable]="false" >
            <ng-template igxCell let-val>
                <igx-sparkline height="40px" width="250px"
                    [dataSource]="val"
                    valueMemberPath="Points"
                    displayType="Line"
                    lineThickness="2"
                    brush="rgb(21, 190, 6)" >
                </igx-sparkline>
            </ng-template>
        </igx-column>
    </igx-tree-grid>
</div>
htmlコピー

.grid__wrapper {
    margin: 15px;
}
scssコピー

Edit in: CodesandboxStackBlitz

Persistencia e Integración

La sangría de las celdas del árbol persiste en otras funciones de la cuadrícula del árbol, como el filtrado, la clasificación y la paginación.

• Cuando se aplica la clasificación en una columna, las filas de datos se ordenan por niveles. Esto significa que las filas del nivel raíz se ordenarán independientemente de sus respectivos hijos. Sus respectivas colecciones infantiles también se clasificarán de forma independiente y así sucesivamente.
• La primera columna (la que tiene un visibleIndex de 0) es siempre la columna del árbol.
• La columna que termina con un visibleIndex de 0 después de operaciones como fijar, ocultar y mover columnas se convierte en la columna del árbol.
• Las hojas de cálculo de Excel exportadas reflejan la jerarquía agrupando los registros tal como están agrupados en la propia cuadrícula de árbol. Todos los estados expandidos de los registros también se conservarán y reflejarán.
• Al exportar a CSV, los niveles y los estados expandidos se ignoran y todos los datos se exportan como planos.

Dimensionamiento de cuadrícula de árbol Angular

Consulte el tema Tamaño de la cuadrícula.

Estilo

La cuadrícula del árbol permite estilizar a través de Ignite UI for Angular Theme Library. La cuadrícula de grid-theme árbol expone una amplia variedad de propiedades, lo que permite la personalización de todas las características de la cuadrícula de árbol.

Para comenzar a diseñar el Tree Grid, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

Siguiendo el enfoque más simple, creamos un nuevo tema que extiende el grid-theme y acepta los parámetros necesarios para personalizar la cuadrícula de árbol como se desee.

No existe una función específica de cuadrícula de árbol sass.

$custom-theme: grid-theme(
  $cell-active-border-color: #ffcd0f,
  $cell-selected-background: #6f6f6f,
  $row-hover-background: #f8e495,
  $row-selected-background: #8d8d8d,
  $header-background: #494949,
  $header-text-color: #fff,
  $expand-icon-color: #ffcd0f,
  $expand-icon-hover-color: #e0b710,
  $resize-line-color: #ffcd0f,
  $row-highlight: #ffcd0f
);
scss

En lugar de codificar los valores de color como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores mediante el uso de las palette funciones y color. Consulte el Palettes tema para obtener orientación detallada sobre cómo usarlos.

El último paso es incluir el tema del componente en nuestra aplicación.

@include css-vars($custom-theme);
scss

Demostración de diseño de cuadrícula de árbol Angular

EXAMPLE

TS

HTML

SCSS

import { Component, OnInit } from '@angular/core';
import { EMPLOYEE_FLAT_AVATARS_DATA } from '../data/employees-flat-avatars';
import { IgxTreeGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent } from 'igniteui-angular';
import { IgxPreventDocumentScrollDirective } from '../directives/prevent-scroll.directive';

@Component({
    selector: 'app-tree-grid-style',
    styleUrls: ['./tree-grid-style.component.scss'],
    templateUrl: './tree-grid-style.component.html',
    imports: [IgxTreeGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxAvatarComponent]
})
export class TreeGridStyleComponent implements OnInit {

    public data: any[];

    public ngOnInit() {
        this.data = EMPLOYEE_FLAT_AVATARS_DATA();
    }
}
tsコピー

<div class="grid__wrapper">
    <igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" height="560px">
        <igx-column field="Name" width="300px">
            <ng-template igxCell let-cell="cell">
                <div class="cell__inner">
                    <igx-avatar [src]="cell.row.data.Avatar" shape="circle" size="small"></igx-avatar>
                    <span class="name">{{ cell.value }}</span>
                </div>
            </ng-template>
        </igx-column>
        <igx-column [field]="'Title'" dataType="string"></igx-column>
        <igx-column [field]="'Age'" dataType="number"></igx-column>
        <igx-column [field]="'HireDate'" dataType="date"></igx-column>
    </igx-tree-grid>
</div>
htmlコピー

@use "layout.scss";
@use "igniteui-angular/theming" as *;

$custom-theme: grid-theme(
  $cell-active-border-color: #ffcd0f,
  $cell-selected-background: #6f6f6f,
  $row-hover-background: #f8e495,
  $row-selected-background: #8d8d8d,
  $header-background: #494949,
  $header-text-color: #fff,
  $expand-icon-color: #ffcd0f,
  $expand-icon-hover-color: #e0b710,
  $resize-line-color: #ffcd0f,
  $row-highlight: #ffcd0f
);

@include css-vars($custom-theme);
 scssコピー

Edit in: CodesandboxStackBlitz

La muestra no se verá afectada por el tema global seleccionado en Change Theme.

Rendimiento (experimental)

El diseño de igxTreeGrid le permite aprovechar la función Event Coalescing que introdujo Angular. Esta función permite mejorar el rendimiento en aproximadamente un 20% en términos de interacciones y capacidad de respuesta. Esta función se puede habilitar en el nivel de aplicación simplemente configurando las propiedades ngZoneEventCoalescing y ngZoneRunCoalescing en true en el método bootstrapModule:

platformBrowserDynamic()
  .bootstrapModule(AppModule, { ngZoneEventCoalescing: true, ngZoneRunCoalescing: true })
  .catch(err => console.error(err));
typescript

Esta todavía es una característica experimental para igxTreeGrid. Esto significa que puede haber algunos comportamientos inesperados en Tree Grid. En caso de encontrar algún comportamiento de este tipo, contáctenos en nuestra página de Github.

Habilitarlo puede afectar otras partes de una aplicación Angular con las que igxTreeGrid no está relacionado.

Limitaciones conocidas

Limitación	Descripción
Plantillas de celdas de árbol	Al crear una plantilla de celda de árbol, el contenido que se extiende fuera de los límites de la celda no se mostrará a menos que se coloque en una superposición.
Agrupar por	La función Agrupar por no es compatible porque es inherente a la cuadrícula de árbol.

La arboleda tiene un límite de profundidad de 25 niveles. Para admitir más niveles es necesario agregar clases CSS personalizadas en la aplicación. Puede ver un ejemplo de dicha clase CSS a continuación:

.igx-grid__tree-cell--padding-level-26 {
    padding-left: 39rem;
}
scss

igxTreeGrid usa la directiva igxForOf internamente, por lo tanto, todas las limitaciones igxForOf son válidas para igxTreeGrid. Para obtener más detalles, consulte la sección Problemas conocidos de igxForOf.

Referencias de API

• Componente IgxTreeGrid
• IgxGridCell
• IgxÁrbolCuadrículaFila
• Componente IgxGrid
• Estilos de componentes IgxGrid
• Servicio de transacciones IgxBase

Dependencias temáticas

• Tema IgxIcon
• Tema IgxInputGroup
• Tema IgxChip
• Tema IgxRipple
• Tema IgxButton
• Tema IgxOverlay
• Tema desplegable Igx
• Tema IgxCalendario
• Tema IgxSnackBar
• Tema IgxBadge

Recursos adicionales

• Tamaño de cuadrícula
• Cuadrícula de datos
• Edición de filas

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

• Ignite UI for Angular Foros
• Ignite UI for Angular GitHub