Filtrado avanzado de cuadrícula Angular

El filtrado avanzado proporciona un cuadro de diálogo que permite la creación de grupos con condiciones de filtrado en todas las columnas para cualquier tabla Angular como la cuadrícula.

Angular Grid Advanced Filtering Example

Interaction

Para abrir el cuadro de diálogo de filtrado avanzado, se debe hacer clic en el botón Filtrado avanzado en la barra de herramientas de la cuadrícula. El cuadro de diálogo utiliza el componente IgxQueryBuilder para generar, mostrar y editar la lógica de filtrado. Puede consultar el Query Builder topic para obtener detalles sobre el proceso de interacción.

Para filtrar los datos una vez que esté listo para crear las condiciones y grupos de filtrado, debe hacer clic en el botón Aplicar. Si ha modificado el filtro avanzado, pero no desea conservar los cambios, debe hacer clic en el botón Cancelar. También puede borrar el filtro avanzado haciendo clic en el botón Borrar filtro.

Usage

Para habilitar el filtrado avanzado, la propiedad de entrada allowAdvancedFiltering debe establecerse en true.

<igx-grid [data]="data" [autoGenerate]="true" [allowAdvancedFiltering]="true">
    <igx-grid-toolbar></igx-grid-toolbar>
</igx-grid>

El filtrado avanzado genera un FilteringExpressionsTree que se almacena en la propiedad de entrada advancedFilteringExpressionsTree. Puede utilizar la propiedad advancedFilteringExpressionsTree para establecer un estado inicial del filtrado avanzado.

ngAfterViewInit(): void {
    const tree = new FilteringExpressionsTree(FilteringLogic.And);
    tree.filteringOperands.push({
        fieldName: 'ID',
        condition: IgxStringFilteringOperand.instance().condition('contains'),
        searchVal: 'a',
        ignoreCase: true
    });
    const subTree = new FilteringExpressionsTree(FilteringLogic.Or);
    subTree.filteringOperands.push({
        fieldName: 'ContactTitle',
        condition: IgxStringFilteringOperand.instance().condition('doesNotContain'),
        searchVal: 'b',
        ignoreCase: true
    });
    subTree.filteringOperands.push({
        fieldName: 'CompanyName',
        condition: IgxStringFilteringOperand.instance().condition('startsWith'),
        searchVal: 'c',
        ignoreCase: true
    });
    tree.filteringOperands.push(subTree);
    
    this.grid.advancedFilteringExpressionsTree = tree;
}

En caso de que no desee mostrar la barra de herramientas Grid, puede usar los métodos openAdvancedFilteringDialog y closeAdvancedFilteringDialog para abrir y cerrar el cuadro de diálogo de filtrado avanzado mediante programación.

Note

Puede habilitar tanto quickFilter / excelStyleFilter como las interfaces de usuario de filtrado avanzado en Grid. Ambas interfaces de usuario de filtrado funcionarán de forma independiente. El resultado final filtrado en la Cuadrícula es la intersección entre los resultados de los dos filtros.

External Advanced filtering

Como puede ver en la demostración de arriba, el cuadro de diálogo de Filtrado avanzado está alojado en una superposición en la parte superior de la cuadrícula. Cuando la configuración en el cuadro de diálogo esté lista, las acciones de aplicar o cerrar ocultarán ese cuadro de diálogo. Hay una manera de hacer que ese cuadro de diálogo permanezca siempre visible: utilizarlo como un componente independiente. En la demostración siguiente, el cuadro de diálogo de filtrado avanzado se declara por separado del Grid.

Demo

Usage

Es muy fácil configurar el filtrado avanzado para que funcione fuera del Grid. Todo lo que necesitas hacer es crear el cuadro de diálogo y establecer su propiedad grid:

<igx-advanced-filtering-dialog [grid]="grid1">
</igx-advanced-filtering-dialog>

También puede ver cómo nuestro App Builder ™ de arrastrar y soltar puede optimizar toda la historia del diseño a código Angular.

Estilismo

Para comenzar a diseñar el cuadro de diálogo Filtrado avanzado, 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';

El cuadro de diálogo de filtrado avanzado toma su color de fondo del tema de la cuadrícula, utilizando el parámetro filtering-row-background. Para cambiar el fondo necesitamos crear un tema personalizado:

$custom-grid: grid-theme(
    $filtering-row-background: #FFCD0F
);

Dado que tenemos otros componentes dentro del cuadro de diálogo de filtrado avanzado, como botones, chips, menús desplegables y entradas, necesitamos crear un tema separado para cada uno:

$custom-button: button-theme(
    $disabled-color: gray,
    ...
);

$custom-button-group: button-group-theme(
    $item-background:  #292826,
    ...
);

$custom-input-group: input-group-theme(
    $box-background: #4a4a4a,
    ...
);

$custom-chip: chip-theme(
    $background: #FFCD0F,
    ...
);

$custom-drop-down: drop-down-theme(
    $background-color: #292826,
    ...
);

En este ejemplo solo cambiamos algunos de los parámetros para los componentes enumerados, pero los button-theme, button-group-theme, chip-theme, drop-down-theme y input-group-theme proporcionan muchos más parámetros para controlar sus componentes. estilo respectivo.

El último paso es incluir los mixins de componentes, cada uno con su respectiva temática. También agregaremos algunos estilos para otros elementos dentro del cuadro de diálogo de filtrado avanzado.

@include grid($custom-grid);
igx-advanced-filtering-dialog {
    @include button($custom-button);
    @include button-group($custom-button-group);
    @include input-group($custom-input-group);
    @include chip($custom-chip);
    @include drop-down($custom-drop-down);
    .igx-filter-empty__title {
        color: #FFCD0F
    }
    .igx-advanced-filter__header {
        color: #FFCD0F
    }
    .igx-filter-tree__expression-actions igx-icon {
        color: #FFCD0F
    }
    .igx-filter-tree__expression-actions igx-icon:hover {
        color: #ffe482
    }
    .igx-filter-tree__expression-actions igx-icon:focus {
        color: #ffe482
    }
    .igx-filter-contextual-menu {
        border: 1px solid #FFCD0F
    }
    .igx-filter-contextual-menu__close-btn {
        position: absolute !important;
        background: #292826 !important;
        border-color: #FFCD0F !important;
    }
    .igx-input-group__input::placeholder {
        color: gray;
    }
}

Note

Analizamos la mayoría de los mixins de componentes dentro de igx-advanced-filtering-dialog, de modo que estos temas personalizados afectarán solo a los componentes anidados en el cuadro de diálogo de filtrado avanzado. De lo contrario, otros botones, chips, entradas y menús desplegables de la aplicación también se verían afectados.

Note

Si el componente utiliza una ViewEncapsulation Emulated, es necesario penetrate esta encapsulación usando::ng-deep:

:host {
    ::ng-deep {
        @include drop-down($custom-drop-down);
        @include grid($custom-grid);
        igx-advanced-filtering-dialog {
            @include button($custom-button);
            @include button-group($custom-button-group);
            @include input-group($custom-input-group);
            @include chip($custom-chip);
            .igx-input-group__input::placeholder {
                color: gray;
            }
            .igx-filter-empty__title {
                color: #FFCD0F
            }
            .igx-advanced-filter__header {
                color: #FFCD0F
            }
            .igx-filter-tree__expression-actions igx-icon {
                color: #FFCD0F
            }
            .igx-filter-tree__expression-actions igx-icon:hover {
                color: #ffe482
            }
            .igx-filter-tree__expression-actions igx-icon:focus {
                color: #ffe482
            }
            .igx-filter-contextual-menu {
                border: 1px solid #FFCD0F
            }
            .igx-filter-contextual-menu__close-btn {
                position: absolute !important;
                background: #292826 !important;
                border-color: #FFCD0F !important;
            }
        }
    }
}

Defining a color palette

En lugar de codificar los valores de color como acabamos de hacer, podemos lograr una mayor flexibilidad en términos de colores utilizando las funciones igx-palette e igx-color.

igx-palette genera una paleta de colores basada en los colores primarios y secundarios que se pasan:

$yellow-color: #FFCD0F;
$black-color: #292826;
$dark-palette: palette($primary: $yellow-color, $secondary: $black-color);

Y luego con igx-color podemos recuperar fácilmente el color de la paleta.

$custom-grid: grid-theme(
    $filtering-row-background: color($dark-palette, "secondary", 400)
);

$custom-button: button-theme(
    $disabled-color: color($dark-palette, "secondary", 100),
    ...
);

$custom-button-group: button-group-theme(
    $item-background: color($dark-palette, "secondary", 400),
    ...
);

$custom-input-group: input-group-theme(
    $box-background: color($dark-palette, "secondary", 200),
    ...
);

$custom-chip: chip-theme(
    $background: color($dark-palette, "primary", 400),
    ...
);

$custom-drop-down: drop-down-theme(
    $background-color: color($dark-palette, "secondary", 400),
    ...
);

Note

​igx-color e igx-palette son funciones potentes para generar y recuperar colores. Consulte el tema Palettes para obtener orientación detallada sobre cómo utilizarlas.

Using Schemas

Yendo más allá con el motor de temas, puede crear una estructura sólida y flexible que se beneficie de los esquemas. Un esquema es una receta de un tema.

Amplíe uno de los dos esquemas predefinidos, que se proporcionan para cada componente, en este caso: esquemas light-grid, light-button, light-button-group, light-chip, light-input-group y light-drop-down:

$grid-dark-palette: palette($primary: #11bd7b, $secondary: #e32057, $info: $black-color);

$custom-grid-schema: extend($_light-grid,
    (
        filtering-row-background:(
           color: ("info")
        )
    )
);

$custom-button-schema: extend($_light-button,
    (
        disabled-color:(
           color: ("secondary", 100)
        ),
        ...
    )
);

$custom-button-group-schema: extend($_light-button-group,
    (
        item-background:(
           color: ("secondary", 400)
        ),
        ...
    )
);

$custom-input-group-schema: extend($_light-input-group,
    (
        box-background:(
           color: ("secondary", 200)
        ),
        ...
    )
);

$custom-chip-schema: extend($_light-chip,
    (
        background:(
           color: ("primary", 400)
        ),
        ...
    )
);

$custom-drop-down-schema: extend($_light-drop-down,
    (
        background-color:(
           color: ("secondary", 400)
        ),
        ...
    )
);

Para aplicar nuestros esquemas personalizados, tenemos que extender uno de los globales (light u dark), que básicamente señala los componentes con un esquema personalizado, y luego agregarlo a los respectivos temas de los componentes:

$custom-light-schema: extend($light-schema,(
    igx-grid: $custom-grid-schema,
    igx-button: $custom-button-schema,
    igx-button-group: $custom-button-group-schema,
    igx-input-group: $custom-input-group-schema,
    igx-chip: $custom-chip-schema,
    igx-drop-down: $custom-drop-down-schema
));

$custom-grid: grid-theme(
    $palette: $grid-dark-palette,
    $schema: $custom-light-schema
);

$custom-button: button-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-button-group: button-group-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-input-group: input-group-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-chip: chip-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

$custom-drop-down: drop-down-theme(
    $palette: $dark-palette,
    $schema: $custom-light-schema
);

No olvide incluir los temas de la misma manera que se demostró anteriormente.

Demo

Note

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

API References

• ComponenteColumnaIgx
• API de componentes IgxGrid
• Estilos de componentes IgxGrid

Additional Resources

• Descripción general de la cuadrícula
• Filtración
• Filtrado de estilos de Excel
• Virtualización y rendimiento
• Paginación
• Clasificación
• resúmenes
• Columna en movimiento
• Fijación de columnas
• Cambio de tamaño de columna
• Selección

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

• Ignite UI for Angular foros angulares
• Ignite UI for Angular GitHub