[{"id":"9ee488bd-35c2-4489-aa5b-1efa6efac1d5","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"2594f6ed-3643-4bdf-b479-db167f2389d5","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"28bd9972-dc8c-44bd-a227-bdee2db07de8","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"429c4bb1-b5e0-4ca0-832e-2294fefb29f0","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"43fd7d7b-26e1-4783-90db-065dd94d8b8f","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"8f5dceb8-6028-4a94-8579-356e325bced7","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"cb91c32e-c15b-4b59-a71e-df1400c95455","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"dd9d5605-aba9-475a-a5af-724886a745c7","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"d6aaa108-85d3-46e9-9425-178820ae51aa","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"d861382b-45ca-4929-9f14-9a0ddccf8dee","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"c21b1c98-aede-48f3-8754-74e5d4841115","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"794d293d-905d-409c-a832-41fb1de96145","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"411ef81a-13e5-46c5-8077-11af096f6c5e","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"2f9378e3-de01-4776-b976-f80d67f3c945","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"6ea3cc40-5fcd-4573-9371-1040e16c0d3d","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"5e3769b7-1589-46c7-8878-b0bab79523d9","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"1d18b9a5-7f65-4e0e-bca5-78c893da7706","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"3f46dfed-1c2f-4323-8f3a-98c4314d1e3e","tags":[{"name":"更新","color":"Coral","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"a2f84374-4a3f-4d22-96fd-765e9de495bf"}]},{"id":"ade08390-222e-4e66-bb79-b3629656d562","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"5822e729-010f-4f77-8540-8528249efdba","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"c8bfe2ef-8a93-49e1-b5a5-71457dd02ac2","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"e4c0e411-d4f1-40c5-9dad-60fecfc7e50a","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"d2f77d5c-f6fc-4409-abd2-87840184eea8","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"88504353-2871-4077-b4e2-25354463a1b2","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"3f64bda4-1e60-4467-a9c4-96907595b422","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"9236235f-08f4-425a-9c90-16ced1f94e9b","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"b71973da-acb4-4d6b-a13d-efc11abd318f","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"3f017839-47fb-4723-b7b8-39c8f82e01bc","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"0e93621f-b23f-4dd9-ae05-b9bf4b46ab98","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"7117448b-dd45-45c4-b4a2-8fa9c3a76f32","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"977b3287-3bec-445b-b616-d22639fba9d0","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"0066f4bb-2fad-4c84-8b8a-a9bbf545d3fc","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"44a49dfd-aa16-41e7-b4a9-15fb63977ef1","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"018f395f-75b5-4328-8e7c-3dcbbddff15e","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"c33c535a-9ee7-459c-9e83-8c68744baae9","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"2afa1444-9ca8-4140-ac86-1c5031bb223c","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"cb300e47-ba75-4d2f-bb8a-fbce8dfcac4d","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"ba6f3ccb-7834-4d97-81ed-23900c3ae530","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"8b8ffacc-af36-4541-8be7-75d0157feab8","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"c3f4bbfd-64b5-46d9-872a-7206e4c336c8","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"179e2451-6883-4c41-b885-6258fbc4312e","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"28d6016c-1146-47d0-83a3-a7d0bbea0981","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"637f4499-6bbc-4f7a-b166-261707ce8d87","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"69c4aad6-bd69-4420-a423-cea38fef2f61","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"e44471be-5af3-4554-a595-bb2a8ece8d2d","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"ac829ee2-a79a-4fda-934c-c9666f64ab51","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"754f12c6-2db4-4d1c-bf56-743440a0104b","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"a894f585-5fe2-4f92-ae00-73ef1e5cac00","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"1b48919e-fafb-4564-bdef-5d4968e1a54d","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"5401ec85-0b33-46f1-b2ab-0576a55f2122","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"a285b2c4-cc16-4344-8254-41fefba04c78","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"cc30ff0d-c105-4a3e-9e07-6e1da1925b24","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"73175d10-0918-4ab3-8222-94e5193279e7","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"0ed56908-a13a-4465-ad91-45b854fce1ed","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"534cc0b5-fac4-43b1-84c0-25a57da76633","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]},{"id":"34961a71-cbb8-40b4-9387-1c53db183b24","tags":[{"name":"新增","color":"DarkGreen","productId":"098be112-50ec-44e4-b746-6bc8bf76af97","links":null,"id":"9e117e35-984a-4c14-95ca-ef0ec7b9fb60"}]}]
        
(Showing Draft Content)

在 React 中使用 SpreadJS

SpreadJS支持React-一个JavaScript库,允许开发人员通过处理MVC框架的视图层为Web应用程序和移动应用程序构建用户界面。

使用React,您可以在创建可重用组件和大型应用程序时修改数据而无需重新加载页面。

SpreadJS可以通过以下两种方式与React一起使用:

使用Node包管理器

此方法涉及以下步骤:

  • 创建一个React项目 打开命令提示符窗口,然后键入以下命令: 完成后,将在目录中的指定位置创建react项目。有关如何创建React项目的更多信息,请参阅https://reactjs.org/docs/create-a-new-react-app.html
  • 在项目中安装SpreadJS React模块 接下来,您需要使用以下命令在项目中安装 @grapecity/spread-sheets-react:
  • 将SpreadJS CSS导入index.js文件 接下来,您需要使用以下代码将SpreadJS CSS导入index.js文件中:
  • 在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模板 您可以使用链接下载react HTML模板https://reactjs.org/docs/getting-started.html
  • 将SpreadJS和React-SpreadJS添加到HTML模板 添加引用 gc.spread.sheets.all....min.js, gc.SpreadJS....css and gc.spread.sheets.react...*.js 文件到 HTML 模板 (i.e. 你的 index.html 文件)。
  • 在React应用程序中使用SpreadJS 现在,您可以在React应用程序中使用SpreadJS。 例如,您可以使用下面给出的示例代码:
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8" />
     <title>Hello World</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>
     <script src="https://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是具有标签层次结构的基本元素。 其他元素通过设置来起作用。 主要标签层次为:

<SpreadSheets>
   <Worksheet>
      <Column>
      </Column>
      ...
   </Worksheet>
   ...
</SpreadSheets>

以下主题列出了标签指令。