首先，我们需要在页面中添加对react的引用：
<html>
<head>
<meta charset="utf-8" />
<title>spreadjs react demotitle>
<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>
head>
html>
在这个页面中，我们将使用babel的预编译版本（称为babel-standalone），因此我们也会添加一个对此的引用：
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js">script>最后，添加对spread.sheets的引用：
<script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.11.0.0.min.js">script>
<link rel="stylesheet" type="text/css" href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.11.0.0.css">在我们编写任何脚本之前，我们需要定义一个div元素来包含spread实例。我们称之为“root”。
<div id="root">div>
第2步：为spread.sheets创建一个react类
接下来，在页面中添加一个脚本元素。我们将把所有的代码放在这里：
<script type="text/babel">script>然后，为spread.sheets定义一个react组件，以便我们可以定义一个扩展react.component的类：
class reactspreadjs extends react.component{
}
该类需要在其中定义componentdidmount和render函数。componentdidmount函数在组件被挂载后立即被调用，所以我们用它来初始化spread实例：
componentdidmount() {
//in the didmount life cycle, we initialize spread sheet instance, and the host is defined in the component template.
let spread = new gc.spread.sheets.workbook(this.refs.spreadjs, {sheetcount: 3});
if(this.props.workbookinitialized){
this.props.workbookinitialized(spread);
}
}
接下来，在渲染函数中定义spread.sheets dom元素：
render() {
//define the spread.sheets dom template
return(
"spreadjs" style={{width:'100%',height:'100%'}}>
);
}
第3步：为组件创建一个应用程序类
首先，通过app类定义应用程序react组件：
//define the application react component.
class app extends react.component{
}
接下来，添加一个您将调用reactspreadjs组件的渲染函数：
render(){
//in the root component, it include one reactspreadjs component.
return(
<div style={{width:'800px',height:'600px'}}>
<reactspreadjs workbookinitialized = {(spread)=>{console.log(spread)}}>
reactspreadjs>
div>
)
}
要完成脚本，请告诉react通过使用reactdom.render来初始化应用程序：
reactdom.render(
//main entry, initialize application react component.
,
document.getelementbyid('root')
);
这就是使用react将spread.sheets添加到html页面所需的全部内容。这只是react和spread.sheets的基本使用，但可以轻松扩展。
spreadjs下载链接：
spreadjs凯发k8国际娱乐官网入口官网链接：
关于spreadjs前端表格控件
spreadjs 纯前端表格控件是基于 html5 的 javascript 电子表格和网格功能控件，适用于.net、java 、web应用程序、移动端等多种平台的表格数据处理和类excel功能的表格程序开发。全中文操作界面，零学习成本！便于您在系统开发过程中，更安全的管理excel 数据，更快捷的完成海量数据交互，更方便的进行数据导出、导入、排序、过滤、增删改查、可视化及excel 导入/导出等操作。spreadjs自面世以来，备受华为、中通、中国民航飞行学院、中国平安 、中国能建、浪潮等国内知名企业客户青睐。
您还没有登录,请您登录后再发表评论