SpreadJS控件React入门介绍

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

步骤

  1. 创建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
    
  2. 安装SpreadJS npm包 - 我们通过使用@grapecity/spread-sheets-react 来分发React SpreadJS 控件。 最主要的@grapecity/spread-sheets 包是功能模块核心。在应用程序根目录运行下列命令来安装这些包的最新版本。
    npm install @grapecity/spread-sheets-react @grapecity/spread-sheets
    //or if you use yarn
    yarn add @grapecity/spread-sheets-react @grapecity/spread-sheets
    
  3. 在应用程序内添加SpreadJS React控件/初始化SpreadJS电子表格 - 打开src\app\app.module.ts并用下列代码替换文件内容。除了标准模块之外,它还注册了SpreadJS模块。
    import * as React from 'react';
    import * as GC from '@grapecity/spread-sheets';
    import { SpreadSheets } from '@grapecity/spread-sheets-react';
    import '../node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';
    
    class App extends React.Component {
      constructor(props) {
        super(props);
        this.hostStyle = {
          width: '100%',
          height: '600px'
        };
      }
      render() {
        return (
          <div>
            <SpreadSheets hostStyle={this.hostStyle} workbookInitialized={spread => this.initSpread(spread)}>
            </SpreadSheets>
          </div>
        )
      }
      initSpread(spread) {
    
      }
    }
    
    export default App;

设置值和公式

步骤

  1. 使用 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");
    }

设置样式

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

步骤

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

    initWorkbook: 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);
    }

绑定数据

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

步骤

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