在React、Vue 和 Angular 中使用SpreadJS

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

Angular简介

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVW（Model-View-Whatever）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。
AngularJS 通过指令扩展了 HTML，且通过表达式绑定数据到 HTML。
AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

React简介

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

Vue简介

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

在Angular中使用SpreadJS

前置准备：

1.安装npm包管理器

2.安装git(可选)

准备工作完成后我们开始进入正题：

Angular2搭建：

首先，搭建angular2的模板quickstart：

使用git，直接从github上进行下载

          git clone https://github.com/angular/quickstart.git

          cd quickstart

          npm install

          npm start

这样一个简单的angular2工程的搭建工作就基本完成了。

接下来，我们需要将SpreadJS的相关文件加入到工程中：

进入工程，在src/app目录下创建一个名叫lib的目录，然后将以下文件拷贝至目录中

         gc.spread.sheets.all.*.*.*.min.js

         GC.Spread.Sheets.d.ts

         gc.spread.sheets.*.*.*.css

         gc.spread.sheets.angular2.*.*.*.js

         gc.spread.sheets.angular2.*.*.*.d.ts

ps：如果你没有将gc.spread.sheets.angular2....d.ts与GC.Spread.Sheets.d.ts放在一个目录内，那么您需要在gc.spread.sheets.angular2....d.ts的第一行加入引用路径，例如：

<reference path="GC.Spread.Sheets.d.ts" />

接着，在index.html中引用gc.spread.sheets.all....min.js和gc.spread.sheets....css这两个文件，这样引入的工作就算告一段落了，接下来就是如果在AngularJS2项目中使用SpreadJS。

Angular2集成SpreadJS模板：

首先，修改app.module.ts文件，如下所示：

       import { NgModule } from '@angular/core';

       import { BrowserModule } from '@angular/platform-browser';

       import { SpreadSheetsModule } from './lib/gc.spread.sheets.angular2.*.*.*';

       import { AppComponent } from './app.component';

       @NgModule({

           imports: [ BrowserModule, SpreadSheetsModule],

           declarations: [ AppComponent ],

           bootstrap: [ AppComponent ]

       })

       export class AppModule { }

上面操作是为了引入SpreadJS的相关module到工程中。

之后，修改app.component.ts文件，如下所示：

      import {Component} from '@angular/core';

      @Component({

          selector: 'my-app',

          template: `<gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle">

          <gc-worksheet [name]="sheetName" [dataSource]="data">

          <gc-column dataField="Name" width=300></gc-column>

          <gc-column dataField="Category" [width]=columnWidth></gc-column>

          <gc-column dataField="Price" [width]=columnWidth formatter="$ #.00"></gc-column>

          <gc-column dataField="Shopping Place" [width]=columnWidth></gc-column>

          </gc-worksheet>

          </gc-spread-sheets>`，

     })

     export class AppComponent {

        spreadBackColor = 'aliceblue';

         sheetName = 'Goods List';

         hostStyle = {

             width: '800px',

             height: '600px'

         };

         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'}

         ];

         columnWidth = 100;

     }

上面操作是构建了一个SpreadJS的模板，然后通过对象绑定的方式将SpreadJS的一些属性绑定到模板上。

做完以上步骤后在工程路径下使用命令行输入“npm start”命令重新启动，大功告成，然后就能看到spreadjs呈现在你的页面中了。

SpreadJS模板：

虽然，我们完成了Angular2与SpreadJS的集成，但是相信大家并不是很清楚SpreadJS模板以及其绑定机制。那么下面将对SpreadJS的template进行一个讲解：

SpreadJS的template中分为三个标签gc-spread-sheets, gc-worksheet and gc-column.分别代表着spreadjs的工作簿，工作表和列三个级别。我们知道，Angular2是通过数据源与模板的双向绑定来完成页面的绘制以及数据呈现的，所以这三个标签上面绑定的属性分别代表工作簿，工作表，列的属性。也正是因为这样，在Angular2中SpreadJS是无法操纵单元格的（没有单元格级别的标签），最小的单位是操纵一个列。标签之间的层级结构与HTML是一致的，像如下这样：

       <gc-spread-sheets>

            <gc-worksheet>

                <gc-column></gc-column>

                ...

            </gc-worksheet>

            ...

      </gc-spread-sheets>

绑定属性和事件：

在spreadjs的标签上绑定属性和事件与angular2的绑定属性事件的方法是一致的，举个例子：

gc-worksheet标签中存在name属性，可以设置sheet名称，在绑定属性时有以下方法：

<gc-worksheet [name]="'mysheet'"> 或 <gc-worksheet bind-name="'mysheet'">：在这里[属性名称]与bind-属性名称是一样的，都是代表绑定属性，如果属性类型不是数字或者字符串需要用双引号将属性引起来，里面加入单引号是直接进行赋值，为什么使用单引号的原因下面会有说明，上面的例子就是讲sheet的name设置为mysheet。
<gc-worksheet [name]="sheetName"> export class AppComponent {sheetName = 'mysheet';}：这个例子更符合MVVM的开发模式，不是直接给属性赋值而是绑定一个数据模型，首先与上个例子的区别是双引号中直接填写数据模型的名称。这也就是上个例子为什么使用单引号的原因，单引号引入的会被当做值，不用单引号angular会认为是表达式的名称，会根据名称去找对应的表达式的值。

绑定事件：

angular2通过括号来完成事件绑定，spreadjs同样支持这样做将事件绑定到spreadjs的标签中，像这样：

@Component({

      selector: 'my-app',

      template: `<gc-spread-sheets (workbookInitialized)="workbookInit($event)">

                        </gc-spread-sheets>`,

   })

   export class AppComponent {

   workbookInit (args) {

   //do something

       }

   }

gc-spread-sheets：
图片描述

gc-worksheet
图片描述

gc-column ：
图片描述

以上就是所支持的属性，再次强调在Angular2中SpreadJS最大精度只能进行到列级别的设置，这与Angular2的绑定机制有关，需要特别注意。
如果要设置单元格的属性和方法，还是需要通过普通JS的方式来实现。例如：我们下一期会提到一个叫做workbookInitialized的事件，在这个事件在workbook初始化完成后自动触发，在这个事件中我们可以获取到spread对象，那么我们就可以通过spread对象按照通常的方式获得sheet对象继而获得cell对象然后对其进行操作，来完成单元格级别的设置。

绑定事件

首先angular2绑定事件的方法是在template中使用"()"设置绑定事件，然后在导出模块中编写事件触发的方法，像这样：

    @Component({
    
                selector: 'my-app',
    
                template: `<gc-spread-sheets (workbookInitialized)="workbookInit($event)" >
    
                </gc-spread-sheets>`,
    
    })
    
    export class AppComponent { 
    
                 workbookInit (args) {
    
                          //do something
    
                 }
    
    }

其中$event为angular2的关键字，类似于window.event，spreadjs对$event做了一些扩展，如果需要在事件中对spread做相关的处理，那么可以传入$event来获取事件触发的默认参数，例如：

workbookInitialized事件中传入$event参数后，在可以通过args.spread获取spread的实例对象。这里对workbookInitialized事件做一个说明，workbookInitialized中可以通过args.spread获取spread对象，通过spread对象理论上我们可以在这里做任何spreadjs功能的事情，这里的事情是不通过angular2来进行处理的。这里可以做一些angular2中不支持绑定的spreadjs功能，例如：

angular2支持的spreadjs属性中没有筛选功能，那么如果我们要在angular2的工程中实现一个列的筛选功能我们应该怎么做呢？以上面的代码为例，我们可以在workbookInit方法中使用:

    var spread = args.spread;
    
    var sheet = spread.getActiveSheet();
    
    var columncount = sheet.getColumnCount();
    
    var range = new GC.Spread.Sheets.Range(-1, 0, -1, columncount );
    
    var rowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(range);
    
    sheet.rowFilter(rowFilter);

这样就完成了在列上面增加绑定的功能。
图片描述

需要注意的是，所有的事件都是绑定在gc-spread-sheets 标签上的，绑定在其他标签上是无效的，这点请注意。

以上就是如何用angular2构建SpreadJS项目的全部内容，相信大家通过第一篇的基础搭建，再参考第二遍的属性与第三篇的事件文档后，可以心中期望的内容通过SpreadJS构建出来。

在React中使用SpreadJS

第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 的基本使用，但可以轻松扩展。

在Vue中使用SpreadJS

SpreadJS可以通过以下两种方式与Vue一起使用：

使用Nuget Package Manager(NPM)
使用传统HTML

使用Nuget Package Manager(NPM)

此方法包括以下步骤：

1、创建一个Vue项目

打开命令提示符窗口并键入以下命令，以便使用vue init webpack创建一个简单的Vue项目。

    $ npm install --global vue-cli
    # create a new project using the "webpack" template
    $ vue init webpack my-project
    # install dependencies and go!
    $ cd my-project
    $ npm run dev

完成后，将在目录中的指定位置创建Vue项目。有关如何创建Vue项目的更多信息，请参阅https://vuejs.org/v2/guide/in...。

2、在项目中导入SpreadJS Vue模块

接下来，您需要使用以下命令在项目中安装 @ grapecity / spread-sheets-vue：

    $ npm install @ grapecity / spread-sheets-vue

3、在Vue应用程序中使用SpreadJS

现在，您可以根据您的要求修改App.vue文件。刷新浏览器窗口时将反映更改。例如，您可以使用下面给出的示例代码：

    <template>
      <div>
          <gc-spread-sheets
            :hostClass='hostClass'
          >
            <gc-worksheet
              :dataSource="dataTable"
              :autoGenerateColumns = 'autoGenerateColumns'
            >
              <gc-column
                :width="width"
                :dataField="'price'"
                :visible = 'visible'
                :formatter = 'formatter'
                :resizable = 'resizable'
              ></gc-column>
            </gc-worksheet>
          </gc-spread-sheets>
      </div>
    </template>
    <script>
      import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'
      import  '@grapecity/spread-sheets-vue'
      export default {
        data(){
          return {
            hostClass:'spread-host',
            autoGenerateColumns:true,
            width:300,
            visible:true,
            resizable:true,
            formatter:"$ #.00"
          }
        },
        computed:{
          dataTable(){
            let dataTable = [];
            for (let i = 0; i < 42; i++) {
              dataTable.push({price: i + 0.56})
            }
            return dataTable
          }
        }
      }
    </script>
    <style scoped>
    .spread-host {
        width: 500px;
        height: 600px;
    }
    </style>

使用传统HTML

此方法包括以下步骤：

1、创建一个HTML页面

作为第一步，您需要创建一个HTML页面。

2、将SpreadJS和Vue-Spread.Sheets添加到HTML模板

添加对gc.spread.sheets.all。。。。min.js，gc.spread.sheets。。。。css和gc.spread.sheets.vue。。。*的引用。 HTML模板中的js文件（即index.html文件）。

3、在Vue应用程序中使用SpreadJS

现在，您可以在Vue应用程序中使用SpreadJS。例如，您可以使用下面给出的示例代码：

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello SpreadJS Vue</title>
        <link rel="stylesheet" href="lib/gc.spread.sheets.excel2016colorful.0.0.0.css" type="text/css"/>
        <style>
            #app{
                width: 100%;
                height:100%;
            }
            .vue-demo{
                width: 800px;
                height:400px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
    <div id="app">
     <app></app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="lib/gc.spread.sheets.all.0.0.0.js"></script>
    <script src="lib/gc.spread.sheets.vue.js"></script>
    <script type="text/x-template" id="app-template">
         <div>
            <gc-spread-sheets
              v-bind:hostClass='hostClass'
              @workbookInitialized='spreadInitHandle'
            >
                <gc-worksheet  >
                </gc-worksheet>
            </gc-spread-sheets>
         </div>
    </script>
    <script type="text/javascript">
        window.onload = function () {
            Vue.component('app', {
                template: '#app-template',
                data:function () {
                    return {
                        hostClass: "vue-demo"
                    }
                },
                methods: {
                    spreadInitHandle: function (spread) {
                        window.mySpread = spread;
                        console.log('now you can also get spread from window');
                    }
                }
            });
            new Vue({
                el:"#app",
            })
        }
    </script>
    </body>
    </html>

SpreadJS 中的 SpreadSheets，Worksheet和Column是具有标记层次结构的基本元素。其他元素通过设置它们来工作。主标记层次结构是：

    <gc-spread-sheets> 
        <gc-worksheet> 
            <gc-column> </gc-column> 
            ... 
        </gc-worksheet> 
        ... 
    </gc-spread-sheets>

本文是由葡萄城技术开发团队发布，转载请注明出处：葡萄城官网

了解纯前端控件集，请前往 WijmoJS全面支持Angular、React和Vue的全功能控件集

了解可嵌入您系统的在线Excel，请前往 SpreadJS纯前端表格控件

在React、Vue 和 Angular 中使用SpreadJS

Angular简介

React简介

Vue简介

在Angular中使用SpreadJS

绑定事件

在React中使用SpreadJS

在Vue中使用SpreadJS

葡萄城技术团队

引用和评论

湖南引力：低代码助力实现智慧养老管理系统

100个React最佳实践小技巧

前端开发工具

开发插件集合

2024最全ECharts 实战大全（速记版+资源）

一些react使用小技巧（中）

一些react使用小技巧（下）