Angular Tree Grid Sorting

    No Ignite UI for Angular Tree Grid, a classificação de dados é habilitada em um nível por coluna, o que significa que o igx-tree-grid pode ter uma combinação 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 Tree Grid Sorting Overview Example

    Além disso, há um menu de contexto personalizado adicionado para classificação usando igx-árvore-grade 's contextMenu Saída.

    Isso é feito por meio da sortable entrada. Com a classificação em Grade de Árvore, você também pode definir a propriedade para executar a sortingIgnoreCase classificação que diferencia maiúsculas de minúsculas:

    <igx-column field="Name" header="Order Product" [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 IgxTreeGrid 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 Tree Grid usando o método Tree 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.treeGrid.sort({ fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true });

// Perform sorting on both the ProductName and Price columns.
this.treeGrid.sort([
    { fieldName: 'Name', dir: SortingDirection.Asc, ignoreCase: true },
    { fieldName: 'UnitPrice', 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.treeGrid.clearSort('Name');

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

    O sortStrategy da Grade de Árvore é 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 Grade de Árvore.

    Initial sorting state

    É possível definir o estado de classificação inicial da Grade de Árvore passando uma matriz de expressões de classificação para a sortingExpressions propriedade da Grade de Árvore.

    public ngAfterViewInit(): void {
    this.treeGrid.sortingExpressions = [
        { 
            dir: SortingDirection.Asc, fieldName: 'UnitPrice',
            ignoreCase: true, strategy: DefaultSortingStrategy.instance() 
        }
    ];
}
    Note

    Se os valores do tipo string forem usados por uma coluna de dataType Date, a Grade de Árvore não os analisará em Date objetos e o uso da Grade de Árvore 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.

    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.