純乾貨分享： 如安在 React 框架中運用SpreadJS

2024年1月11日 246次阅读 来源: 葡萄城控件

作者：葡萄城控件
SpreadJS最好的功用之一就是能夠在差別的框架中運用它。本文將演示如安在簡樸的Web頁面中運用Babel JavaScript編譯器將SpreadJS與React疾速連繫。

第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="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(
            <div ref="spreadJs"  style={{width:'100%',height:'100%'}}>
            </div>);
    }

第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 純前端表格控件是基於 HTML5 的 JavaScript 電子錶格和網格功用控件，適用於.NET、Java 、Web應用順序、挪動端等多種平台的表格數據處理和類Excel功用的表格順序開闢。全中文操縱界面，零進修本錢！便於您在系統開闢過程當中，更安然的治理Excel 數據，更快速的完成海量數據交互，更輕易的舉行數據導出、導入、排序、過濾、增編削查、可視化及Excel 導入/導出等操縱。SpreadJS自面世以來，備受華為、中通、中國民航遨遊飛翔學院、中國安然 、中國能建、海潮等國內知名企業客戶喜愛。

    原文作者：葡萄城控件
    原文地址: https://segmentfault.com/a/1190000015004398
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞