首先,我们需要在页面中添加对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欧洲杯足彩官网链接:
关于spreadjs前端表格控件
spreadjs 纯前端表格控件是基于 html5 的 javascript 电子表格和网格功能控件,适用于.net、java 、web应用程序、移动端等多种平台的表格数据处理和类excel功能的表格程序开发。全中文操作界面,零学习成本!便于您在系统开发过程中,更安全的管理excel 数据,更快捷的完成海量数据交互,更方便的进行数据导出、导入、排序、过滤、增删改查、可视化及excel 导入/导出等操作。spreadjs自面世以来,备受华为、中通、中国民航飞行学院、中国平安 、中国能建、浪潮等国内知名企业客户青睐。