Angular Seleção de grade

Com Ignite UI for Angular Grid, você pode selecionar dados facilmente usando uma variedade de eventos, API avançada ou com interações simples do mouse, como seleção única.

Angular Grid Selection Example

O exemplo abaixo demonstra os três tipos de comportamento de seleção de células do Grid. 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.

Angular Grid Selection Options

O IgniteUI para Angular componente Grid oferece três modos diferentes de seleção -seleção de linha, seleção de células e seleção de colunas. Por padrão, apenas o modo de seleção Multi-célula está ativado na Grade. Para alterar/ativar o modo de seleção você pode usarrowSelection propriedadescellSelection ouselectable propriedades.

Angular Row Selection

PropriedaderowSelection permite que você especifique as seguintes opções:

none - A seleção de linha seria desabilitada para a grade
single - A seleção de apenas uma linha dentro da grade estaria disponível
múltiplos - A seleção multi-linha estaria disponível usando oRow selectors, com uma combinação de teclas como ctrl + click, ou pressionando o space key quando uma célula está focada

Vá para o tópico Seleção de linha para obter mais informações.

Angular Cell Selection

PropriedadecellSelection permite que você especifique as seguintes opções:

none - A seleção de célula seria desabilitada para a Grade
single - A seleção de apenas uma célula dentro da grade estaria disponível.
multiple - Atualmente, esse é o estado padrão da seleção na Grade. A seleção de várias células está disponível arrastando o mouse sobre as células, após um clique do botão esquerdo do mouse continuamente.

Vá para o tópico Seleção de célula para obter mais informações.

Angular Column Selection

Aselectable propriedade permite que você especifique as seguintes opções para cada coluna:

false - a seleção de coluna correspondente será desativada para a Grade
true - a seleção de coluna correspondente será habilitada para a Grade
Isso levou às três variações a seguir:
Seleção única -mouse click sobre a célula da coluna.
Seleção de várias colunas - segurando ctrl + mouse click sobre as células da coluna.
Seleção de coluna de intervalo - segurando shift + mouse click seleciona tudo no meio.

Acesse o tópico Seleção de coluna para obter mais informações.

Usando ocontextMenu evento, você pode adicionar um menu de contexto personalizado para facilitar seu trabalho com o IgxGrid. Com um clique direito no corpo da grade, o evento emite a célula em que é acionado. O menu de contexto funcionará com a célula emitida.

Se houver uma seleção de várias células, colocaremos lógica, que verificará se a célula selecionada está na área da seleção de várias células. Se for, também emitiremos os valores das células selecionadas.

Basicamente, a função principal ficará assim:

public rightClick(eventArgs: any) {
     // Prevent the default behavior of the right click
    eventArgs.event.preventDefault();
    this.multiCellArgs = {};
    // If we have multi-cell selection, check if selected cell is within the ranges
    if (this.multiCellSelection) {
        const node = eventArgs.cell.selectionNode;
        const isCellWithinRange = this.grid1.getSelectedRanges().some(range => {
            if (node.column >= range.columnStart &&
                node.column <= range.columnEnd &&
                node.row >= range.rowStart &&
                node.row <= range.rowEnd) {
                return true;
            }
            return false;
        })
        // If the cell is within a multi-cell selection range, bind all the selected cells data
        if (isCellWithinRange) {
            this.multiCellArgs = { data: this.multiCellSelection.data };
        }
    }
    // Set the position of the context menu
    this.contextmenuX = eventArgs.event.clientX;
    this.contextmenuY = eventArgs.event.clientY;
    this.clickedCell = eventArgs.cell;
    // Enable the context menu
    this.contextmenu = true;
}

O menu de contexto terá as seguintes funções:

Copie o valor da célula selecionada
Copie o dataRow da célula selecionada
Se a célula selecionada estiver dentro de um intervalo de seleção de várias células, copie todos os dados selecionados

//contextmenu.component.ts

public copySelectedCellData(event) {
    const selectedData = { [this.cell.column.field]: this.cell.value };
    this.copyData(JSON.stringify({ [this.cell.column.field]: this.cell.value }));
    this.onCellValueCopy.emit({ data: selectedData });
}

public copyRowData(event) {
    const selectedData = this.cell.row.data ;
    this.copyData(JSON.stringify(this.cell.row.data));
    this.onCellValueCopy.emit({ data: selectedData });
}

public copySelectedCells(event) {
    const selectedData = this.selectedCells.data;
    this.copyData(JSON.stringify(selectedData));
    this.onCellValueCopy.emit({ data: selectedData });
}

O IgxGrid buscará os dados copiados e os colará em um elemento de contêiner.

O modelo que vamos usar para combinar a grade com o menu de contexto:

<div class="wrapper">
    <div class="grid__wrapper" (window:click)="disableContextMenu()">
        <igx-grid #grid1 [data]="data" [autoGenerate]="false" height="500px" width="100%"
            (contextMenu)="rightClick($event)" (rangeSelected)="getCells($event)"
            (selected)="cellSelection($event)">
        <!-- Columns area -->
        </igx-grid>
        <div *ngIf="contextmenu==true">
            <contextmenu [x]="contextmenuX" [y]="contextmenuY" [cell]="clickedCell" [selectedCells]="multiCellArgs" (onCellValueCopy)="copy($event)">
            </contextmenu>
        </div>
    </div>
    <div class="selected-data-area">
        <div>
           <pre>{{copiedData}}</pre>
        </div>
    </div>
</div>

Selecione várias células e pressione oright mouse botão. O menu de contexto aparecerá e, após selecionarCopy cells data os dados selecionados, aparecerá na caixa vazia à direita. O resultado é:

Known Issues and Limitations

O uso da Grade com Seleção habilitada no IE11 requer a importação explícita do polyfill da matriz em polyfill.ts do aplicativo angular. O IE11 não é mais suportado a partir da versão 13.0.0.
```
import 'core-js/es7/array';
```
Quando a grade nãoprimaryKey tem um set definido e cenários de dados remotos são ativados (ao paginar, ordenar, filtrar, rolar requisições de gatilho para um servidor remoto para recuperar os dados a serem exibidos na grade), uma linha perderá o seguinte estado após a conclusão de uma solicitação de dados:
- Seleção de linha
- Expandir/recolher linha
- Edição de linha
- Fixação de linha

API References

Additional Resources

Agregações baseadas em seleção

Nossa comunidade é ativa e sempre acolhedora para novas ideias.