Visão geral e configuração da grade de árvore do Blazor

Ignite UI for Blazor Tree Grid é usado para exibir e manipular dados hierárquicos ou simples com facilidade. Vincule rapidamente seus dados com muito pouco código ou use uma variedade de eventos para personalizar diferentes comportamentos. Este componente fornece um rico conjunto de recursos, como seleção de dados, filtragem de estilo do Excel, classificação, paginação, modelagem e movimentação de colunas. A exibição de dados tabulares nunca foi tão fácil e bonita graças à grade de árvore de interface do usuário baseada em tabela de materiais.

Blazor Tree Grid Example

Neste exemplo, você pode ver como os usuários podem manipular dados hierárquicos ou simples. Incluímos opções de filtragem e classificação, fixação e ocultação, seleção de linhas, exportação para excel e csv.

Example

Getting Started with Ignite UI for Blazor Tree Grid

Dependencies

To get started with the Blazor tree grid, first you need to install the IgniteUI.Blazor package.

Consulte estes tópicos sobre como adicionar o pacote IgniteUI.Blazor:

• Começando
• Adicionando o pacote Nuget

Você também precisa incluir o seguinte link CSS no arquivo index.html do seu aplicativo para fornecer os estilos necessários para a grade de árvore:

<link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />

Depois, você pode começar a implementar o controle adicionando os seguintes namespaces:

@using IgniteUI.Blazor.Controls

Component Modules

// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbTreeGridModule));

Usage

A grade de árvore compartilha muitos recursos com a grade, mas também adiciona a capacidade de exibir seus dados hierarquicamente. Para conseguir isso, a grade de árvore nos fornece algumas maneiras de definir as relações entre nossos objetos de dados - usando uma coleção filho para cada objeto de dados ou usando chaves primárias e estrangeiras para cada objeto de dados.

Tree Cells

Independentemente de qual opção é usada para criar a hierarquia da grade de árvore (coleção filho ou chaves primárias e estrangeiras), as linhas da grade de árvore são construídas de dois tipos de células:

• GridCell- Célula comum que contém um valor.
• TreeGridCell- Célula de árvore que contém um valor, um indicador de expansão/recolhimento e um elemento div de recuo, que é baseado no nível da linha da célula. O nível de um componente de linha pode ser acessado por meio da level propriedade de seu interno treeRow.

[!Note] Each row can have only one tree cell, but it can have multiple (or none) ordinary cells.

Initial Expansion Depth

Inicialmente, a grade de árvore expandirá todos os níveis de nó e os mostrará. Esse comportamento pode ser configurado usando a ExpansionDepth propriedade. Por padrão, seu valor é Infinito, o que significa que todos os níveis de nó serão expandidos. Você pode controlar a profundidade de expansão inicial definindo essa propriedade como um valor numérico. Por exemplo, 0 mostrará apenas nós de nível raiz,1 mostrará nós de nível raiz e seus nós filhos e assim por diante.

Child Collection

Quando estamos usando a opção de coleção filho, cada objeto de dados contém uma coleção filho, que é preenchida com itens do mesmo tipo que o objeto de dados pai. Dessa forma, cada registro na grade da árvore terá uma referência direta a qualquer um de seus filhos. Nesse caso, a propriedade de dados de nossa grade de árvore que contém a fonte de dados original será uma coleção definida hierarquicamente.

Para este exemplo, vamos usar a seguinte estrutura de coleção:

public class EmployeesNestedDataItem
{
    public double ID { get; set; }
    public double Age { get; set; }
    public double Salary { get; set; }
    public double Productivity { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string HireDate { get; set; }
    public string Name { get; set; }
    public string Title { get; set; }
    public List<EmployeesItem> Employees { get; set; }
}
public class EmployeesItem
{
    public double Age { get; set; }
    public double Salary { get; set; }
    public double Productivity { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public string Title { get; set; }
}

Agora vamos começar importando nossa Data coleção e vinculando-a à nossa grade de árvore.

 <IgbTreeGrid
    AutoGenerate="false"
    ChildDataKey="Employees"
    Data="EmployeesNestedData"
    Name="treeGrid"
    @ref="treeGrid">
        <IgbColumn Field="Name" DataType="GridColumnDataType.String"></IgbColumn>
        <IgbColumn Field="HireDate" DataType="GridColumnDataType.Date"></IgbColumn>
        <IgbColumn Field="Age" DataType="GridColumnDataType.Number"> </IgbColumn>
</IgbTreeGrid>

Para que a grade de árvore construa a hierarquia, teremos que definir sua ChildDataKey propriedade como o nome da coleção filha que é usada em cada um de nossos objetos de dados. No nosso caso, essa será a coleção Employees. Além disso, podemos desativar a geração automática de colunas e defini-las manualmente, combinando-as com as propriedades reais de nossos objetos de dados. (A coleção Employees será usada automaticamente para a hierarquia, portanto, não há necessidade de incluí-la nas definições das colunas.)

Agora podemos habilitar os recursos de seleção de linha e paginação da grade de árvore usando as rowSelection propriedades e . paging Também podemos habilitar os resumos, os recursos de filtragem, classificação, edição, movimentação e redimensionamento para cada uma de nossas colunas.

<IgbTreeGrid AutoGenerate="false"
             ChildDataKey="Employees"
             Data="EmployeesNestedData"
             RowSelection="GridSelectionMode.Multiple"
             AllowFiltering=true
             Moving=true
            Name="treeGrid"
            @ref="treeGrid">
    <IgbColumn Field="Name" DataType="GridColumnDataType.String" Sortable=true Editable=true Resizable=true HasSummary=true></IgbColumn>
    <IgbColumn Field="HireDate" DataType="GridColumnDataType.Date" Sortable=true Editable=true Resizable=true HasSummary=true></IgbColumn>
    <IgbColumn Field="Age" DataType="GridColumnDataType.Number" Sortable=true Editable=true Resizable=true HasSummary=true> </IgbColumn>
    <IgbPaginator></IgbPaginator>
</IgbTreeGrid>

Finalmente, podemos habilitar a barra de ferramentas de nossa grade de árvore, juntamente com os recursos de ocultação de coluna, fixação de coluna e exportação usando o IgbGridToolbar, IgbGridToolbarHiding,e IgbGridToolbarPinning​ ​IgbGridToolbarExporter respectivamente.

<IgbTreeGrid AutoGenerate="false"
             ChildDataKey="Employees"
             Data="EmployeesNestedData"
             RowSelection="GridSelectionMode.Multiple"
             AllowFiltering=true
             Moving=true
            Name="treeGrid"
            @ref="treeGrid">
    <IgbColumn Field="Name" DataType="GridColumnDataType.String" Sortable=true Editable=true Resizable=true HasSummary=true></IgbColumn>
    <IgbColumn Field="HireDate" DataType="GridColumnDataType.Date" Sortable=true Editable=true Resizable=true></IgbColumn>
    <IgbColumn Field="Age" DataType="GridColumnDataType.Number" Sortable=true Editable=true Resizable=true > </IgbColumn>
    <IgbPaginator></IgbPaginator>
    <IgbGridToolbar>
        <IgbGridToolbarTitle> Employees </IgbGridToolbarTitle>
        <IgbGridToolbarActions>
            <IgbGridPinningActions></IgbGridPinningActions>
            <IgbGridToolbarHiding></IgbGridToolbarHiding>
            <IgbGridToolbarExporter></IgbGridToolbarExporter>
    </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbTreeGrid>

Você pode ver o resultado do código acima no início deste artigo na seção Exemplo de grade de árvore.

Primary and Foreign keys

Quando estamos usando a opção de chaves primárias e estrangeiras, cada objeto de dados contém uma chave primária e uma chave estrangeira. A chave primária é o identificador exclusivo do objeto de dados atual e a chave estrangeira é o identificador exclusivo de seu pai. Nesse caso, a data propriedade de nossa grade de árvore que contém a fonte de dados original será uma coleção simples.

public class EmployeesFlatDataItem
{
    public double Age { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public string Phone { get; set; }
    public bool OnPTO { get; set; }
    public double ParentID { get; set; }
    public string Title { get; set; }
}

Nos dados de exemplo acima, todos os registros têm um ID, um ParentID e algumas propriedades adicionais, como Name, JobTitle e Age. Conforme mencionado anteriormente, o ID dos registros deve ser exclusivo, pois será nosso PrimaryKey. O ParentID contém a ID do nó pai e pode ser definido como um ForeignKey. Se uma linha tiver um ParentID que não corresponda a nenhuma linha na grade da árvore, isso significa que essa linha é uma linha raiz.

A relação pai-filho é configurada usando as propriedades e ForeignKey da PrimaryKey grade de árvore.

Aqui está o modelo do componente que demonstra como configurar a grade de árvore para exibir os dados definidos na coleção plana acima:

<IgbTreeGrid AutoGenerate="false"
             PrimaryKey="ID"
             ForeignKey="ParentID"
             Data="EmployeesFlatDataItem"
             Name="treeGrid">
    <IgbColumn Field="Name" DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="JobTitle" DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="Age" DataType="GridColumnDataType.Number"></IgbColumn>
</IgbTreeGrid>

Além disso, habilitaremos o recurso de seleção de linha da grade de árvore usando a propriedade rowSelection e também os recursos de filtragem, classificação, edição, movimentação e redimensionamento para cada uma de nossas colunas.

<IgbTreeGrid AutoGenerate="false"
             PrimaryKey="ID"
             ForeignKey="ParentID"
             Data="EmployeesFlatDataItem"
             RowSelection="GridSelectionMode.Multiple"
             AllowFiltering=true
             Moving=true
             Name="treeGrid"
             @ref="treeGrid">
    <IgbColumn Field="Name" DataType="GridColumnDataType.String" Sortable=true Editable=true Resizable=true></IgbColumn>
    <IgbColumn Field="JobTitle" DataType="GridColumnDataType.String" Sortable=true Editable=true Resizable=true></IgbColumn>
    <IgbColumn Field="Age" DataType="GridColumnDataType.Number" Sortable=true Editable=true Resizable=true> </IgbColumn>
</IgbTreeGrid>

E aqui está o resultado final:

Persistence and Integration

O recuo da célula da grade de árvore persiste em outros recursos de grade de árvore, como filtragem, classificação e paginação.

• Quando Sorting é aplicado em uma coluna, as linhas de dados são classificadas por níveis. Isso significa que as linhas de nível raiz serão classificadas independentemente de seus respectivos filhos. Suas respectivas coleções filhas também serão classificadas de forma independente e assim por diante.
• A primeira coluna (aquela que tem um VisibleIndex de 0) é sempre a coluna da árvore.
• A coluna que termina com um VisibleIndex de 0 após operações como fixação de coluna, ocultação de coluna e movimentação de coluna torna-se a coluna de árvore.
• As planilhas do Excel exportadas refletem a hierarquia agrupando os registros à medida que são agrupados na própria grade de árvore. Todos os estados expandidos de registros também seriam persistidos e refletidos.
• Ao exportar para CSV, os níveis e estados expandidos são ignorados e todos os dados são exportados como simples.

Blazor Tree Grid Styling Configuration

Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir uma classe para a grade primeiro:

<IgbTreeGrid Class="tree-grid">

Em seguida, defina as propriedades CSS relacionadas para essa classe:

.tree-grid {
    --ig-grid-header-background: #494949;
    --ig-grid-header-text-color: #FFF;
    --ig-grid-expand-icon-color: #FFCD0F;
    --ig-grid-expand-icon-hover-color: #E0B710;
    --ig-grid-row-hover-background: #F8E495;
}

API References

• IgbTreeGrid
• IgbColumn
• IgbGridToolbar
• IgbTreeGridRecord

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Blazor Fóruns
• Ignite UI for Blazor GitHub