久久99久久久久,午夜免费电影,日韩成人成色

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

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

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

相關鏈接：

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

點擊下載SpreadJS最新試用版

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

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

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

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

使用節點包管理器
使用傳統HTML

使用節點包管理器

此方法涉及以下步驟：

創建一個React項目
打開命令提示符窗口，然后鍵入以下命令：
```
npm install -g create-react-app
create-react-app quick-start
cd quick-start
npm start
```
完成后，將在目錄中的指定位置創建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
現在，您可以根據需要修改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

使用傳統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
現在，您可以在您的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是具有標簽層次結構的基本元素。其他元素通過設置來起作用。主要標簽層次為：

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

標簽：

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

文章轉載自：

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