Web Components Seleção de linha de grade de árvore

    O recurso Ignite UI for Web Components Seleção de Linha em Web Components Grade de Árvore permite que os usuários selecionem, realcem ou desmarquem interativamente uma ou várias linhas de dados. Existem vários modos de seleção disponíveis no IgcTreeGridComponent:

    • Nenhuma seleção
    • Seleção múltipla
    • Seleção única

    Web Components Row Selection Example

    A amostra abaixo demonstra os quatro tipos de IgcTreeGridComponent 's Seleção de linha comportamento. 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. Use o botão de troca para esconder ou programa a caixa de seleção do seletor de linha.

    Setup

    Para configurar a seleção de linha no IgcTreeGridComponent, você só precisa definir a rowSelection propriedade. Essa propriedade aceita GridSelectionMode enumeração.

    GridSelectionMode expõe os seguintes modos:

    • Nenhum
    • Solteiro
    • Múltiplo
    • MultipleCascade

    Abaixo, veremos cada um deles com mais detalhes.

    Nenhuma seleção

    Por padrão, a seleção de linha está desabilitada IgcTreeGridComponent (rowSelection é Nenhuma). Portanto, você não pode selecionar ou desmarcar uma linha por meio da interação com a IgcTreeGridComponent interface do usuário, a única maneira de concluir essas ações é usar os métodos de API fornecidos.

    Seleção única

    A seleção de linha única agora pode ser facilmente configurada, a única coisa que você precisa fazer é definir rowSelection a Single propriedade. Isso lhe dá a oportunidade de selecionar apenas uma linha dentro de uma grade. Você pode selecionar uma linha clicando em uma célula ou pressionando a SPACE tecla ao focar em uma célula da linha e, claro, pode selecionar uma linha clicando no campo seletor de linha. Quando a linha é selecionada ou desmarcada RowSelectionChanging, o evento é emitido.

    <igc-tree-grid id="grid" row-selection="Single" auto-generate="true"
        allow-filtering="true">
</igc-tree-grid>

    constructor() {
    const grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.addEventListener("rowSelectionChanging", this.handleRowSelection);
}

    public handleRowSelection(args: IgcRowSelectionEventArgs) {
    if (args.detail.added.length && args.detail.added[0] === 3) {
        args.detail.cancel = true;
    }
}

    Seleção múltipla

    Para permitir a seleção de múltiplas linhas, basta IgcTreeGridComponent definir a rowSelection propriedade para Multiple. Isso permitirá um campo seletor de linha em cada linha e no IgcTreeGridComponent cabeçalho. O seletor de linhas permite que os usuários selecionem múltiplas linhas, com a seleção persistindo durante operações de rolagem, paginação e dados, como ordenação e filtragem. A linha também pode ser selecionada clicando em uma célula ou pressionando a SPACE tecla quando uma célula está focada. Se você selecionou uma linha e clicou em outra enquanto segura a SHIFT tecla, isso selecionará toda a faixa de linhas. Neste modo de seleção, ao clicar em uma única linha, as linhas selecionadas anteriores serão desmarcadas. Se você clicar enquanto segura a CTRL tecla, a fileira será alternada e a seleção anterior será preservada.

    <igc-tree-grid id="grid" primary-key="ProductID" row-selection="Multiple"
        allow-filtering="true" auto-generate="true">
</igc-tree-grid>

    Cascade Selection

    Para permitir a seleção de linhas em cascata, IgcTreeGridComponent basta definir a rowSelection propriedade para MultipleCascade. Isso permitirá um campo seletor de linha em cada linha e no IgcTreeGridComponent cabeçalho. O seletor de linhas permite que os usuários selecionem múltiplas linhas, o que selecionaria todos os filhos da árvore abaixo. A seleção persiste por meio de rolagem, paginação e operações de dados, como ordenação e filtragem. A linha também pode ser selecionada clicando em uma célula ou pressionando a SPACE tecla quando uma célula está focada no foco. Se você selecionou uma linha e clicou em outra enquanto segura a SHIFT tecla, a seleção de um registro pai selecionará todos os seus filhos mesmo que não estejam no intervalo selecionado. Neste modo de seleção, ao clicar em uma única linha, as linhas previamente selecionadas serão desmarcadas. Se você clicar enquanto segura a CTRL tecla, a linha e seus filhos serão alternados e a seleção anterior será preservada.

    <igc-tree-grid id="grid" primaryKey="ID" foreign-key="ParentID" auto-generate="true"
        row-selection="MultipleCascade" allow-filtering="true">
</igc-tree-grid>

    Nesse modo, o estado de seleção de um pai depende inteiramente do estado de seleção de seus filhos. Quando um pai tem alguns filhos selecionados e alguns desmarcados, sua caixa de seleção está em um estado indeterminado.

    Notas

    • A seleção de linha vai acionar RowSelectionChanging o evento. Este evento te dá informações sobre a nova seleção, a seleção antiga, as linhas que foram adicionadas e removidas da seleção antiga. Além disso, o evento pode ser cancelado, então isso permite evitar a seleção.
    • Quando a seleção de linha está habilitada, os seletores de linha são exibidos, mas se você não quiser mostrá-los, poderá definir hideRowSelectors como true.
    • Ao alternar entre os modos de seleção de linha em tempo de execução, isso limpará o estado de seleção de linha anterior.

    API usage

    Select Rows Programmatically

    O trecho de código abaixo pode ser usado para selecionar uma ou várias linhas simultaneamente (via primaryKey). Além disso, o segundo parâmetro desse método é uma propriedade booleana por meio da qual você pode escolher se a seleção de linha anterior será desmarcada ou não. A seleção anterior é preservada por padrão.

    <igc-tree-grid id="grid"
primary-key="ProductID"
row-selection="Multiple"
auto-generate="true">
</igc-tree-grid>

<button id='select'>Select 1,2 and 5</button>

    constructor() {
    document.getElementById("select").addEventListener("click", this.onClickSelect);
}
public onClickSelect() {
    const grid = document.getElementById("grid") as IgcTreeGridComponent;
    grid.selectRows([1,2,5], true);
}

    Isso adicionará as linhas que correspondem às entradas de dados com IDs 1, 2 e 5 à IgcTreeGridComponent seleção.

    Deselect Rows

    Se você precisar desmarcar linhas programaticamente, poderá usar o deselectRows método.

    <igc-tree-grid id="grid"
primary-key="ProductID"
row-selection="Multiple"
auto-generate="true">
</igc-tree-grid>

<button id='deselect'>DeSelect</button>

    constructor() {
    document.getElementById("deselect").addEventListener("click", this.onClickDeselect);
}
public onClickDeselect() {
    const grid = document.getElementById("grid") as IgcTreeGridComponent;
    grid.deselectRows([1,2,5]);
}

    Row Selection Event

    Quando há alguma alteração na seleção de linha, o evento RowSelectionChanging é emitido. RowSelectionChanging expõe os seguintes argumentos:

    • OldSelection- matriz de IDs de linha que contém o estado anterior da seleção de linha.
    • NewSelection- matriz de IDs de linha que correspondem ao novo estado da seleção de linha.
    • Added- matriz de IDs de linhas que estão atualmente adicionadas à seleção.
    • Removed- matriz de IDs de linhas que atualmente são removidas de acordo com o antigo estado de seleção.
    • Event- o evento original que acionou a alteração na seleção de linha.
    • Cancel- permite impedir a alteração da seleção de linha.
    <igc-tree-grid id="grid">
</igc-tree-grid>

    constructor() {
    const grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.addEventListener("rowSelectionChanging", this.handleRowSelectionChange);
}

public handleRowSelectionChange(args) {
    args.detail.cancel = true; // this will cancel the row selection
}

    Select All Rows

    Outro método útil de API que IgcTreeGridComponent oferece é selectAllRows. Por padrão, esse método seleciona todas as linhas de dados, mas se for aplicado filtro, ele seleciona apenas as linhas que correspondem aos critérios do filtro. Se você chamar o método com parâmetro falso, SelectAllRows(false) sempre selecionará todos os dados na grade, mesmo que seja aplicado filtragem.

    Nota Lembre-se de que selectAllRows não selecionará as linhas que são excluídas.

    Deselect All Rows

    IgcTreeGridComponent fornece um deselectAllRows método que, por padrão, desmarca todas as linhas de dados, mas se for aplicado filtro, desmarca apenas as linhas que correspondem aos critérios do filtro. Se você chamar o método com parâmetro falso, DeselectAllRows(false) sempre vai limpar todo o estado de seleção de linhas, mesmo que seja aplicado filtro.

    How to get Selected Rows

    Se você precisar ver quais linhas estão selecionadas no momento, poderá obter suas IDs de linha com o selectedRows getter.

    public getSelectedRows() {
    const grid = document.getElementById('grid') as IgcTreeGridComponent;
    const currentSelection = grid.selectedRows; // return array of row IDs
}

    Além disso, atribuir IDs de linha a selectedRows permitirá que você altere o estado de seleção da grade.

    public mySelectedRows = [1, 2, 3]; // an array of row IDs
constructor() {
    const grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.selectedRows = this.mySelectedRows;
}

    Row Selector Templates

    Você pode modelar seletores de cabeçalho e linha no IgcTreeGridComponent e também acessar seus contextos que fornecem funcionalidade útil para diferentes cenários.

    Por padrão, o lida IgcTreeGridComponent com todas as interações de seleção de linha no contêiner pai do seletor de linha ou na própria linha, deixando apenas a visualização de estado para o modelo. A substituição da funcionalidade base geralmente deve ser feita usando o evento RowSelectionChanging. Caso você implemente um modelo personalizado com um click manipulador que substitui a funcionalidade base, você deve interromper a propagação do evento para preservar o estado de linha correto.

    Modelo de linha

    Para criar um modelo de seletor de linha personalizado, você igc-tree-grid pode usar a rowSelectorTemplate propriedade. No modelo, você pode acessar a variável de contexto fornecida implicitamente, com propriedades que fornecem informações sobre o estado da linha.

    A selected propriedade mostra se a linha atual está selecionada ou não, enquanto a index propriedade pode ser usada para acessar o índice da linha.

    public rowSelectorTemplate = (ctx: IgcRowSelectorTemplateContext) => {
    if (ctx.implicit.selected) {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
            <span> ${ctx.implicit.index}</span>
            <igc-checkbox checked></igc-checkbox>
            </div>`;
    } else {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
            <span> ${ctx.implicit.index}</span>
            <igc-checkbox></igc-checkbox>
            </div>`;
    }
}

    A rowID propriedade pode ser usada para obter uma referência de uma igc-tree-grid linha. Isso é útil quando você implementa um click manipulador no elemento seletor de linha.

    public rowSelectorTemplate = (ctx: IgcRowSelectorTemplateContext) => {
    return html`
        <igc-checkbox
            @click="${(event: any) => {
            this.onSelectorClick(event, ctx.implicit.key);
            }}"
        ></igc-checkbox>
    `;
}

    No exemplo acima, estamos usando um IgcCheckboxComponent e nos ligamos rowContext.selected à sua checked propriedade. Veja isso em ação em nossa demonstração de numeração de linhas.

    Modelo de cabeçalho

    Para criar um modelo de seletor de cabeçalho personalizado, dentro do IgcTreeGridComponent, você pode usar a headSelectorTemplate propriedade. No modelo, você pode acessar a variável de contexto fornecida implicitamente, com propriedades que fornecem informações sobre o estado do cabeçalho.

    A selectedCount propriedade mostra quantas linhas estão selecionadas no momento, IgcTreeGridComponent enquanto totalCount mostra quantas linhas existem no total.

    public headSelectorTemplate = (ctx: IgcHeadSelectorTemplateContext) => {
    return html` ${ctx.implicit.selectedCount} / ${ctx.implicit.totalCount} `;
};

    As selectedCount propriedades and totalCount podem ser usadas para determinar se o seletor de cabeça deve ser verificado ou indeterminado (parcialmente selecionado).

    <igc-tree-grid id="grid"
primary-key="ProductID"
row-selection="Multiple"
auto-generate="true">
</igc-tree-grid>

    constructor() {
    const grid = document.getElementById('grid') as IgcTreeGridComponent;
    grid.data = this.data;
    grid.headSelectorTemplate = this.headSelectorTemplate;
}

public headSelectorTemplate = (ctx: IgcHeadSelectorTemplateContext) => {
    const implicit: any = ctx.implicit;
    if (implicit.selectedCount > 0 && implicit.selectedCount === implicit.totalCount) {
            return html`<igc-checkbox checked></igc-checkbox>`;
        } else if (implicit.selectedCount > 0 && implicit.selectedCount !== implicit.totalCount) {
            return html`<igc-checkbox indeterminate></igc-checkbox>`;
        }
        return html`<igc-checkbox></igc-checkbox>`;
}

    Row Numbering Demo

    Esta demonstração mostra o uso de seletores de cabeçalho e linha personalizados. O último usa index para exibir números de linha e um IgcCheckboxComponent limite a selected.

    Excel Style Row Selectors Demo

    Esta demonstração usa modelos personalizados para se assemelhar aos seletores de cabeçalho e linha do Excel.

    Conditional Selection Demo

    Esta demonstração impede que algumas linhas sejam selecionadas usando o evento RowSelectionChanging e um modelo personalizado com caixa de seleção desabilitada para linhas não selecionáveis.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.