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數據表