Web Components Filtro de pesquisa de grade de árvore -Ignite UI for Web Components

O recurso Filtro de Pesquisa Ignite UI for Web Components em Web Components Grade de Árvore permite o processo de localização de valores na coleta de dados. Facilitamos a configuração dessa funcionalidade e ela pode ser implementada com uma caixa de entrada de pesquisa, botões, navegação por teclado e outros recursos úteis para uma experiência de usuário ainda melhor. Embora os navegadores forneçam nativamente a funcionalidade de pesquisa de conteúdo, na maioria das vezes eles IgcTreeGridComponent virtualizam suas colunas e linhas que estão fora de exibição. Nesses casos, a pesquisa nativa do navegador não consegue pesquisar dados nas células virtualizadas, pois elas não fazem parte do DOM. Estendemos a grade baseada em tabela do Web Components Material com uma API de pesquisa que permite pesquisar o conteúdo virtualizado do IgcTreeGridComponent.

Web Components Search Example

O exemplo a seguir representa IgcTreeGridComponent uma caixa de entrada de pesquisa que permite pesquisar em todas as colunas e linhas, bem como opções de filtragem específicas para cada coluna.

Web Components Search Usage

Tree Grid Setup

Vamos começar criando nossa grade e vinculando-a aos nossos dados. Também adicionaremos alguns estilos personalizados para os componentes que usaremos!

<igc-tree-grid id="treeGrid" auto-generate="false" primary-key="ID" foreign-key="ParentID" allow-filtering="true" height="100%" width="100%">
    <igc-column field="Name" data-type="string" sortable="true"></igc-column>        
    <igc-column field="ID" data-type="number" sortable="true"></igc-column>        
    <igc-column field="Title" data-type="string" sortable="true"></igc-column>        
    <igc-column field="Age" data-type="number" sortable="true"></igc-column>        
    <igc-column field="HireDate" data-type="date" sortable="true"></igc-column>        
</igc-tree-grid>

private treeGrid: IgcTreeGridComponent;

constructor() {
    this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    this.treeGrid.data = new EmployeesFlatData();
}

Ótimo, e agora vamos nos preparar para a nossa IgcTreeGridComponent API de pesquisa! Podemos criar algumas propriedades, que podem ser usadas para armazenar o texto pesquisado no momento e se a pesquisa diferencia maiúsculas de minúsculas e/ou por uma correspondência exata.

private treeGrid: IgcTreeGridComponent;    

private searchBox: IgcInputComponent;

private icon: IgcIconComponent;
private nextIconButton: IgcIconButtonComponent;
private prevIconButton: IgcIconButtonComponent;

private caseSensitiveChip: IgcChipComponent;
private exactMatchChip: IgcChipComponent;

Agora vamos criar nossa entrada de pesquisa! Ao obter o elemento de entrada, podemos obter seu valor atual. Isso nos permitirá usar os IgcTreeGridComponent métodos e findPrev para destacar todas as ocorrências findNext do SearchText e rolar para o próximo/anterior (dependendo de qual método invocamos).

Ambos os métodos e findNext os findPrev métodos têm três argumentos:

Text: string (o texto que estamos procurando)
(opcional) CaseSensitive: boolean (a pesquisa deve diferenciar maiúsculas de minúsculas ou não, o valor padrão é false)
(opcional) ExactMatch: boolean (a busca deve ser por uma correspondência exata ou não, o valor padrão é false)

Ao pesquisar por uma correspondência exata, a API de pesquisa destacará como resultados apenas os valores de células que correspondem inteiramente ao SearchText, levando em conta também a diferenciação entre maiúsculas e minúsculas. Por exemplo, as strings 'software' e 'Software' são uma correspondência exata, desconsiderando a diferenciação entre maiúsculas e minúsculas.

Os métodos acima retornam um valor numérico (o número de vezes que contém IgcTreeGridComponent a cadeia de caracteres fornecida).

<igc-input id="searchBox" name="searchBox">
</igc-input>

constructor() {
    this.searchBox = document.getElementById('searchBox') as IgcInputComponent;
    this.caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent;
    this.exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent;
}

public nextSearch() {
    this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

Add Search Buttons

Para pesquisar e navegar livremente entre nossos resultados de pesquisa, vamos criar alguns botões invocando o findNext e os findPrev métodos dentro dos respectivos manipuladores de eventos de clique dos botões.

<igc-icon-button id="prevIconBtn" variant="flat" name="prev" collection="material" ></igc-icon-button>
<igc-icon-button id="nextIconBtn" variant="flat" name="next" collection="material"></igc-icon-button>

constructor() {
    this.nextIconButton = document.getElementById('nextIconBtn') as IgcIconButtonComponent;
    this.prevIconButton = document.getElementById('prevIconBtn') as IgcIconButtonComponent;
    this.nextIconButton.addEventListener("click", this.nextSearch);
    this.prevIconButton.addEventListener("click", this.prevSearch);
}

public prevSearch() {
    this.treeGrid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

public nextSearch() {
    this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

Add Keyboard Search

Também podemos permitir que os usuários naveguem pelos resultados usando as teclas de seta do teclado e a Enter tecla. Para conseguir isso, podemos lidar com o evento keydown de nossa entrada de pesquisa, impedindo o movimento de acento circunflexo padrão da entrada com o PreventDefault método e invocar os findNext métodos / findPrev, dependendo de qual tecla o usuário pressionou.

<igc-input id="searchBox" name="searchBox">
</igc-input>

constructor() {
    this.searchBox = document.getElementById('searchBox') as IgcInputComponent;

    this.searchBox.addEventListener("keydown", (evt) => { this.onSearchKeydown(evt); });
    this.searchBox.addEventListener("igcInput", (evt) => {
        this.treeGrid.findNext(evt.detail, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
    });
}

public onSearchKeydown(evt: KeyboardEvent) {  
    if (evt.key === 'Enter' || evt.key === 'ArrowDown') {
        evt.preventDefault();
        this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
    } else if (evt.key === 'ArrowUp') {
        evt.preventDefault();
        this.treeGrid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
    }
}

Case Sensitive and Exact Match

Agora vamos permitir que o usuário escolha se a pesquisa deve diferenciar maiúsculas de minúsculas e/ou por uma correspondência exata. Para isso, podemos usar simples selecionável Chips e vincular ao igcSelect evento para determinar quando o usuário interage com eles.

<igc-chip selectable="true" id="caseSensitiveChip">Case Sensitive</igc-chip>
<igc-chip selectable="true" id="exactMatchChip">Exact Match</igc-chip>

constructor() {
    this.caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent;
    this.exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent;

    this.caseSensitiveChip.addEventListener("igcSelect", (evt) => {
        this.treeGrid.findNext(this.searchBox.value, evt.detail, this.exactMatchChip.selected);
    });
    this.exactMatchChip.addEventListener("igcSelect", (evt) => {
        this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, evt.detail);
    });
}

Persistence

E se quisermos filtrar e classificar nosso IgcTreeGridComponent ou mesmo para adicionar e remover registros? Após essas operações, os destaques de nossa pesquisa atual são atualizados automaticamente e persistem sobre qualquer texto que corresponda ao SearchText! Além disso, a pesquisa funcionará com paginação e persistirá os destaques por meio de alterações do IgcTreeGridComponent 's PerPage propriedade.

Adding icons

Ao usar alguns dos nossos outros componentes, podemos criar uma interface de usuário enriquecida e melhorar o design geral de toda a nossa barra de pesquisa! Podemos ter um belo ícone de pesquisa ou exclusão à esquerda da entrada de pesquisa, alguns chips para nossas opções de pesquisa e alguns ícones de material design combinados com belos botões em estilo ripple para nossa navegação à direita. Podemos envolver esses componentes dentro de um grupo de entrada para um design mais refinado.

import { defineComponents, IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent, registerIconFromText } from "igniteui-webcomponents";

defineComponents(IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent);

Por fim, vamos atualizar nosso modelo com os novos componentes!

Vamos envolver todos os nossos componentes dentro de um IgcInputComponent. À esquerda, alternaremos entre uma pesquisa e um ícone de exclusão/limpeza (dependendo se a entrada de pesquisa está vazia ou não). No centro, posicionaremos a própria entrada. Além disso, sempre que o ícone de exclusão for clicado, atualizaremos nosso SearchText método e invocaremos o IgcTreeGridComponent método para clearSearch limpar os destaques.

<igc-input id="searchBox" name="searchBox">
    <igc-icon id="icon" slot="prefix" name="search" collection="material"></igc-icon>
    <div slot="suffix">
        <igc-chip selectable="true" id="caseSensitiveChip">Case Sensitive</igc-chip>
        <igc-chip selectable="true" id="exactMatchChip">Exact Match</igc-chip>
    </div>
    <div slot="suffix">
        <igc-icon-button id="prevIconBtn" variant="flat" name="prev" collection="material" ></igc-icon-button>
        <igc-icon-button id="nextIconBtn" variant="flat" name="next" collection="material"></igc-icon-button>
    </div>
</igc-input>

constructor() {
    const prevIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'></path></svg>";
    const nextIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'></path></svg>";
    const searchIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' /></svg>";
    const clearIconText = "<svg width='24' height='24' viewBox='0 0 24 24' title='Clear'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'></path></svg>";

    registerIconFromText('prev', prevIconText, 'material');
    registerIconFromText('next', nextIconText, 'material');
    registerIconFromText('search', searchIconText, 'material');
    registerIconFromText('clear', clearIconText, 'material');

    this.icon = document.getElementById('icon') as IgcIconComponent;
    this.searchBox = document.getElementById('searchBox') as IgcInputComponent;

    this.searchBox.addEventListener('igcInput', (evt) => {
        this.icon.name = evt.detail ? 'clear' : 'search';
    });
    this.icon.addEventListener('click', this.clearSearch);
}

public clearSearch() {
    this.searchBox.value = '';
    this.icon.name = 'search';
    this.treeGrid.clearSearch();
}

À direita, em nosso grupo de entrada, vamos criar três contêineres separados com as seguintes finalidades:

Para exibir alguns chips que alternam as propriedades CaseSensitive e ExactMatch. Substituímos as caixas de seleção por dois chips estilosos que mudam de cor com base nessas propriedades. Sempre que um chip é clicado, invocamos seu respectivo manipulador.

<div slot="suffix">
    <igc-chip selectable="true" id="caseSensitiveChip">Case Sensitive</igc-chip>
    <igc-chip selectable="true" id="exactMatchChip">Exact Match</igc-chip>
</div>

constructor() {
    this.caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent;
    this.exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent;

    this.caseSensitiveChip.addEventListener('igcSelect', (evt) => {
        this.treeGrid.findNext(this.searchBox.value, evt.detail, this.exactMatchChip.selected);
    });
    this.exactMatchChip.addEventListener('igcSelect', (evt) => {
        this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, evt.detail);
    });
}

Para os botões de navegação de pesquisa, transformamos nossas entradas em botões de estilo ondulado com ícones de materiais. Os manipuladores para os eventos de clique permanecem os mesmos - invocando os métodos / findNext findPrev.

<div slot="suffix">
    <igc-icon-button id="prevIconBtn" variant="flat" name="prev" collection="material" ></igc-icon-button>
    <igc-icon-button id="nextIconBtn" variant="flat" name="next" collection="material"></igc-icon-button>
</div>

constructor() {
    const nextIconButton = this.nextIconButton = document.getElementById('nextIconBtn') as IgcIconButtonComponent;
    const prevIconButton = this.prevIconButton = document.getElementById('prevIconBtn') as IgcIconButtonComponent;
    nextIconButton.addEventListener("click", this.nextSearch);
    prevIconButton.addEventListener("click", this.prevSearch);
}

public prevSearch() {
    this.treeGrid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

public nextSearch() {
    this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
}

Known Limitations

Limitação	Descrição
Pesquisando em células com um modelo	Os destaques da funcionalidade de pesquisa funcionam apenas para os modelos de célula padrão. Se você tiver uma coluna com modelo de célula personalizado, os destaques não funcionarão, então você deve usar abordagens alternativas, como um formatador de coluna, ou definir o`searchable` propriedade na coluna como falsa.
Virtualização Remota	A pesquisa não funcionará corretamente ao usar virtualização remota
Células com texto cortado	Quando o texto na célula é muito grande para caber e o texto que estamos procurando é cortado pelas reticências, ainda rolaremos até a célula e a incluiremos na contagem de correspondências, mas nada será destacado

API References

Neste artigo, implementamos nossa própria barra de pesquisa para o IgcTreeGridComponent com algumas funcionalidades adicionais quando se trata de navegar entre os resultados da pesquisa. Também usamos alguns componentes Ignite UI for Web Components adicionais, como ícones, chips e entradas. A API de pesquisa está listada abaixo.

IgcTreeGridComponent methods:

IgcColumnComponent properties: