Angular Seleção de células

    O recurso de seleção permite recursos ricos de seleção de dados na Grade de Árvore baseada na Material UI. Uma variedade de eventos e ações de seleção única estão disponíveis graças à API poderosa e aos métodos fáceis de usar. A Grade de Árvore agora suporta três modos para seleção de células, e você pode facilmente alternar entre eles mudandocellSelection a propriedade. Você pode desativar a seleção de células, pode selecionar apenas uma célula dentro da grade ou selecionar várias células na grade, que é oferecida como opção padrão. Mas vamos aprofundar cada uma dessas opções.

    Angular Cell Selection Example

    O exemplo abaixo demonstra os três tipos de comportamento de seleção de células da Grade de Árvore. Use os botões abaixo para ativar cada um dos modos de seleção disponíveis. Uma breve descrição será fornecida em cada interação do botão por meio de uma caixa de mensagem de lanchonete.

    Selection types

    Tree Grid Multiple-cell Selection

    Como selecionar células:

    • ByMouse drag- A seleção retangular dos dados das células seria realizada.
    • AoCtrl key pressionar +Mouse drag- Múltiplas seleções de faixa eram realizadas. Qualquer outra seleção de células existente será mantida.
    • Seleção instantânea de múltiplas células usando a tecla Shift. Selecione uma célula única e selecione outra célula única segurando a tecla Shift. O intervalo de células entre as duas células será selecionado. Lembre-se de que, se outra segunda célula for selecionada enquanto está segurando,Shift key o intervalo de seleção será atualizado com base na posição da célula selecionada (ponto de partida).
    • Seleção multi-célula do teclado usando enquantoArrow keys segura.Shift key A faixa de seleção multi-célula será criada com base na célula focada.
    • Seleção multi-célula do teclado usando eCtrl + Arrow keys​Ctrl + Home/End enquanto se mantém seguradoShift key. A faixa de seleção multi-célula será criada com base na célula focada.
    • Clicar comLeft Mouse key o enquanto segurarCtrl key adicionará intervalos de célula única à coleção de células selecionadas.
    • A seleção contínua de múltiplas células está disponível clicando com o mouse e arrastando.

    Demo

    Tree Grid Single Selection

    Quando você define o[cellSelection]="'single'", isso permite que você tenha apenas uma célula selecionada na grade por vez. Além disso, o modomouse drag não funciona e, em vez de selecionar uma célula, isso faz a seleção padrão de texto.

    Note

    Quando uma célula é selecionadaselected, é emitido um evento, não importa se éselection mode​single oumultiple. No modo de seleção multi-célula, quando você seleciona uma faixa de célulasrangeSelected, é emitido um evento.

    Tree Grid None selection

    Se quiser desativar a seleção de células, pode simplesmente definir[cellSelection]="'none'" a propriedade. Nesse modo, quando você clica sobre a célula ou tenta navegar com o teclado, a célula não é selecionada, apenas aactivation style é aplicada, e ela será perdida quando você rolar ou clicar sobre outro elemento da página. A única forma de definir seleção é usando os métodos de API descritos abaixo.

    Keyboard navigation interactions

    While Shift key is pressed

    • Shift + Arrow Up para adicionar a célula acima à seleção atual.
    • Shift + Arrow Down para adicionar a célula abaixo à seleção atual.
    • Shift + Arrow Left para adicionar a célula esquerda à seleção atual.
    • Shift + Arrow Right para adicionar a célula direita à seleção atual.

    While Ctrl + Shift keys are pressed

    • Ctrl + Shift + Arrow Up para selecionar todas as células acima da célula focalizada na coluna.
    • Ctrl + Shift + Arrow Down para selecionar todas as células abaixo da célula focalizada na coluna.
    • Ctrl​ ​Arrow Left + Shift +para selecionar todas as células até o início da linha.
    • Ctrl + Shift + Arrow Right para selecionar todas as células até o final da linha.
    • Ctrl + Shift + Home para selecionar todas as células, desde a célula em foco até a primeira célula na grade
    • Ctrl + Shift + End para selecionar todas as células, desde a célula em foco até a última célula da grade
    Note

    A rolagem contínua só é possível dentro do corpo do Grid.

    Api usage

    Abaixo estão os métodos que você pode usar para selecionar intervalos, limpar a seleção ou obter dados de células selecionadas.

    Select range

    selectRange(range)- Selecionar um intervalo de células com a API.rowStart erowEnd deve usar índices de linha ecolumnStart ecolumnEnd pode usar índice de coluna ou valor de campo de dados de coluna.

    const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
this.grid1.selectRange(range);
...

const range = { rowStart: 0, rowEnd: 2, columnStart: 'Name', columnEnd: 'ParentID' };
this.grid1.selectRange(range);
    Note

    Selecionar intervalo é uma operação aditiva. Isso não limpará sua seleção anterior.

    Clear cell selection

    clearCellSelection()Vai passar a seleção atual de células.

    Get selected data

    getSelectedData()retornará o array dos dados selecionados no formato dependendo da seleção. Exemplos abaixo:

    1. Se três células individuais diferentes forem selecionadas:

      expectedData = [
    { CompanyName: 'Infragistics' },
    { Name: 'Michael Langdon' },
    { ParentID: 147 }
];

    2. Se três células de uma coluna forem selecionadas:

      expectedData = [
    { Address: 'Obere Str. 57'},
    { Address: 'Avda. de la Constitución 2222'},
    { Address: 'Mataderos 2312'}
];

    3. Se três células forem selecionadas com o arrastar do mouse de uma linha e três colunas:

      expectedData = [
    { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
];

    4. Se três células forem selecionadas com o mouse arrastando de duas linhas e três colunas:

      expectedData = [
    { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
    { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
];

    5. Se dois intervalos diferentes forem selecionados:

      expectedData = [
    { ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
    { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
    { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
    { Address: 'Fauntleroy Circus', City: 'London'}
];

    6. Se dois intervalos sobrepostos forem selecionados, o formato será:

      expectedData = [
    { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
    { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'},
    { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'},
    { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'}
];
    Note

    selectedCells()retornará células de todas as linhas visíveis (linhas na janela de visualização da grade) e de todas as colunas, incluindo as que estão fora de vista.getSelectedData() também retornará os dados da célula selecionada.getSelectedRanges(): GridSelectionRange[] retornará os intervalos atualmente selecionados na grade tanto pelas interações do teclado quanto do ponteiro. O tipo é GridSelectionRange[].

    Features integration

    A seleção de múltiplas células é baseada em índice (seleção de elementos DOM).

    • Sorting- Quando a seleção é realizada, a seleção não será eliminada. Ele deixará as células selecionadas do mesmo modo enquanto ordena ascendente ou descendente.
    • Paging- Ao paginar, células selecionadas serão limpas. A seleção não será mantida entre as páginas.
    • Filtering- Quando a filtragem é realizada, a seleção não será eliminada. Se a filtragem for eliminada, ela retornará - as células selecionadas inicialmente.
    • Resizing- Na coluna que redimensiona células selecionadas não será limpa.
    • Hiding- Não vai limpar as células selecionadas. Se a coluna estiver oculta, as células da próxima coluna visível serão selecionadas.
    • Pinning- A célula selecionada não será limpa. O mesmo que se esconder
    • Group by- Ao agrupar colunas, células selecionadas não serão limpas.

    Estilização

    O mecanismo de tema expõe propriedades que nos permitem estilizar o intervalo de células selecionadas.

    Import theme

    Para começar a estilizar a seleção, precisamos importar oindex arquivo, onde todas as funções de tema e mixins de componentes estão ativos:

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

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

    Define colors

    Uma vez feito, podemos usar ascontrast-color funções ecolor. Com eles, definimos as cores que gostaríamos de usar para nossa linha de seleção:

    $text-color: contrast-color($color: 'primary', $variant: 900);
$background-color: color($color: "primary", $variant: 900);
$border-yellow: #f2c43c;
    Note

    Se não quisermos usar ascontrast-color funções ecolor, sempre podemos codificar os valores de cor fixamente.

    Create custom theme

    Em seguida, criamos um novo tema que estende asgrid-theme variáveis passando nostext-color,background-color eborder-yellow como$cell-selected-text-color,$cell-selected-background respectivamente$cell-active-border-color:

    $custom-grid-theme: grid-theme(
  $cell-selected-text-color: $text-color,
  $cell-active-border-color: $border-yellow,
  $cell-selected-background: $background-color
);

    Apply theme

    Depois, tudo o que precisamos fazer é incluir o mixin no estilo do nosso componente (também pode estar nos estilos do aplicativo), para que nosso igx-tree-grid use o tema recém-criado em vez do padrão:

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

    Com o tema personalizado aplicado, as células de grade selecionadas são destacadas com nossas cores selecionadas:

    Demo

    Note

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

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.