BlazorDatasheet

Blazordataheet

Un componente simple de la hoja de datos para editar datos tabulares.

Características

• Edición de datos
  • Editores incorporados que incluyen texto, fecha, selección, booleano, área de texto, enum
  • Agregue editores personalizados para cualquier tipo de datos
• Formato condicional
• Validación de datos
• Fórmula
• Navegación de teclado
• Copiar y pegar a partir de datos tabulados
• Virtualización: maneja muchas células a la vez en filas y cols.

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

Empezando

Instale el paquete Nuget

dotnet add package BlazorDatasheet

Configurar Program.cs

En Program.cs, agregue los servicios requeridos:

 builder . Services . AddBlazorDatasheet ( ) ; 

Importar JS/CSS

En _layout.cshtml o index.html Agregar

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

y

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

La hoja de datos de Blazor proporciona un componente Blazor de hoja de datos que acepta una hoja.

Una hoja contiene los datos y la configuración para una hoja de datos. Los datos se establecen por celda, o se pueden construir utilizando ObjectEditorBuilder, que crea una hoja de datos basada en una lista de objetos.

El siguiente código muestra una cuadrícula de datos vacía de 3 x 3.

 < Datasheet
    Sheet = "sheet" / >

@code {

    private Sheet sheet ;

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

}

El editor predeterminado es el editor de texto, pero se puede cambiar definiendo la propiedad de tipo de cada celda.

Establecer y obtener valores de celda

Los valores celulares se pueden establecer de algunas maneras:

 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" ) ) ;

Los valores celulares se almacenan internamente dentro de una envoltura CellValue . Los valores se convierten implícitamente cuando se establecen arriba y se asigna un CellValueType a la celda.

El CellValueType se usa para la evaluación de la fórmula y puede ser uno de los siguientes:

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

Esta conversión se puede controlar, por ejemplo, al configurar el tipo de celda en "texto", los valores siempre se almacenarán como cadenas y no se realizará ninguna conversión.

La conversión también se puede modificar utilizando el evento de Sheet.Cells.BeforeCellValueConversion . Al cambiar la propiedad NewValue del argumento, se modifica el valor que se almacena.

Fórmula

La fórmula se puede aplicar a las células. Cuando las células o rangos que cambian las células de la fórmula, el valor celular se vuelve a calcular.

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

Formato

Los formatos de células se pueden establecer de las siguientes maneras:

 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" } ;

Cuando se establece un formato celular, se fusionará en cualquier formato celular existente en la región a la que se aplica. Se fusionarán cualquier paremetario de formato no nulo:

 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

El tipo de celda especifica qué renderizador y editor se utilizan para la celda. Los tipos de células también ayudan con conversiones explícitas cuando se establecen los valores de las células.

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

Se pueden definir editores y renderistas personalizados. Consulte los ejemplos para obtener más información.

Validación

La validación de datos se puede establecer en celdas/rangos. Hay dos modos de validación: estricto y no riguroso. Cuando un validador es estricto, el editor no establecerá el valor de la celda si falla la validación.

Si la validación no es estricta, el valor se puede establecer durante la edición, pero mostrará un error de validación cuando se renderice.

Aunque se puede establecer una validación estricta en una celda, el valor se puede cambiar programáticamente, pero se mostrará como un error de validación.

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

Regiones y rangos

Una región es una construcción geométrica, por ejemplo:

 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

Una gama es una región que también conoce la hoja. Se pueden usar rangos para establecer ciertas partes de la hoja.

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

Enlaces de la comunidad

• Uso de una hoja de datos de Blazor Excel para actualizar una base de datos
• Uso de OpenAI para actualizar una hoja de trabajo de Blazor Excel
• Microsoft Fabric y la hoja de datos Blazor