Filtrado de cuadrícula Web Components

    La Ignite UI for Web Components en la cuadrícula Web Components es una función que permite mostrar u ocultar datos de forma selectiva según criterios o condiciones específicos. Hay un contenedor de datos vinculado a través del cual el componente IgcGridComponent proporciona una API de filtrado enriquecida y todas las capacidades de filtrado. Los tipos de filtrado disponibles aquí son tres:

    Web Components Grid Filtering Example

    El siguiente ejemplo demuestra IgcGridComponent 's Filtro rápido experiencia de usuario.

    Setup

    Para especificar si el filtrado está habilitado y qué modo de filtrado se debe utilizar, IgcGridComponent expone las siguientes propiedades: allowFiltering, allowAdvancedFiltering, filterMode y filterable.

    La propiedad allowFiltering le permite especificar las siguientes opciones:

    • falso: se desactivará el filtrado de la cuadrícula correspondiente. Este es el valor predeterminado.
    • verdadero: se habilitará el filtrado para la cuadrícula correspondiente.

    La propiedad allowAdvancedFiltering le permite especificar las siguientes opciones:

    • falso: se desactivará el filtrado avanzado para la cuadrícula correspondiente. Este es el valor predeterminado.
    • verdadero: se habilitará el filtrado avanzado para la cuadrícula correspondiente.

    La propiedad filterMode le permite especificar las siguientes opciones:

    • QuickFilter: una interfaz de usuario de filtrado simplista. Este es el valor predeterminado.
    • ExcelStyleFilter: una interfaz de usuario de filtrado similar a Excel.

    La propiedad filterable le permite especificar las siguientes opciones:

    • verdadero: se habilitará el filtrado para la columna correspondiente. Este es el valor predeterminado.
    • falso: se desactivará el filtrado de la columna correspondiente.
    <igc-grid id="grid1" auto-generate="false" allow-filtering="true">
    <igc-column field="ProductName" data-type="string"></igc-column>
    <igc-column field="Price" data-type="number" filterable="false"></igc-column>
</igc-grid>

    Sin embargo, para habilitar el filtrado avanzado, debe establecer la propiedad de allowAdvancedFiltering entrada en true.7​

    <igc-grid  data="data" auto-generate="true" allow-advanced-filtering="true">
</igc-grid>

    [!Note] You can enable both the QuickFilter or ExcelStyleFilter and the advanced filtering user interfaces in the IgcGridComponent. Both filtering user interfaces will work independently of one another. The final filtered result in the IgcGridComponent is the intersection between the results of the two filters.

    Interaction

    Para abrir la fila de filtro para una columna en particular, se debe hacer clic en el chip 'Filtro' debajo de su encabezado. Para agregar condiciones, debe elegir el operando de filtro usando el menú desplegable a la izquierda de la entrada e ingresar el valor. Para las columnas de números y fechas, se selecciona "Igual" de forma predeterminada, para cadenas, "Contiene" y para booleanos, "Todos". Al presionar 'Entrar' se confirma la condición y ahora podrá agregar otra. Hay un menú desplegable entre los chips de 'condición', que determina el operador lógico entre ellos; 'Y' está seleccionado de forma predeterminada. Para eliminar una condición, puede hacer clic en el botón 'X' del chip y, para editarla, debe seleccionar el chip y la entrada se completará con los datos del chip. Mientras la fila de filtro está abierta, puede hacer clic en el encabezado de cualquier columna filtrable para seleccionarla y poder agregarle condiciones de filtro.

    Si bien se han aplicado algunas condiciones de filtrado a una columna y la fila de filtro está cerrada, puede eliminar las condiciones haciendo clic en el botón de cerrar del chip o puede abrir la fila de filtro seleccionando cualquiera de los chips. Cuando no hay suficiente espacio para mostrar todas las condiciones, se muestra un ícono de filtro con una insignia que indica cuántas condiciones más hay. También se puede hacer clic en él para abrir la fila de filtro.

    Usage

    Hay una estrategia de filtrado predeterminada que se proporciona lista para usar, así como todas las condiciones de filtrado estándar, que el desarrollador puede reemplazar con su propia implementación. Además, proporcionamos una manera de conectar fácilmente sus propias condiciones de filtrado personalizadas. Actualmente, IgcGridComponent proporciona no solo una interfaz de usuario de filtrado simplista, sino también opciones de filtrado más complejas. Dependiendo del dataType establecido de la columna, el conjunto correcto de operaciones de filtrado se carga dentro del menú desplegable de la interfaz de usuario del filtro. Además, puede configurar las propiedades IgnoreCase y Condition inicial.

    La función de filtrado se habilita para el componente IgcGridComponent configurando la entrada allowFiltering en true. El filterMode predeterminado es QuickFilter y no se puede cambiar en tiempo de ejecución. Para deshabilitar esta función para una determinada columna, establezca la entrada filterable en falso.

    <igc-grid auto-generate="false" allow-filtering="true">
    <igc-column field="ProductName" data-type="string"></igc-column>
    <igc-column field="Price" datdata-typeaType="number"></igc-column>
    <igc-column field="Discontinued" data-type="boolean" filterable="false"></igc-column>
</igc-grid>

    [!Note] If values of type string are used by a column of data type date, the IgcGridComponent won't parse them to date objects and using filtering conditions won't be possible. If you want to use string objects, additional logic should be implemented on the application level, in order to parse the values to date objects.

    Puede filtrar cualquier columna o una combinación de columnas a través de la API IgcGridComponent. El IgcGridComponent expone varios métodos para esta tarea: filter, filterGlobal y clearFilter.

    • filter: filtra una sola columna o una combinación de columnas.

    Hay cinco clases de operandos de filtrado expuestas:

    // Single column filtering

// Filter the `ProductName` column for values which `contains` the `myproduct` substring, ignoring case
this.grid.filter('ProductName', 'myproduct', IgcStringFilteringOperand.instance().condition('contains'), true);

    Los únicos parámetros obligatorios son la clave del campo de la columna y el término de filtrado. Tanto la condición como la distinción entre mayúsculas y minúsculas se deducirán de las propiedades de la columna si no se proporcionan. En el caso de filtrado múltiple, el método acepta una serie de expresiones de filtrado.

    [!Note] The filtering operation DOES NOT change the underlying data source of the IgcGridComponent.

    // Multi column filtering

const gridFilteringExpressionsTree = new IgcFilteringExpressionsTree(FilteringLogic.And);
const productFilteringExpressionsTree = new IgcFilteringExpressionsTree(FilteringLogic.And, 'ProductName');
const productExpression = {
    condition: IgcStringFilteringOperand.instance().condition('contains'),
    fieldName: 'ProductName',
    ignoreCase: true,
    searchVal: 'ch'
};
productFilteringExpressionsTree.filteringOperands.push(productExpression);
gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree);

const priceFilteringExpressionsTree = new IgcFilteringExpressionsTree(FilteringLogic.And, 'Price');
const priceExpression = {
    condition: IgcNumberFilteringOperand.instance().condition('greaterThan'),
    fieldName: 'UnitPrice',
    ignoreCase: true,
    searchVal: 20
};
priceFilteringExpressionsTree.filteringOperands.push(priceExpression);
gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTree);

this.grid.filteringExpressionsTree = gridFilteringExpressionsTree;
    • filterGlobal: borra todos los filtros existentes y aplica la nueva condición de filtrado a todas las columnas de Grid.
    // Filter all cells for a value which contains `myproduct`
this.grid.filteringLogic = FilteringLogic.Or;
this.grid.filterGlobal('myproduct', IgcStringFilteringOperand.instance().condition('contains'), false);
    • clearFilter: elimina cualquier filtrado aplicado a la columna de destino. Si se llama sin argumentos, borrará el filtrado de todas las columnas.
    // Remove the filtering state from the ProductName column
this.grid.clearFilter('ProductName');

// Clears the filtering state from all columns
this.grid.clearFilter();

    Initial filtered state

    Para establecer el estado de filtrado inicial de IgcGridComponent, establezca la propiedad filteringExpressionsTree IgcGridComponent en una matriz de filteringExpressionsTree para cada columna que se va a filtrar.

    constructor() {
    const gridFilteringExpressionsTree = new IgcFilteringExpressionsTree(FilteringLogic.And);
    const productFilteringExpressionsTree = new IgcFilteringExpressionsTree(FilteringLogic.And, 'ProductName');
    const productExpression = {
        condition: IgcStringFilteringOperand.instance().condition('contains'),
        fieldName: 'ProductName',
        ignoreCase: true,
        searchVal: 'c'
    };
    productFilteringExpressionsTree.filteringOperands.push(productExpression);
    gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree);

    this.grid.filteringExpressionsTree = gridFilteringExpressionsTree;
}

    Filtering logic

    La propiedad filteringLogic de IgcGridComponent controla cómo se resolverá el filtrado de varias columnas en IgcGridComponent. Puede cambiarlo en cualquier momento a través de la API IgcGridComponent o mediante la propiedad de entrada IgcGridComponent.

    import { FilteringLogic } from "igniteui-webcomponents-grids/grids";

this.grid.filteringLogic = FilteringLogic.OR;

    El valor predeterminado de AND devuelve solo las filas que coinciden con todas las expresiones de filtrado aplicadas actualmente. Siguiendo el ejemplo anterior, se devolverá una fila cuando el valor de la celda 'NombreProducto' contenga 'miproducto' y el valor de la celda 'Precio' sea mayor que 55.

    Cuando se establece en OR, se devolverá una fila cuando el valor de la celda 'NombreProducto' contenga 'miproducto' o el valor de la celda 'Precio' sea mayor que 55.

    Custom Filtering Operands

    Puede personalizar el menú de filtrado agregando, eliminando o modificando los operandos de filtrado. De forma predeterminada, el menú de filtrado contiene ciertos operandos basados en el tipo de datos de la columna (IgcBooleanFilteringOperand, IgcDateFilteringOperand, IgcNumberFilteringOperand e IgcStringFilteringOperand). Puede ampliar estas clases o su clase base IgcFilteringOperand para cambiar el comportamiento de los elementos del menú de filtrado.

    En el siguiente ejemplo, inspeccione los menús de filtros de las columnas "Nombre del producto" y "Descontinuado". Para el filtro de columna "Descontinuado", hemos limitado el número de operandos a Todos, Verdadero y Falso. Para el filtro de columna “Nombre del producto”, hemos modificado la lógica de operandos Contiene y No contiene para realizar una búsqueda que distinga entre mayúsculas y minúsculas y también agregamos operandos vacíos y no vacíos.

    Para hacerlo, extienda IgcStringFilteringOperand e IgcBooleanFilteringOperand, modifique las operaciones y su lógica y establezca la entrada filters de columna en los nuevos operandos.

    
export class GridCustomFilteringComponent {
    public caseSensitiveFilteringOperand = CaseSensitiveFilteringOperand.instance();
    public booleanFilteringOperand = BooleanFilteringOperand.instance();
}

export class CaseSensitiveFilteringOperand extends IgcStringFilteringOperand {
    private constructor() {
        super();
        const customOperations = [
            {
                iconName: 'contains',
                isUnary: false,
                logic: (target: string, searchVal: string, ignoreCase?: boolean) => {
                    ignoreCase = false;
                    const search = IgcStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
                    target = IgcStringFilteringOperand.applyIgnoreCase(target, ignoreCase);
                    return target.indexOf(search) !== -1;
                },
                name: 'Contains (case sensitive)'
            },
            {
                iconName: 'does_not_contain',
                isUnary: false,
                logic: (target: string, searchVal: string, ignoreCase?: boolean) => {
                    ignoreCase = false;
                    const search = IgcStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
                    target = IgcStringFilteringOperand.applyIgnoreCase(target, ignoreCase);
                    return target.indexOf(search) === -1;
                },
                name: 'Does Not Contain (case sensitive)'
            }
        ];

        const emptyOperators = [
            // 'Empty'
            this.operations[6],
            // 'Not Empty'
            this.operations[7]
        ];

        this.operations = customOperations.concat(emptyOperators);
    }
}

export class BooleanFilteringOperand extends IgcBooleanFilteringOperand {
    private constructor() {
        super();
        this.operations = [
            // 'All'
            this.operations[0],
            // 'TRUE'
            this.operations[1],
            // 'FALSE'
            this.operations[2]
        ];
    }
}

    <!-- grid-custom-filtering.component.html -->

<igc-grid auto-generate="false" allow-filtering="true">
    <igc-column id="ProductName" field="ProductName" header="Product Name" data-type="string"></igc-column>
    <igc-column id="Discontinued" field="Discontinued" header="Discontinued" data-type="boolean"></igc-column>
</igc-grid>

    constructor() {
    var productName = document.getElementById('ProductName') as IgcColumnComponent;
    var discontinued = document.getElementById('Discontinued') as IgcColumnComponent;
    productName.filters = this.caseSensitiveFilteringOperand;
    discontinued.filters = this.booleanFilteringOperand;
}

    Styling

    Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

    <igc-grid class="grid"></igc-grid>

    Luego configure las propiedades CSS relacionadas para esa clase:

    .grid {
    --ig-grid-filtering-row-text-color: #292826;
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-grid-filtering-header-text-color: #292826;
    --ig-grid-filtering-header-background: #ffcd0f;
}

    Demo

    Known Limitations

    [!Note] Some browsers such as Firefox fail to parse regional specific decimal separators by considering them grouping separators, thus resulting in them being invalid. When inputting such values for a numeric column filter value, only the valid part of the number will be applied to the filtering expression. For further information, refer to the Firefox issue.

    API References

    Additional Resources

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