純乾貨分享： 如何在 React 框架中使用SpreadJS

77rou發表於2018-05-25
React框架JS

第1步：設定HTML5頁面

首先，我們需要在頁面中新增對React的引用： 

 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>SpreadJS React Demo</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> </head> </html>

在這個頁面中，我們將使用Babel的預編譯版本（稱為babel-standalone），因此我們也會新增一個對此的引用： 

<script src=""></script>

最後，新增對Spread.Sheets的引用： 

 <script src=""></script> <link rel="stylesheet" type="text/css" href="">

在我們編寫任何指令碼之前，我們需要定義一個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(
            <div ref="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. <App/>, document.getElementById('root')
    );



這就是使用React將Spread.Sheets新增到HTML頁面所需的全部內容。這只是React和Spread.Sheets的基本使用，但可以輕鬆擴充套件。

SpreadJS下載連結：

SpreadJS官網連結：http://www.grapecity.com.cn/developer/spreadjs

關於SpreadJS前端表格控制元件

SpreadJS 純前端表格控制元件是基於 HTML5 的 JavaScript 電子表格和網格功能控制元件，適用於.NET、Java 、Web應用程式、移動端等多種平臺的表格資料處理和類Excel功能的表格程式開發。全中文操作介面，零學習成本！便於您在系統開發過程中，更安全的管理Excel 資料，更快捷的完成海量資料互動，更方便的進行資料匯出、匯入、排序、過濾、增刪改查、視覺化及Excel 匯入/匯出等操作。SpreadJS自面世以來，備受華為、中通、中國民航飛行學院、中國平安 、中國能建、浪潮等國內知名企業客戶青睞。

相關文章