SpreadJS支持React –一个JavaScript库，开发人员可以通过处理MVC框架的视图层为Web应用程序和移动应用程序构建用户界面。
使用React，您可以在创建可重用组件和大型应用程序时修改数据而无需重新加载页面
SpreadJS最新试用版
SpreadJS支持Vue—-一个JavaScript框架，该框架为开发人员提供了不同的工具，以帮助他们构建复杂的用户界面和Web应用程序。
SpreadJS支持React –一个JavaScript库，开发人员可以通过处理MVC框架的视图层为Web应用程序和移动应用程序构建用户界面。
使用React，您可以在创建可重用组件和大型应用程序时修改数据而无需重新加载页面。
SpreadJS可以通过以下两种方式与React一起使用：
- 使用节点包管理器
- 使用传统HTML
使用节点包管理器
此方法涉及以下步骤：
-
创建一个React项目
打开命令提示符窗口，然后键入以下命令：
npm install -g create-react-appcreate-react-app quick-startcd quick-startnpm start
完成后，将在目录中的指定位置创建react项目。
-
在项目中安装SpreadJS React模块
接下来，您需要使用以下命令在项目中安装@ grapecity / spread-sheets-react：
npm install @grapecity/spread-sheets-react
-
将SpreadJS CSS导入index.js文件
接下来，您需要使用以下代码将SpreadJS CSS导入index.js文件中：
import ‘@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css’;
-
在React应用程序中使用SpreadJS
现在，您可以根据需要修改App.js文件。刷新浏览器窗口时，更改将反映出来。例如，您可以使用下面给出的示例代码：
import React, { Component } from 'react';import { SpreadSheets, Worksheet, Column } from '@grapecity/spread-sheets-react';import GC from '@grapecity/spread-sheets';var SpreadJSKey = "xxx";GC.Spread.Sheets.LicenseKey = SpreadJSKey;class APP extends Component {constructor(props) {super(props);this.spreadBackColor = 'aliceblue';this.sheetName = 'Goods List';this.hostStyle ={width: '800px',height: '600px'};this.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' }];this.columnWidth = 100;}render() {return (<div><SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle}><Worksheet name={this.sheetName} dataSource={this.data}><Column dataField='Name' width={300}></Column><Column dataField='Category' width={this.columnWidth}></Column><Column dataField='Price' width={this.columnWidth}formatter="$#.00"></Column><Column dataField='Shopping Place' width={this.columnWidth}></Column></Worksheet></SpreadSheets></div>)}}export default APP
使用传统HTML
此方法涉及以下步骤：
-
下载React HTML模板
您可以使用链接https://reactjs.org/docs/getting-started.html下载react HTML模板。
-
将SpreadJS和React-SpreadJS添加到HTML模板
添加对gc.spread.sheets.all。*。*。*。min.js，gc.SpreadJS。*。*。*。css和gc.spread.sheets.react。*。*。*。js 文件的引用在HTML模板中（即您的index.html文件）。
-
在React应用程序中使用SpreadJS
现在，您可以在您的react应用程序中使用SpreadJS。例如，您可以使用下面给出的示例代码：
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script src="./lib/gc.spread.sheets.all.*.*.*.min.js"></script> <link rel="stylesheet" type="text/css" href="./lib/gc.spread.sheets.excel2013white.*.*.*.min.css"> <script src="./lib/gc.spread.sheets.react.*.*.*.js"></script></head><body><div id="root"></div><script type="text/babel">const {SpreadSheets, Worksheet, Column} = window.SpreadSheetsComponents;class App extends React.Component{ render(){ return( <div style={{width: '800px',height: '600px'}}> <SpreadSheets> <Worksheet name='first' <Column dataField="Name"/> </Worksheet> </SpreadSheets> </div> ) } } ReactDOM.render( <App/>, document.getElementById('root') );</script></body></html>
SpreadSheets，Worksheet和Column是具有标签层次结构的基本元素。其他元素通过设置来起作用。主要标签层次为：
<SpreadSheets>
<Worksheet>
<Column> </ Column>
…
</ Worksheet>
…
</ SpreadSheets>
今天的内容就到这了，不要忘了在评论区留下的意见和建议！现电子表格控件SpreadJS正版授权限时优惠！低至3490；企业版最高立减6000元。点击了解更多优惠！
标签：
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！