亚洲伦理在线,国产精品自产拍在,日本一级电影0

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

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

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

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

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

點擊下載SpreadJS最新試用版

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

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

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

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

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

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

此方法涉及以下步驟：

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

npm install @grapecity/spread-sheets-react

將SpreadJS CSS導入index.js文件
接下來，您需要使用以下代碼將SpreadJS CSS導入index.js文件中：

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

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

                            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模板
添加對gc.spread.sheets.all。*。*。*。min.js，gc.SpreadJS。*。*。*。css和gc.spread.sheets.react。*。*。*。js 文件的引用在HTML模板中（即您的index.html文件）。
在React應用程序中使用SpreadJS
現(xiàn)在，您可以在您的react應用程序中使用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是具有標簽層次結(jié)構(gòu)的基本元素。其他元素通過設置來起作用。主要標簽層次為：

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

標簽：

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

文章轉(zhuǎn)載自：

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