BlazorDatasheet

BlazordataSheet

Um componente simples da folha de dados para editar dados tabulares.

Características

• Edição de dados
  • Construído em editores, incluindo texto, data, selecione, boolean, área de texto, enum
  • Adicione editores personalizados para qualquer tipo de dados
• Formatação condicional
• Validação de dados
• Fórmula
• Navegação do teclado
• Copiar e colar de dados tabulados
• Virtualização - lida com muitas células de uma só vez em linhas e cols.

Demo: https://anmcgrath.github.io/blazordataheet/

Começando

Instale o pacote NUGET

dotnet add package BlazorDatasheet

Configurar Program.cs

No Program.cs, adicione os serviços necessários:

 builder . Services . AddBlazorDatasheet ( ) ; 

Importar JS/CSS

Em _layout.cshtml ou index.html add

 <link href="_content/BlazorDatasheet/sheet-styles.css" rel="stylesheet"/>

e

 <script src="_content/BlazorDatasheet/blazor-datasheet.js" type="text/javascript"></script>

A Blazor Dathheet fornece uma folha de dados componente Blazor que aceita uma folha.

Uma folha contém os dados e a configuração de uma folha de dados. Os dados são definidos por célula ou podem ser construídos usando o objectEditorBuilder, que cria uma folha de dados com base em uma lista de objetos.

O código a seguir exibe uma grade de dados 3 x 3 vazia.

 < Datasheet
    Sheet = "sheet" / >

@code {

    private Sheet sheet ;

    protected override void OnInitialized ( )
    {
        sheet = new Sheet ( 3 , 3 ) ;
    }

}

O editor padrão é o editor de texto, mas pode ser alterado definindo a propriedade Tipo de cada célula.

Definir e obter valores celulares

Os valores celulares podem ser definidos de algumas maneiras:

 sheet . Cells [ 0 , 0 ] . Value = "Test"
sheet . Range ( "A1" ) . Value = "Test" ;
sheet . Cells . SetValue ( 0 , 0 , "Test" ) ;
sheet . Commands . ExecuteCommand ( new SetCellValueCommand ( 0 , 0 , "Test" ) ) ;

Os valores das células são armazenados internamente dentro de um invólucro CellValue . Os valores são convertidos implicitamente quando definidos acima e um CellValueType é atribuído à célula.

O CellValueType é usado para avaliação da fórmula e pode ser um dos seguintes:

    Empty = 0,
    Error = 1,
    Array = 2,
    Unknown = 3,
    Sequence = 4,
    Reference = 5,
    Number = 6,
    Date = 7,
    Text = 8,
    Logical = 9,

Essa conversão pode ser controlada, por exemplo, ao definir o tipo de célula como "texto", os valores sempre serão armazenados como strings e nenhuma conversão será feita.

A conversão pode ser modificada adicionalmente usando o evento Sheet.Cells.BeforeCellValueConversion . Ao alterar a propriedade NewValue do argumento, o valor que é armazenado é modificado.

Fórmula

A fórmula pode ser aplicada às células. Quando as células ou variações de que as células da fórmula se referem, o valor da célula é recalculado.

 sheet . Cells [ 0 , 0 ] . Formula = "=10+A2"

Formatação

Os formatos celulares podem ser definidos das seguintes maneiras:

 sheet . Range ( "A1:A2" ) . Format = new CellFormat ( ) { BackgroundColor = "red" } ;
sheet . Commands . ExecuteCommand (
    new SetFormatCommand ( new RowRegion ( 10 , 12 ) , new CellFormat ( ) { ForegroundColor = "blue" } ) ) ;
sheet . SetFormat ( sheet . Range ( new ColumnRegion ( 5 ) ) , new CellFormat ( ) { FontWeight = "bold" } ) ;
sheet . Cells [ 0 , 0 ] . Format = new CellFormat ( ) { TextAlign = "center" } ;

Quando um formato de célula é definido, ele será mesclado em qualquer formato de célula existente na região em que seja aplicado. Quaisquer parêmmeas de formato não nulo serão mesclados:

 sheet . Range ( "A1" ) . Format = new CellFormat ( ) { BackgroundColor = "red" } ;
sheet . Range ( "A1:A2" ) . Format = new CellFormat ( ) { ForegroundColor = "blue" } ;
var format = sheet . Cells [ 0 , 0 ] . Format ; // backroundColor = "red", foreground = "blue"
var format2 = sheet . Cells [ 1 , 0 ] . Format ; // foreground = "blue"

Tipos de células

O tipo de célula especifica qual renderizador e editor são usados para a célula. Os tipos de células também ajudam com conversões explícitas quando os valores das células são definidos.

 sheet . Range ( "A1:B5" ) . Type = "boolean" ; // renders a checkbox

Editores e renderizadores personalizados podem ser definidos. Veja os exemplos para obter mais informações.

Validação

A validação de dados pode ser definida em células/faixas. Existem dois modos de validação: rigoroso e não rigoroso. Quando um validador é rigoroso, o valor da célula não será definido pelo editor se falhar na validação.

Se a validação não for estrita, o valor poderá ser definido durante a edição, mas mostrará um erro de validação quando renderizado.

Embora uma validação estrita possa ser definida em uma célula, o valor pode ser alterado programaticamente, mas será exibido como um erro de validação.

 sheet . Validators . Add ( new ColumnRegion ( 0 ) , new NumberValidator ( isStrict : true ) ) ;

Regiões e faixas

Uma região é uma construção geométrica, por exemplo:

 var region = new Region ( 0 , 5 , 0 , 5 ) ; // r0 to r5, c0 to c5
var cellRegion = new Region ( 0 , 0 ) ; // cell A1
var colRegion = new ColumnRegion ( 0 , 4 ) ; // col region spanning A to D
var rowRegion = new RowRegion ( 0 , 3 ) ; // row region spanning 1 to 4

Um intervalo é uma região que também conhece a folha. As faixas podem ser usadas para definir certas partes da folha.

 var range = sheet . Range ( "A1:C5" ) ;
var range = sheet . Range ( new ColumnRegion ( 0 ) ) ;
var range = sheet . Range ( 0 , 0 , 4 , 5 ) ;

Links comunitários

• Usando uma folha de dados do Blazor Excel para atualizar um banco de dados
• Usando o OpenAI para atualizar uma planilha Blazor Excel
• Microsoft Fabric e a folha de dados Blazor