Spread.Sheets
Vue.jsの使用
Spread.Sheets > 開発者の手引き > JavaScriptフレームワークの使用 > Vue.jsの使用

Spread.Sheetsでは、JavaScriptライブラリの1つであるVue.jsがサポートされます。Vue.jsは、開発者に複雑なユーザーインターフェイスおよびWebアプリケーションを構築するためにツールを提供します。

Spread.Sheetsでは、次の2つの方法でVue.jsを使用できます。

  1. Nugetパッケージマネージャーの使用
  2. 従来のHTMLの使用

Nugetパッケージマネージャーの使用

この方法には、次の手順があります。

  1. Vue.jsプロジェクトの作成

    vue init webpackを使用してVue.jsプロジェクトを作成するには、コマンドプロンプトウィンドウを開き、次のコマンドを入力します。

     $ npm install --global vue-cli

    # webpackテンプレートを使用して新しいプロジェクトを作成します。
    $ vue init webpack my-project

    # 依存関係のファイルをインストールしてプロジェクトを実行します。
    $ cd my-project
    $ npm run dev                    

    コマンドを実行すると、ディレクトリ内の指定の場所にVue.jsプロジェクトが作成されます。Vue.jsプロジェクトの詳しい作成方法については、https://jp.vuejs.org/v2/guide/installation.htmlを参照してください。

  2. Spread.Sheets Vue.jsモジュールのプロジェクトへのインポート

    次に、プロジェクトに@grapecity/spread-sheets-vueをインストールする必要があります。これには、次のコマンドを使用します。

    $ npm install @grapecity/spread-sheets-vue

  3. Vue.jsアプリケーションでのSpread.Sheetsの使用

    これで、必要に応じてApp.vueファイルを修正できるようになりました。ブラウザウィンドウを更新すると、変更が反映されます。例として、次のサンプルコードを使用します。

    JavaScript
    コードのコピー

    <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. HTMLテンプレートへのSpread.SheetsおよびVue-Spread.Sheetsの追加

    gc.spread.sheets.all.xx.x.x.min.js、gc.spread.sheets.excel2016colorful.xx.x.x.css、およびgc.spread.sheets.vue.min.jsファイルへの参照を、HTMLテンプレート（index.htmlファイル）に追加します。

  3. Vue.jsアプリケーションでのSpread.Sheetsの使用

    これで、Spread.SheetsをVue.jsアプリケーション内で使用できるようになりました。例として、次のサンプルコードを使用します。

    JavaScript
    コードのコピー

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Hello SpreadJS Vue.js</title>
        <link rel="stylesheet" href="lib/gc.spread.sheets.excel2016colorful.xx.x.x.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.xx.x.x.min.js"></script>
    <script src="lib/gc.spread.sheets.vue.min.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>                   

SpreadSheets、Worksheet、およびColumnは、タグ階層での基本要素です。他の要素は、それぞれ設定して使用します。主なタグ階層は次のとおりです。

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

以下の各トピックでは、さまざまな要素（ディレクティブ）について説明します。

 

 

© 2016-2018, GrapeCity inc. All rights reserved.