BlazorDatasheet
1.0.0
表形式データを編集するための単純なデータシートコンポーネント。
デモ：https：//anmcgrath.github.io/blazordatasheet/
dotnet add package BlazorDatasheetプログラムでは、必要なサービスを追加します。
builder . Services . AddBlazorDatasheet ( ) ; _layout.cshtmlまたはindex.html add
<link href="_content/BlazorDatasheet/sheet-styles.css" rel="stylesheet"/>
そして
<script src="_content/BlazorDatasheet/blazor-datasheet.js" type="text/javascript"></script>
Blazor Datasheetは、シートを受け入れるデータシートBlazorコンポーネントを提供します。
シートは、データシートのデータと構成を保持します。データはセルごとに設定されているか、オブジェクトのリストに基づいてデータシートを作成するObjeditorBuilderを使用して構築できます。
次のコードには、空の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タイプがセルに割り当てられます。
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カスタムエディターとレンダラーを定義できます。詳細については、例を参照してください。
データの検証は、セル/範囲で設定できます。検証には2つのモードがあります。厳格と非厳格です。バリデーターが厳格な場合、検証に失敗した場合、セル値はエディターによって設定されません。
検証が厳格でない場合、編集中に値を設定できますが、レンダリング時に検証エラーが表示されます。
厳密な検証はセルに設定される場合がありますが、値はプログラムで変更できますが、検証エラーとして表示されます。
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 ) ;
