本帖最后由 Derrick.Jiao 于 2022-5-5 09:52 编辑
修改官网示例代码如下
修改 app.jsx: 「其余不变」
- import * as React from 'react';
- import * as ReactDOM from 'react-dom';
- import GC from '@grapecity/spread-sheets';
- import '@grapecity/spread-sheets-resources-zh';
- GC.Spread.Common.CultureManager.culture("zh-cn");
- import {SpreadSheets, Worksheet, Column} from '@grapecity/spread-sheets-react';
- import { getData } from './data';
- import './styles.css';
- const Component = React.Component;
- function _getElementById(id) {
- return document.getElementById(id);
- }
- class App extends Component {
- constructor(props) {
- super(props);
- this.spread = null;
- this.autoGenerateColumns = false;
- }
- render() {
- return (
- <div class="sample-tutorial">
- <div class="sample-spreadsheets groupAppearanceSs">
- <SpreadSheets workbookInitialized={spread => this.initSpread(spread)}>
- <Worksheet></Worksheet>
- </SpreadSheets>
- </div>
- </div>
- );
- }
- initSpread(spread) {
- this.spread = spread;
- spread.fromJSON(getData()[0]);
- spread.options.scrollByPixel = true
- let sheet = spread.getSheet(0);
- sheet.suspendPaint();
- sheet.rowOutlines.group(3, 4);
- sheet.rowOutlines.group(8, 3);
- sheet.rowOutlines.group(12, 2);
- sheet.rowOutlines.group(15, 3);
- sheet.rowOutlines.group(3, 18);
- sheet.columnOutlines.group(1, 4);
- sheet.columnOutlines.group(6, 18);
- sheet.resumePaint();
- }
- }
- ReactDOM.render(<App/>, _getElementById('app'));
复制代码
|