Quais são os 4 principais recursos de manipulação de dados do Angular Grid?
Um dos principais objetivos de qualquer componente de Grid é trabalhar com dados. Mas quais são os principais recursos Angular de manipulação de dados em grade que você deve usar? Aprenda aqui.
Zdravko Kolev
6min de leitura
Um dos principais objetivos de qualquer componente Grid é trabalhar com dados. Isso significa não apenas transformá-lo e apresentá-lo de uma maneira mais digerível, mas também fornecer os meios para atualizá-lo com facilidade. No entanto, manter um banco de dados dá muito trabalho. Exceto quando você usa as ferramentas certas. Nesse caso, você pode executar facilmente operações de gerenciamento de dados, como Atualizar, Excluir e Criar novos registros de dados. Mas isso pode nem sempre ser suficiente. Por quê? Porque ter um mecanismo de validação de dados também é uma funcionalidade obrigatória.
Uma rápida espiada no grid Ignite UI Angular
Ignite UI for Angular Grid oferece uma API pública poderosa que permite personalizar a maneira como essas operações são executadas. Além disso, cada recurso de gerenciamento de dados expõe vários editores padrão com base no tipo de dados da coluna que pode ser facilmente personalizado.
Agora, direto ao ponto: os 4 principais recursos de manipulação de dados
Edição de célula/linha em Angular grade
Por padrão, o Grid usa edição na célula e diferentes editores serão mostrados com base no tipo de dados da coluna, graças ao modelo de edição de célula padrão. Além disso, você pode definir seus próprios modelos personalizados para ações de atualização de dados e substituir o comportamento padrão para confirmar e descartar quaisquer alterações.
Para habilitar a edição padrão, basta definir a entrada [editável] como true para as colunas que deseja editar.
Você pode alterar facilmente o modo de edição para Linha com a entrada [rowEditable] no igxGrid. Alterar o valor de uma célula e, em seguida, clicar ou navegar para outra célula na mesma linha não atualizará o valor da linha até que seja confirmado usando o botão Concluído ou descartado usando o botão Cancelar.
Mais desses recursos:
- A grade expõe uma ampla variedade de eventos que fornecem maior controle sobre a experiência de edição. Esses eventos são disparados durante o ciclo de vida de edição de linha e edição de célula– ao iniciar, confirmar ou cancelar a ação de edição.
- Modelos de edição – Se você quiser usar modelos de edição específicos do tipo de dados, especifique a propriedade da coluna
dataType. Então, vamos agora ver quais são os modelos padrão para cada tipo
Angular Edição em lote de grade com transações
O recurso de edição em lote do IgxGrid é baseado em um serviço de transações. Graças à estrutura Angular, a criação de tal serviço de transação é fácil e sustentável. O Transaction Service é um middleware injetável (por meio do DI do Angular) que um componente pode usar para acumular alterações sem afetar imediatamente os dados subjacentes.
Você pode aproveitar o Serviço de Transações ao usar qualquer componente que precise preservar o estado de sua fonte de dados e confirmar muitas transações de uma só vez.
O Serviço de Transação permite adicionar transações. Depois de adicionar pelo menos uma transação, você pode confirmar ou limpar todas as alterações ou as alterações de um único registro. Ele mantém um registro detalhado e pode executar operações de desfazer e refazer.
Toda vez que você executa uma operação (transação), ela é adicionada ao log de transações e à pilha de desfazer. Todas as alterações no log de transações são acumuladas por registro. A partir desse ponto, o serviço mantém um estado agregado que consiste apenas em operações de adição/atualização/exclusão de registros exclusivos.
Angular Mecanismos de validação de dados de grade
A edição de grade expõe um mecanismo de validação integrado da entrada do usuário ao editar células/linhas. Ele estende a funcionalidade de validação do Angular Form para permitir uma integração mais fácil com uma funcionalidade bem conhecida. Quando o estado do editor é alterado, os indicadores visuais são aplicados à célula editada.
Estendemos algumas das diretivas do validador do Angular Forms para trabalhar diretamente com o IgxColumn. Os mesmos validadores estão disponíveis como atributos a serem definidos declarativamente em igx-column. Os seguintes validadores são suportados imediatamente:
- obrigatório
- mínimo
- máx.
- comprimento mínimo
- comprimento máximo
- padrão
Para validar que uma entrada de coluna será definida e o valor será formatado como um e-mail, você pode usar as diretivas relacionadas:
<igx-column [field]="email" [header]="User E-mail" required email><
O exemplo a seguir demonstra como usar as diretivas pré-criadas required, email e min validator em uma Grid.
Angular Adição de linha de grade
O Grid fornece uma maneira conveniente de realizar manipulações de dados por meio da adição de linha embutida e uma API poderosa para operações CRUD Angular. Adicione um componente Faixa de ação com ações de edição ativadas no modelo da grade, passe o mouse sobre uma linha e use o botão fornecido. Ou pressione "ALT" + "+" para gerar a linha adicionando a interface do usuário.
O exemplo a seguir demonstra como habilitar a adição de linha nativa na Grade. Alterar um valor de célula e, em seguida, clicar ou navegar para outra célula na mesma linha não atualiza o valor da linha até que seja confirmado usando o botão Concluído ou descartado usando o botão Cancelar.
Embrulhar
O componente Grid no Ignite UI for Angular (e em geral) desempenha um papel crucial no gerenciamento de dados porque:
- Permite a visualização eficiente de grandes conjuntos de dados.
- Oferece classificação, filtragem e outros recursos integrados.
- Fornece uma variedade de recursos de manipulação de dados para que você possa modificar os dados diretamente com eficiência.
- Ajuda a garantir atualizações em tempo real para o conjunto de dados subjacente e assim por diante.
Embora o gerenciamento de um banco de dados possa ser desafiador, a utilização de ferramentas ricas em recursos apropriadas (como Ignite UI Angular Components) pode simplificar significativamente o processo. Dessa forma, você pode executar quase sem esforço operações críticas de gerenciamento de dados, como edição, exclusão e criação de novos registros de dados, além de implementar um mecanismo de validação de dados em sua grade Angular.
Se precisar de mais detalhes, recomendamos que você confira nosso:
Para experimentar tudo, visite o portal do cliente e obtenha a versão mais recente. Como de costume, estamos sempre ansiosos para receber seus comentários e ouvir o que você deseja adicionar ou recomendar. Então, por favor, envie-me um e-mail para zkolev@infragistics.com e deixe-me saber como podemos ajudá-lo a continuar entregando valor aos seus clientes com Infragistics.
