Filtragem de grade Angular

    O componente IgniteUI para Angular Grid fornece três tipos diferentes de filtragem - Filtragem rápida, filtragem de estilo Excel e filtragem avançada, que permitem exibir apenas os registros que atendem aos critérios especificados. O componente de grade da interface do usuário do material no Ignite UI fornece recursos de filtro angular e API de filtragem extensiva por meio do contêiner de dados ao qual a grade está vinculada.

    Angular Grid Filtering Example

    O exemplo abaixo demonstra a experiência do usuário de filtragem rápida do Grid. O método filter() da API é usado para aplicar a condição contains na coluna ProductName por meio do componente igxInputGroup externo.

    Setup

    Para especificar se a filtragem está habilitada e qual modo de filtragem deve ser usado, a Grade expõe as seguintes propriedades booleanas -allowFiltering, allowAdvancedFiltering, filterMode e filterable.

    A propriedade allowFiltering permite que você especifique as seguintes opções:

    • false- a filtragem para a grade correspondente será desativada; /valor padrão/
    • true- a filtragem para a grade correspondente será habilitada;

    A propriedade allowAdvancedFiltering permite que você especifique as seguintes opções:

    • false- a filtragem avançada para a grade correspondente será desativada; /valor padrão/
    • true- a filtragem avançada para a grade correspondente será habilitada;

    ​A propriedade filterMode permite que você especifique as seguintes opções:

    • quickFilter- uma interface de usuário de filtragem simplista; /valor padrão/
    • excelStyleFilter- uma interface de usuário de filtragem semelhante ao Excel;

    A propriedade filtrável permite que você especifique as seguintes opções:

    • true- a filtragem para a coluna correspondente será habilitada; /valor padrão/
    • false- a filtragem da coluna correspondente será desativada;
    <igx-grid #grid1 [data]="data" [autoGenerate]="false" [allowFiltering]="true">
    <igx-column field="ProductName"></igx-column>
    <igx-column field="Price" [dataType]="'number'" [filterable]="false">
</igx-grid>

    No entanto, para habilitar a filtragem avançada, você precisa definir as allowAdvancedFiltering propriedades de entrada como true.

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

    Você pode habilitar as quickFilter interfaces excelStyleFilter de usuário de filtragem avançada na Grade. Ambas as interfaces de usuário de filtragem funcionarão independentemente uma da outra. O resultado final filtrado na Grade é a interseção entre os resultados dos dois filtros.

    Interaction

    Para abrir a linha de filtro para uma coluna específica, o chip 'Filtro' abaixo de seu cabeçalho deve ser clicado. Para adicionar condições, você deve escolher o operando de filtro usando o menu suspenso à esquerda da entrada e inserir o valor. date As colunas 'number Igual a' são selecionadas por padrão, para string- 'Contém' e para boolean- 'Todos'. Pressionar 'Enter' confirma a condição e agora você pode adicionar outra. Há uma lista suspensa, entre os chips de 'condição', que determina o operador lógico entre eles, 'AND' é selecionado por padrão. Para remover uma condição, você pode clicar no botão 'X' do chip e, para editá-lo, selecione o chip e a entrada será preenchida com os dados do chip. Enquanto a linha de filtro está aberta, você pode clicar no cabeçalho de qualquer coluna filtrável para selecioná-la e adicionar condições de filtro para ela.

    Embora algumas condições de filtragem tenham sido aplicadas a uma coluna e a linha de filtro esteja fechada, você pode remover as condições clicando no botão fechar do chip ou pode abrir a linha de filtro selecionando qualquer um dos chips. Quando não há espaço suficiente para mostrar todas as condições, um ícone de filtro é mostrado com um emblema que indica quantas condições a mais existem. Ele também pode ser clicado para abrir a linha de filtro.

    Usage

    Há uma estratégia de filtragem padrão fornecida pronta para uso, bem como todas as condições de filtragem padrão, que o desenvolvedor pode substituir por sua própria implementação. Além disso, fornecemos uma maneira de conectar facilmente suas próprias condições de filtragem personalizadas. Atualmente, o Grid fornece não apenas uma interface de usuário de filtragem simplista, mas também opções de filtragem mais complexas. Dependendo do conjunto dataType da coluna, o conjunto correto de operações de filtragem é carregado dentro da lista suspensa da interface do usuário do filtro. Além disso, você pode definir as ignoreCase propriedades e as propriedades iniciais condition.

    O recurso de filtragem é ativado para o componente Grid definindo a allowFiltering entrada como true. O padrão filterMode é quickFilter e não pode ser alterado o tempo de execução. Para desativar esse recurso para uma determinada coluna – defina a filterable entrada para false.

    <igx-grid [data]="data" [autoGenerate]="false" [allowFiltering]="true">
    <igx-column field="ProductName"></igx-column>
    <igx-column field="Price" dataType="number"></igx-column>
    <igx-column field="Discontinued" [dataType]="'boolean'" [filterable]="false">
</igx-grid>
    Note

    Se os valores do tipo string forem usados por uma coluna de dataType Date, o Grid não os analisará em Date objetos e o uso de condições de filtragem não será possível. Se você quiser usar string objetos, a lógica adicional deve ser implementada no nível do aplicativo, a fim de analisar os valores dos Date objetos.

    Você pode filtrar qualquer coluna ou uma combinação de colunas por meio da API de Grade. O Grid expõe vários métodos para essa tarefa -filter, filterGlobal e clearFilter.

    • filter- Filtre uma única coluna ou uma combinação de colunas.

    Há cinco classes de operando de filtragem expostas:

    // Single column filtering

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

    Os únicos parâmetros necessários são a chave do campo de coluna e o termo de filtragem. A condição e a diferenciação de maiúsculas e minúsculas serão inferidas das propriedades da coluna, se não forem fornecidas. No caso de filtragem múltipla, o método aceita uma matriz de expressões de filtragem.

    Note

    A operação de filtragem NÃO altera a fonte de dados subjacente da Grid.

    // Multi column filtering

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

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

this.grid.filteringExpressionsTree = gridFilteringExpressionsTree;
    • filterGlobal- limpa todos os filtros existentes e aplica a nova condição de filtragem a todas as colunas do Grid.
    // Filter all cells for a value which contains `myproduct`
this.grid.filteringLogic = FilteringLogic.Or;
this.grid.filterGlobal('myproduct', IgxStringFilteringOperand.instance().condition('contains'), false);
    • clearFilter- Remove qualquer filtragem aplicada da coluna de destino. Se chamado sem argumentos, ele limpará a filtragem de todas as colunas.
    // 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 definir o estado de filtragem inicial da grade, defina o IgxGridComponent filteringExpressionsTree a uma matriz de IFilteringExpressionsTree para cada coluna a ser filtrada.

    constructor(private cdr: ChangeDetectorRef) { }

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

    this.grid.filteringExpressionsTree = gridFilteringExpressionsTree;
    this.cdr.detectChanges();
}

    Filtering logic

    A filteringLogic propriedade do Grid controla como a filtragem de várias colunas será resolvida no Grid. Você pode alterá-lo a qualquer momento por meio da API de Grade ou por meio da propriedade de entrada Grid.

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

this.grid.filteringLogic = FilteringLogic.OR;

    O valor padrão de AND retorna apenas as linhas que correspondem a todas as expressões de filtragem aplicadas no momento. Seguindo o exemplo acima, uma linha será retornada quando o valor da célula "ProductName" contiver "myproduct" e o valor da célula "Price" for maior que 55.

    Quando definido como OR, uma linha será retornada quando o valor da célula 'ProductName' contiver 'myproduct' ou o valor da célula 'Price' for maior que 55.

    Remote Filtering

    O Grid dá suporte à filtragem remota, o que é demonstrado no Grid Remote Data Operations tópico.

    Custom Filtering Operands

    Você pode personalizar o menu de filtragem adicionando, removendo ou modificando os operandos de filtragem. Por padrão, o menu de filtragem contém determinados operandos com base no tipo de dados da coluna (IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxNumberFilteringOperand and IgxStringFilteringOperand). Você pode estender essas classes ou sua classe IgxFilteringOperand base para alterar o comportamento dos itens de menu de filtragem.

    No exemplo abaixo, inspecione os menus de filtros das colunas "Nome do produto" e "Descontinuado". Para o filtro de coluna "Descontinuado", limitamos o número de operandos a Todos, Verdadeiro e Falso. Para o filtro de coluna "Nome do produto" – modificamos a lógica dos operandos Contains e Does Not Contain para executar a pesquisa com distinção entre maiúsculas e minúsculas e adicionamos também os operandos Empty e Not Empty.

    Para fazer isso, estenda o IgxStringFilteringOperand e IgxBooleanFilteringOperand, modifique as operações e sua lógica e defina a entrada da coluna filters para os novos operandos.

    // grid-custom-filtering.component.ts

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

export class CaseSensitiveFilteringOperand extends IgxStringFilteringOperand {
    private constructor() {
        super();
        const customOperations = [
            {
                iconName: 'contains',
                isUnary: false,
                logic: (target: string, searchVal: string, ignoreCase?: boolean) => {
                    ignoreCase = false;
                    const search = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
                    target = IgxStringFilteringOperand.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 = IgxStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
                    target = IgxStringFilteringOperand.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 IgxBooleanFilteringOperand {
    private constructor() {
        super();
        this.operations = [
            // 'All'
            this.operations[0],
            // 'TRUE'
            this.operations[1],
            // 'FALSE'
            this.operations[2]
        ];
    }
}

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

<igx-grid [data]="data" [autoGenerate]="false" [allowFiltering]="true">
    <igx-column field="ProductName" header="Product Name" [filters]="caseSensitiveFilteringOperand"></igx-column>
    <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [filters]="booleanFilteringOperand">
        <ng-template igxCell let-cell="cell" let-val>
            <img *ngIf="val" src="assets/images/grid/active.png" title="Delivered" alt="Delivered" />
            <img *ngIf="!val" src="assets/images/grid/expired.png" title="Undelivered" alt="Undelivered" />
        </ng-template>
    </igx-column>
</igx-grid>

    Re-templating filter cell

    Você pode adicionar um modelo marcado com igxFilterCellTemplate para reformular a célula de filtro. No exemplo abaixo, uma entrada é adicionada para as colunas de cadeia de caracteres e IgxDatePicker para a coluna de data. Quando o usuário digita ou seleciona um valor, um filtro com o operador contains para colunas de cadeia de caracteres e o operador equals para colunas de data é aplicado usando a API pública da grade.

    Estilização

    Para começar a estilizar a linha de filtragem, precisamos importar o index arquivo, onde todas as funções do tema e mixins de componentes residem:

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

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

    Seguindo a abordagem mais simples, criamos um novo tema que estende o grid-theme e aceita os $filtering-row-text-color parâmetros, $filtering-row-background, $filtering-header-text-color e . $filtering-header-background​

    $custom-grid: grid-theme(
  $filtering-row-text-color: #292826,
  $filtering-row-background: #ffcd0f,
  $filtering-header-text-color: #292826,
  $filtering-header-background: #ffcd0f
);

    Como visto, o controla grid-theme apenas as cores da linha de filtragem e do respectivo cabeçalho de coluna que está sendo filtrado. Obviamente, temos muito mais componentes dentro da linha de filtragem, como um grupo de entrada, chips, botões e outros. Para estilizá-los, precisamos criar um tema separado para cada um, então vamos criar um novo input-group-theme e um novo button-theme:

    $dark-input-group: input-group-theme(
  $box-background: #ffcd0f,
  $idle-text-color: #292826,
  $focused-text-color: #292826,
  $filled-text-color: #292826
);

$dark-button: button-theme(
  $flat-background: #ffcd0f,
  $flat-text-color: #292826,
  $flat-hover-background: #292826,
  $flat-hover-text-color: #ffcd0f
);
    Note

    Em vez de codificar os valores de cor como acabamos de fazer, podemos obter maior flexibilidade em termos de cores usando as palette funções e color. Consulte o Palettes tópico para obter orientações detalhadas sobre como usá-los.

    Neste exemplo, alteramos apenas alguns dos parâmetros para o grupo de entrada e o botão, mas o input-group-theme e o button-theme fornecem muito mais parâmetros para controlar seus respectivos estilos.

    O último passo é incluir os mixins de componentes, cada um com seu respectivo tema. Também definiremos a propriedade color para o espaço reservado da entrada.

    @include css-vars($custom-grid);

.igx-grid__filtering-row {
  @include css-vars($dark-button);
  @include css-vars($dark-input-group);  

  .igx-input-group__input::placeholder {
    color: #ffcd0f;
  }
}
    Note

    Incluímos o button-theme e o input-group-theme​.igx-grid__filtering-row criados, para que apenas os botões de linha de filtragem e seu grupo de entrada sejam estilizados. Caso contrário, outros botões e grupos de entrada na grade também seriam afetados.

    Note

    Se o componente estiver usando um Emulated ViewEncapsulation, é necessário penetrate neste encapsulamento usando::ng-deep:

    :host {
  ::ng-deep {
    @include css-vars($custom-grid);

    .igx-grid__filtering-row {
      @include css-vars($dark-button);
      @include css-vars($dark-input-group)

      .igx-input-group__input::placeholder {
        color: #ffcd0f;
      }
    }
  }
}

    Demo

    Note

    A amostra não será afetada Change Theme pelo tema global selecionado.

    Known Limitations

    Note

    Alguns navegadores, como o Firefox, não conseguem analisar separadores decimais específicos da região, considerando-os separadores de agrupamento, resultando em inválidos. Ao inserir esses valores para um valor de filtro de coluna numérica, somente a parte válida do número será aplicada à expressão de filtragem. Para obter mais informações, consulte o problema do Firefox.

    Breaking Changes in 6.1.0

    • A propriedade IgxGrid filteringExpressions foi removida. Use filteringExpressionsTree em vez disso.
    • filter_multiple é removido. Em vez disso, use filter method e filteringExpressionsTree property.
    • O filter método tem nova assinatura. Ele agora aceita os seguintes parâmetros:
      • name- o nome da coluna a ser filtrada.
      • value- o valor a ser usado para filtragem.
      • conditionOrExpressionTree (opcional) - este parâmetro aceita objeto do tipo IFilteringOperation or IFilteringExpressionsTree. Se apenas a filtragem simples for necessária, uma operação de filtragem poderá ser passada como um argumento. No caso de filtragem avançada, uma árvore de expressões contendo lógica de filtragem complexa pode ser passada como um argumento.
      • ignoreCase (opcional) - se a filtragem diferencia maiúsculas de minúsculas ou não.
    • filteringDone agora têm apenas um parâmetro do tipo IFilteringExpressionsTree que contém o estado de filtragem da coluna filtrada.
    • A propriedade Filtering operands: IFilteringExpression condition não é mais uma referência direta a um método de condição de filtragem, em vez disso, é uma referência a um IFilteringOperation.
    • IgxColumnComponent agora expõe uma filters propriedade, que usa uma referência de IgxFilteringOperand classe.
    • Filtros personalizados podem ser fornecidos para as colunas Grid preenchendo a operations​ ​IgxFilteringOperand propriedade do tipo with operations IFilteringOperation.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.