React | 快速开始 | SpreadJS JavaScript 学习指南

SpreadJS控件React入门介绍

该介绍帮助您发现将类似Excel的电子表格的所有功能集成到您的React应用程序中是多么容易。在下面您能找到初始化最专业的电子表格所需的所有步骤。

步骤

创建React应用程序 - 您可以使用React应用程序工具来帮助您创建一个React应用程序。在命令行或终端运行以下命令，使用默认选项创建React应用程序。更多细节，请参考React官网。
```
npm init react-app sjs-react-app
//or if you are using yarn
yarn create react-app sjs-react-app
cd sjs-react-app
```
安装SpreadJS npm包 - 我们通过使用@grapecity-software/spread-sheets-react 来分发React SpreadJS 控件。最主要的@grapecity-software/spread-sheets 包是功能模块核心。在应用程序根目录运行下列命令来安装这些包的最新版本。
```
npm install @grapecity-software/spread-sheets-react @grapecity-software/spread-sheets
//or if you use yarn
yarn add @grapecity-software/spread-sheets-react @grapecity-software/spread-sheets
```

在应用程序内添加SpreadJS React控件/初始化SpreadJS电子表格 - 打开src\app\app.module.ts并用下列代码替换文件内容。除了标准模块之外，它还注册了SpreadJS模块。

import './App.css';
import * as GC from '@grapecity-software/spread-sheets';
import { SpreadSheets, Worksheet } from '@grapecity-software/spread-sheets-react';
import '../node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

function App() {
  let hostStyle = {
    width: '100%',
    height: '600px',
    border: '1px solid darkgray'
  }

  let initSpread = function (spread) {
    let sheet = spread.getActiveSheet();
    sheet.getCell(0, 0).vAlign(GC.Spread.Sheets.VerticalAlign.center).value('Hello SpreadJS!');
  }

  return (
    <div className="App">
      <SpreadSheets workbookInitialized={spread => initSpread(spread)}  hostStyle={hostStyle}>
        <Worksheet></Worksheet>
      </SpreadSheets>
    </div>
  );
}

export default App;

设置值和公式

步骤

使用 setValue 方法来给指定单元格设置值，使用 setFormula 方法来设置计算公式。

initSpread: function (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");
}

设置样式

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

步骤

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

initSpread: function (spread) {
   //initialize the 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);
}

绑定数据

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

步骤

使用 getSheet 方法来获取您正在使用的表单。通过使用 "new GC.Spread.Sheets.Bindings.CellBindingSource(person);" 来添加单元格需要绑定的数据源。之后使用 setBindingPath 方法来给指定表单区域的指定单元格绑定数据。最后使用setDataSource方法来给指定表单添加数据源。

initSpread: function (spread) {
   var sheet = spread.getSheet(0);
   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);
}