如何在Angular CLI上使用SpreadJS

       使用Angular CLI可以帮助我们快速搭建一个angular2项目，那么SpreadJS(Spread.Sheets)如何与Angular CLI配合使用呢？下面让我们来看一下具体操作步骤：

1. 安装 Angular CLI globally

      npm install -g @angular/cli

2. 通过Angular CLI 创建一个新项目

      ng new spread-sheets-app

3. 添加Spread Sheets相关引用文件到工程中

      在src目录下创建名为lib的目录，然后将这些文件拷贝到目录中

        gc.spread.sheets.all.11.0.0.min.js

        GC.Spread.Sheets.d.ts

        gc.spread.sheets.excel2013darkGray.11.0.0.css

        gc.spread.sheets.angular.11.0.0.js

        gc.spread.sheets.angular.11.0.0.d.ts

        注意如果不将gc.spread.sheets.angular.*.*.*.d.ts and GC.Spread.Sheets.d.ts   这两个文件放在一个文件夹中，需要更新在 gc.spread.sheets.angular.*.*.*.d.ts 第一行的引用路径

4. 在.angular-cli.json 文件中配置Spread Sheets Javascript 和 CSS

{
  ...
  "apps": [
    {
      ...
      "styles": [
        "./lib/gc.spread.sheets.excel2013darkGray.11.0.0.css"
      ],
      "scripts": [
        "./lib/gc.spread.sheets.all.11.0.0.min.js"
      ],
      ...
    }
  ],
  ...
}

5. 在angular应用中使用Spread Sheets

修改app.module.ts 用来导入spread.sheets模块

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SpreadSheetsModule } from '../lib/gc.spread.sheets.angular.11.0.0';
import { AppComponent }  from './app.component';
@NgModule({
imports:      [ BrowserModule,  SpreadSheetsModule],
declarations: [ AppComponent ],
bootstrap:    [ AppComponent ]
})
export class AppModule { }

修改app.component.html 用来展示spread.sheets的界面

<gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle">
     <gc-worksheet [name]="sheetName" [dataSource]="data">
          <gc-column dataField="Name" width=300></gc-column>
          <gc-column dataField="Category" [width]=columnWidth></gc-column>
          <gc-column dataField="Price" [width]=columnWidth formatter="$ #.00"></gc-column>
          <gc-column dataField="Shopping Place" [width]=columnWidth></gc-column>
     </gc-worksheet>
</gc-spread-sheets>

修改app.component.ts用来组织spread.sheets的数据

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  spreadBackColor = 'aliceblue';
  sheetName = 'Goods List';
  hostStyle = {
      width: '800px',
      height: '600px'
  };
  data = [
    {Name: 'Apple', Category: 'Fruit', Price: 1, 'Shopping Place': 'Wal-Mart'},
    {Name: 'Potato', Category: 'Fruit', Price: 2.01, 'Shopping Place': 'Other'},
    {Name: 'Tomato', Category: 'Vegetable', Price: 3.21, 'Shopping Place': 'Other'},
    {Name: 'Sandwich', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart'},
    {Name: 'Hamburger', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart'},
    {Name: 'Grape', Category: 'Fruit', Price: 4, 'Shopping Place': 'Sun Store'}
  ];
  columnWidth = 100;
}

6. 创建和运行

      ng serve

7. 查看运行结果

以上就是如何在Angular CLI上使用SpreadJS的相关内容。

如果您对本产品感兴趣，请关注产品官网：/developer/spreadjs