BlazorDatasheet

Feuille de Blazat

Un composant de fiche technique simple pour modifier les données tabulaires.

Caractéristiques

• Édition de données
  • Éditeurs intégrés, notamment du texte, de la date, de la sélection, du booléen, de la zone de texte, de l'énumération
  • Ajouter des éditeurs personnalisés pour tout type de données
• Formatage conditionnel
• Validation des données
• Formule
• Navigation du clavier
• Copier et coller à partir de données tabulées
• Virtualisation - gère de nombreuses cellules à la fois dans les lignes et les cols.

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

Commencer

Installer le package Nuget

dotnet add package BlazorDatasheet

Configurer le programme.cs

Dans programme.cs, ajoutez les services requis:

 builder . Services . AddBlazorDatasheet ( ) ; 

Importer JS / CSS

Dans _Layout.cshtml ou index.html Ajouter

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

et

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

Blazor DataSheet fournit un composant Blazor de la fiche technique qui accepte une feuille.

Une feuille contient les données et la configuration d'une fiche technique. Les données sont définies par cellule, ou peuvent être construites à l'aide du ObjectEditorBuilder, qui crée une fiche technique basée sur une liste d'objets.

Le code suivant affiche une grille de données vide de 3 x 3.

 < Datasheet
    Sheet = "sheet" / >

@code {

    private Sheet sheet ;

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

}

L'éditeur par défaut est l'éditeur de texte, mais peut être modifié en définissant la propriété Type de chaque cellule.

Définir et obtenir des valeurs cellulaires

Les valeurs cellulaires peuvent être définies de plusieurs manières:

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

Les valeurs cellulaires sont stockées en interne à l'intérieur d'un emballage CellValue . Les valeurs sont converties implicitement lorsqu'elles sont définies ci-dessus et une CellValueType est affectée à la cellule.

Le CellValueType est utilisé pour l'évaluation des formules et peut être l'une des éléments suivants:

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

Cette conversion peut être contrôlée, par exemple lors du définition du type de cellule en "texte", les valeurs seront toujours stockées sous forme de chaînes et aucune conversion ne sera effectuée.

La conversion peut en outre être modifiée à l'aide de l'événement Sheet.Cells.BeforeCellValueConversion . En modifiant la propriété NewValue de l'argument, la valeur stockée est modifiée.

Formule

La formule peut être appliquée aux cellules. Lorsque les cellules ou les gammes que les cellules de formule se réfèrent, la valeur cellulaire est recalculée.

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

Formatage

Les formats cellulaires peuvent être définis de la manière suivante:

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

Lorsqu'un format cellulaire est défini, il sera fusionné dans tous les formats de cellules existants dans la région à laquelle il est appliqué. Tout format non nulle que les parenters seront fusionnés:

 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"

Types de cellules

Le type de cellule spécifie quel rendu et l'éditeur sont utilisés pour la cellule. Les types de cellules aident également les conversions explicites lorsque les valeurs des cellules sont définies.

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

Les éditeurs et les rendus personnalisés peuvent être définis. Voir les exemples pour plus d'informations.

Validation

La validation des données peut être définie sur les cellules / plages. Il existe deux modes de validation: stricts et non-stricts. Lorsqu'un validateur est strict, la valeur cellulaire ne sera pas définie par l'éditeur si elle échoue la validation.

Si la validation n'est pas stricte, la valeur peut être définie lors de l'édition mais affichera une erreur de validation lors de la rendue.

Bien qu'une validation stricte puisse être définie sur une cellule, la valeur peut être modifiée par programme, mais elle s'affichera comme erreur de validation.

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

Régions et gammes

Une région est une construction géométrique, par exemple:

 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

Une gamme est une région qui connaît également la feuille. Les gammes peuvent être utilisées pour définir certaines parties de la feuille.

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

Liens communautaires

• Utilisation d'une fiche technique Blazor Excel pour mettre à jour une base de données
• Utilisation d'Openai pour mettre à jour une feuille de travail Blazor Excel
• Microsoft Fabric et la fiche technique du Blazor