SpreadJS控件Angular入门介绍

通过一些精简的步骤,帮助您发现如何在应用程序中拥有类似Excel电子表格的熟识感。同时展现SpreadJS Javascript控件在Angular环境中的潜力。

步骤

  1. 创建一个Angular应用程序 - 通过使用Angular 脚手架工具来创建一个Angular应用程序。 在命令行或终端运行以下命令,使用默认选项创建Angular应用程序。更多细节请参考Angular官网
    ng new sjs-angular-app --defaults
    cd sjs-angular-app
  2. 安装SpreadJS npm包 - 我们通过使用 @grapecity/spread-sheets-angular 来分发Angular SpreadJS 控件。 最主要的 @grapecity/spread-sheets 包是功能模块核心。在应用程序根目录运行下列命令来安装这些包的最新版本。
    npm install @grapecity/spread-sheets-angular @grapecity/spread-sheets
    //or if you are using yarn
    yarn add @grapecity/spread-sheets-angular @grapecity/spread-sheets
    
  3. 注册SpreadJS Angular模块- 打开 src\app\app.module.ts文件并用下列代码替换文件内容。除了标准模块之外,它还注册了SpreadJS模块。
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    
    import { AppComponent } from './app.component';
    import { SpreadSheetsModule } from '@grapecity/spread-sheets-angular';
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule, SpreadSheetsModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
  4. Add SpreadJS Angular Component to the application/ Initialize the SpreadSheet - Open src\app\app.component.ts and replace its content with the following code.
    import { Component } from '@angular/core';
    import * as GC from "@grapecity/spread-sheets";
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      title = 'sjs-angular-app';
      spread: GC.Spread.Sheets.Workbook;
      hostStyle = {
        width: '100%',
        height: '500px'
      };
    
      //Initialization
      workbookInit($event: any) {
        //initialize the spread
        this.spread = $event.spread;
      }
    }
  5. 添加SpreadJS的Angular模板到应用程序中 - 打开 src\app\app.component.html 并用应用以下代码
    <gc-spread-sheets [hostStyle]="hostStyle" (workbookInitialized)="workbookInit($event)">
    </gc-spread-sheets>
  6. 应用SpreadJS的css到应用程序中 - 打开angular.json and 并应用SpreadJS的CSS到全局styles节点中。
    "styles": [
        "src/styles.css",
        "node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
    ]

设置值和公式

步骤

  1. 使用 setValue 方法来给指定单元格设置值,使用 setFormula 方法来设置计算公式。
    workbookInit($event: any) {
      //initialize the spread
      this.spread = $event.spread;
      let spread = this.spread;
      let sheet = spread.getActiveSheet();
      //Setting Values - Text
      sheet.setValue(1, 1, "Setting Values");
      //Setting Values - Number 
      sheet.setValue(2, 1, "Number");
      sheet.setValue(2, 2, 23)
      sheet.setValue(3, 1, "Text");
      sheet.setValue(3, 2, "GrapeCity")
      sheet.setValue(4, 1, "Datetime");
      //Setting Values - DateTime
      sheet.getCell(4, 2).value(new Date(2020, 10, 7)).formatter("mm-dd-yyyy");
    }

设置样式

使用以下功能,为您的数据提供更有价值和更吸引人的外观。

步骤

  1. 在这一步,设置样式使得数据更具吸引力、更规范。

    workbookInit($event: any) {
      //initialize the spread
      this.spread = $event.spread;
      let spread = this.spread;
      let sheet = spread.getActiveSheet();
      //Setting Values - Text
      sheet.setValue(1, 1, "Setting Values");
      //Setting Values - Number 
      sheet.setValue(2, 1, "Number");
      sheet.setValue(2, 2, 23)
      sheet.setValue(3, 1, "Text");
      sheet.setValue(3, 2, "GrapeCity")
      sheet.setValue(4, 1, "Datetime");
      //Setting Values - DateTime
      sheet.getCell(4, 2).value(new Date(2020, 10, 7)).formatter("mm-dd-yyyy");
      //Setting style
      sheet.setColumnWidth(1, 200);
      sheet.setColumnWidth(2, 200);
      sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
      sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
      sheet.addSpan(1, 1, 1, 2);
      sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
        all: true
      });
      sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
        inside: true
      });
      sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
    }

绑定数据

探索如何轻松地绑定数据。

步骤

  1. 使用 getSheet 方法来获取您正在使用的表单。通过使用 "new GC.Spread.Sheets.Bindings.CellBindingSource(person);" 来添加单元格需要绑定的数据源。 之后使用 setBindingPath 方法来给指定表单区域的指定单元格绑定数据。最后使用setDataSource方法来给指定表单添加数据源。
    workbookInit($event: any) {
      //initialize the spread
      this.spread = $event.spread;
      let sheet = this.spread.getActiveSheet();
      var person = { name: 'Peter Winston', age: 25, gender: 'Male', address: { postcode: '10001' } };
      var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
      sheet.setBindingPath(2, 2, 'name');
      sheet.setBindingPath(3, 2, 'age');
      sheet.setBindingPath(4, 2, 'gender');
      sheet.setBindingPath(5, 2, 'address.postcode');
      sheet.setDataSource(source);
    }