BlazorDatasheet

Blazordatasheet

ส่วนประกอบแผ่นข้อมูลอย่างง่ายสำหรับการแก้ไขข้อมูลตาราง

คุณสมบัติ

• การแก้ไขข้อมูล
  • Built in Editors รวมถึงข้อความ, วันที่, เลือก, บูลีน, พื้นที่ข้อความ, enum
  • เพิ่มตัวแก้ไขที่กำหนดเองสำหรับประเภทข้อมูลใด ๆ
• การจัดรูปแบบตามเงื่อนไข
• การตรวจสอบข้อมูล
• สูตร
• การนำทางแป้นพิมพ์
• คัดลอกและวางจากข้อมูลแบบตาราง
• การจำลองเสมือน - จัดการเซลล์จำนวนมากพร้อมกันทั้งในแถวและ COLS

ตัวอย่าง: https://anmcgrath.github.io/blazordatasheet/

เริ่มต้น

ติดตั้งแพ็คเกจ NuGet

dotnet add package BlazorDatasheet

กำหนดค่า 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 DATASSHEET ให้ส่วนประกอบ แผ่นข้อมูล 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 ถูกกำหนดให้กับเซลล์

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 และแผ่นข้อมูล Blazor