Angular Classificação em grade

    No Ignite UI for Angular Grid, a classificação de dados é habilitada em um nível por coluna, o que significa que o igx-grid pode ter uma mistura de colunas classificáveis e não classificáveis. A execução de ações de classificação angular permite alterar a ordem de exibição dos registros com base em critérios especificados.

    Note

    Até agora, o agrupamento/classificação funcionava em conjunto. Na versão 13.2, é introduzido um novo comportamento que separa o agrupamento da classificação. Por exemplo - limpar o agrupamento não limpará as expressões de classificação na grade ou vice-versa. Ainda assim, se uma coluna for classificada e agrupada, as expressões agrupadas terão precedência.

    Angular Grid Sorting Overview Example

    Isso é feito por meio da sortable entrada. Com a classificação em grade, você também pode definir a propriedade para executar a sortingIgnoreCase classificação com distinção entre maiúsculas e minúsculas:

    <igx-column field="ProductName" header="Product Name" [dataType]="'string'" sortable="true"></igx-column>

    Sorting Indicators

    Ter uma certa quantidade de colunas classificadas pode ser realmente confuso se não houver indicação da ordem classificada.

    O IgxGrid fornece uma solução para esse problema, indicando o índice de cada coluna classificada.

    Sorting through the API

    Você pode classificar qualquer coluna ou uma combinação de colunas por meio da API Grid usando o método Grid sort:

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

// Perform a case insensitive ascending sort on the ProductName column.
this.grid.sort({ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true });

// Perform sorting on both the ProductName and Price columns.
this.grid.sort([
    { fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
    { fieldName: 'Price', dir: SortingDirection.Desc }
]);
    Note

    A classificação é realizada usando nosso DefaultSortingStrategy algoritmo. Qualquer IgxColumnComponent ou ISortingExpression pode usar uma implementação personalizada do ISortingStrategy como um algoritmo substituto. Isso é útil quando a classificação personalizada precisa ser definida para colunas de modelo complexas ou colunas de imagem, por exemplo.

    Assim como acontece com o comportamento de filtragem, você pode limpar o estado de classificação usando o clearSort método:

    // Removes the sorting state from the ProductName column
this.grid.clearSort('ProductName');

// Removes the sorting state from every column in the Grid
this.grid.clearSort();
    Note

    O sortStrategy da Grid é de tipo diferente em comparação com o sortStrategy da coluna, pois eles trabalham em escopos diferentes e expõem parâmetros diferentes.

    Note

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

    Initial sorting state

    É possível definir o estado de classificação inicial do Grid passando uma matriz de expressões de classificação para a sortingExpressions propriedade do Grid.

    public ngAfterViewInit(): void {
    this.grid.sortingExpressions = [
        {
            dir: SortingDirection.Asc, fieldName: 'CategoryName',
            ignoreCase: true, strategy: DefaultSortingStrategy.instance()
        }
    ];
}
    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 do Grid sorting não funcionará conforme o esperado. Se você quiser usar string objetos, a lógica adicional deve ser implementada em um nível de aplicativo, a fim de analisar os valores dos Date objetos.

    Remote Sorting

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

    Sorting Indicators Templates

    O ícone do indicador de classificação no cabeçalho da coluna pode ser personalizado usando um modelo. As seguintes diretivas estão disponíveis para modelar o indicador de classificação para qualquer estado de classificação (crescente, decrescente, nenhum):

    • IgxSortHeaderIconDirective– reconfigura o ícone de classificação quando nenhuma classificação é aplicada.
    <ng-template igxSortHeaderIcon>
    <igx-icon>unfold_more</igx-icon>
</ng-template>
    • IgxSortAscendingHeaderIconDirective– reconfigura o ícone de classificação quando a coluna é classificada em ordem crescente.
    <ng-template igxSortAscendingHeaderIcon>
    <igx-icon>expand_less</igx-icon>
</ng-template>
    • IgxSortDescendningHeaderIconDirective– Remodela o ícone de classificação quando a coluna é classificada em ordem decrescente.
    <ng-template igxSortDescendingHeaderIcon>
    <igx-icon>expand_more</igx-icon>
</ng-template>

    Estilização

    Para começar a estilizar o comportamento de classificação, 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 os grid-theme parâmetros e aceita os $sorted-header-icon-color​ ​sortable-header-icon-hover-color e.

    $custom-theme: grid-theme(
  $sorted-header-icon-color: #ffb06a,
  $sortable-header-icon-hover-color: black
);
    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.

    A última etapa é incluir os mixins de componentes:

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

    Demo

    Note

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

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.