Angular Grid Selection-Based Data Aggregation

    Com o exemplo, ilustrado a seguir, você pode ver como a seleção múltipla está sendo usada, juntamente com funções de resumo personalizadas, para exibir agregações com base nos valores selecionados no rodapé da grade.

    Topic Overview

    Para obter a funcionalidade de agregações baseadas em seleção, você pode usar nosso Grid Selection recurso, juntamente com o Grid Summaries.
    Os Resumos permitem a personalização da funcionalidade básica do recurso Resumo por meio da extensão de uma das classes base, IgxSummaryOperand,ou IgxNumberSummaryOperand​ ​IgxDateSummaryOperand, dependendo do tipo de dados da coluna e de suas necessidades.

    Escolha

    Para começar a trabalhar com os dados no intervalo de grade selecionado, você terá que se inscrever em eventos que estão notificando alterações na seleção de grade. Isso pode ser feito inscrevendo-se no selected evento e no rangeSelected evento. Você precisa vincular a ambos porque o recurso Seleção diferencia entre selecionar uma única célula e selecionar um intervalo de células.

    Na lógica de assinatura de eventos, você pode extrair os dados selecionados usando a função da getSelectedData grade e passar os dados selecionados para o operando de resumo personalizado.

    Summary

    Dentro da classe de resumo personalizada, você teria que diferenciar os tipos de dados na grade. Por exemplo, no cenário abaixo, há quatro colunas diferentes, cujo tipo de dados é adequado para resumos personalizados. Estes são o Preço Unitário, as Unidades em Estoque, o status Descontinuado e a Data do Pedido.
    O operate método da classe derivada do, é onde você processará os dados, começando por encapsulá-los em diferentes categorias com base nos tipos de IgxSummaryOperand dados:

    const numberData = data.filter(rec => typeof rec === "number");
const boolData = data.filter(rec => typeof rec === "boolean");
const dates = data.filter(rec => isDate(rec));
    Note

    Bear in mind, that isDate is a custom function.

    Depois de agrupar os tipos de dados de acordo, você pode prosseguir para a agregação em si. Por esse motivo, você pode usar os métodos já expostos do IgxNumberSummaryOperand e IgxDateSummaryOperand. Depois disso, você teria que colocar os dados agregados na mesma matriz, que seriam retornados ao modelo.
    Para a visualização dos dados, você pode querer usar o <igx-grid-footer>, que em uma combinação com a custom-summaries classe dará a aparência natural do Resumo.

    Demo

    Altere a seleção para ver resumos do intervalo selecionado no momento.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.