在线天堂√,午夜免费成人视频,国产剧情无码

電子表格控件Spreadjs教程：如何在 React 中使用 SpreadJS

翻譯|使用教程|編輯：鮑佳佳|2020-09-30 11:55:28.610|閱讀 275 次

概述：SpreadJS支持React –一個(gè)JavaScript庫(kù)，開(kāi)發(fā)人員可以通過(guò)處理MVC框架的視圖層為Web應(yīng)用程序和移動(dòng)應(yīng)用程序構(gòu)建用戶界面。使用React，您可以在創(chuàng)建可重用組件和大型應(yīng)用程序時(shí)修改數(shù)據(jù)而無(wú)需重新加載頁(yè)面

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷售中 >>

相關(guān)鏈接：

SpreadJS 是一款基于 HTML5 的純前端電子表格控件，兼容 450 種以上的 Excel 公式，憑借其 “高性能、跨平臺(tái)、與 Excel 高度兼容”的產(chǎn)品特性，備受以華為、蘇寧易購(gòu)、天弘基金等為代表的企業(yè)用戶青睞。SpreadJS 為用戶帶來(lái)親切的 Excel 使用體驗(yàn)的同時(shí)，滿足 Web Excel 組件開(kāi)發(fā)、表格文檔協(xié)同編輯、數(shù)據(jù)填報(bào)、Excel 類報(bào)表設(shè)計(jì)等業(yè)務(wù)場(chǎng)景，極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。更多詳情信息文章教程點(diǎn)擊這里>>

點(diǎn)擊下載SpreadJS最新試用版

SpreadJS支持Vue----一個(gè)JavaScript框架，該框架為開(kāi)發(fā)人員提供了不同的工具，以幫助他們構(gòu)建復(fù)雜的用戶界面和Web應(yīng)用程序。

SpreadJS支持React –一個(gè)JavaScript庫(kù)，開(kāi)發(fā)人員可以通過(guò)處理MVC框架的視圖層為Web應(yīng)用程序和移動(dòng)應(yīng)用程序構(gòu)建用戶界面。

使用React，您可以在創(chuàng)建可重用組件和大型應(yīng)用程序時(shí)修改數(shù)據(jù)而無(wú)需重新加載頁(yè)面。

SpreadJS可以通過(guò)以下兩種方式與React一起使用：

使用節(jié)點(diǎn)包管理器
使用傳統(tǒng)HTML

使用節(jié)點(diǎn)包管理器

此方法涉及以下步驟：

創(chuàng)建一個(gè)React項(xiàng)目
打開(kāi)命令提示符窗口，然后鍵入以下命令：
```
npm install -g create-react-app
create-react-app quick-start
cd quick-start
npm start
```
完成后，將在目錄中的指定位置創(chuàng)建react項(xiàng)目。
在項(xiàng)目中安裝SpreadJS React模塊
接下來(lái)，您需要使用以下命令在項(xiàng)目中安裝@ grapecity / spread-sheets-react：

npm install @grapecity/spread-sheets-react

將SpreadJS CSS導(dǎo)入index.js文件
接下來(lái)，您需要使用以下代碼將SpreadJS CSS導(dǎo)入index.js文件中：

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

在React應(yīng)用程序中使用SpreadJS
現(xiàn)在，您可以根據(jù)需要修改App.js文件。刷新瀏覽器窗口時(shí)，更改將反映出來(lái)。例如，您可以使用下面給出的示例代碼：

                            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

使用傳統(tǒng)HTML

此方法涉及以下步驟：

下載React HTML模板
您可以使用鏈接//reactjs.org/docs/getting-started.html下載react HTML模板。
將SpreadJS和React-SpreadJS添加到HTML模板
添加對(duì)gc.spread.sheets.all。*。*。*。min.js，gc.SpreadJS。*。*。*。css和gc.spread.sheets.react。*。*。*。js 文件的引用在HTML模板中（即您的index.html文件）。
在React應(yīng)用程序中使用SpreadJS
現(xiàn)在，您可以在您的react應(yīng)用程序中使用SpreadJS。例如，您可以使用下面給出的示例代碼：

                            <!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8" />
     <title>Hello World</title>
     <script src="http://unpkg.com/react@16/umd/react.development.js"></script>
     <script src="http://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
     <script src="http://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是具有標(biāo)簽層次結(jié)構(gòu)的基本元素。其他元素通過(guò)設(shè)置來(lái)起作用。主要標(biāo)簽層次為：

今天的內(nèi)容就到這了，不要忘了在評(píng)論區(qū)留下的意見(jiàn)和建議！現(xiàn)電子表格控件SpreadJS正版授權(quán)限時(shí)優(yōu)惠！低至3490；企業(yè)版最高立減6000元。點(diǎn)擊了解更多優(yōu)惠！

標(biāo)簽：

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：

上一篇：WPF界面開(kāi)發(fā)工具DevExpress WPF使用教程：創(chuàng)建簡(jiǎn)單的未綁定3D圖表（第一部分）下一篇：Intellij Idea最新版本預(yù)告：全新的開(kāi)始界面，對(duì)密封類的全面支持等