BlazorDatasheet

Blazordatasheet

一个简单的数据表组件，用于编辑表格数据。

特征

• 数据编辑
  • 内置编辑器，包括文本，日期，选择，布尔值，文本区域，枚举
  • 为任何数据类型添加自定义编辑器
• 条件格式
• 数据验证
• 公式
• 键盘导航
• 复制和粘贴从列表的数据中
• 虚拟化 - 在行和Cols上一次处理许多单元。

演示：https：//anmcgrath.github.io/blazordatasheet/

入门

安装Nuget软件包

dotnet add package BlazorDatasheet

configure program.cs

在program.cs中，添加所需的服务：

 builder . Services . AddBlazorDatasheet ( ) ; 

导入JS/CSS

在_layout.cshtml或index.html中添加

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

和

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

Blazor DataSheet提供了接受表格的数据表Blazor组件。

表保存数据表的数据和配置。数据是每个单元格设置的，也可以使用objecteditorBuilder构建，该数据基于对象列表创建数据表。

以下代码显示一个空的3 x 3数据网格。

 < Datasheet
    Sheet = "sheet" / >

@code {

    private Sheet sheet ;

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

}

默认编辑器是文本编辑器，但可以通过定义每个单元格的类型属性来更改。

设置并获取单元格值

可以通过几种方式设置单元格：

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

单元格值在内部存储在CellValue包装器中。当设置上方设置时，将值隐式转换，并分配给单元格CellValueType valueType。

CellValueType用于公式评估，可以是以下内容之一：

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

可以控制此转换，例如，将单元格类型设置为“文本”时，值将始终以字符串而存储，并且不会进行转换。

可以通过使用Sheet.Cells.BeforeCellValueConversion事件对转换进行修改。通过更改参数的NewValue属性，修改了存储的值。

公式

公式可以应用于细胞。当细胞或公式细胞引用变化的细胞或范围时，将重新计算细胞值。

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

格式化

可以通过以下方式设置单元格式：

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

设置单元格式时，它将合并为应用到该区域中的任何现有单元格式。将合并任何非挂钩格式对介体者：

 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"

细胞类型

单元格类型指定渲染器和编辑器用于单元格。设置单元格值时，细胞类型还有助于显式转换。

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

可以定义自定义编辑器和渲染器。有关更多信息，请参见示例。

验证

数据验证可以在单元格上设置。有两种验证方式：严格和非刻板。当验证器严格时，如果单元格值未能通过验证，则不会由编辑器设置。

如果验证不严格，则可以在编辑期间设置该值，但在渲染时会显示验证错误。

尽管可以在单元格上设置严格的验证，但可以通过编程更改该值，但它将显示为验证错误。

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

地区和范围

区域是一种几何结构，例如：

 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

范围是一个也知道表的区域。范围可用于设置工作表的某些部分。

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

社区链接

• 使用Blazor Excel数据表更新数据库
• 使用OpenAi更新Blazor Excel工作表
• Microsoft Fabric和Glazor数据表