Spread.Sheets
AngularJSの使用
Spread.Sheets > 開発者の手引き > データの管理 > AngularJSの使用

Spread.SheetsはAngularJSをサポートします。

AngularJSをSpread.Sheetsで使用するには、次の手順を実行します。

  1.  Spread.Sheets AngularJSモジュールをアプリケーションのjsファイル（/scripts/interop/angular.gc.spread.sheets.xxx.js）に追加します。
  2.  gcspreadsheetsモジュールをアプリケーションのjsファイルに追加します。たとえば、「myApp」という名前のng-app属性によって作業範囲が示される場合は、次のようなコードをアプリケーション定義jsファイルに追加します。

    angular.module("myApp", ["gcspreadsheets", "module2","module3",...])

  3. HTMLページに、gc-spread-sheetsタグを追加します。 次に、シートを追加し、シートに列を追加します。 Spread、シート、または列に対する属性を設定できます。 次に、例を示します。
    JavaScript
    コードのコピー
    <gc-spread-sheets id="ss" style="width:100%;height:500px;border:1px solid gray">
         <worksheets>
             <worksheet frozen-column-count="1">
             </worksheet >
         </worksheets>
     </gc-spread-sheets>

Spread、Sheet、およびcolumnは、タグ階層における基本要素です。 これらの基本要素を設定することで、その他の要素も機能します。 主なタグ階層は次のとおりです。

JavaScript
コードのコピー
<gc-spread-sheets style="width:100%;height:500px;border:1px solid gray">
     <worksheets>
         <worksheet>
             <columns>
                 <column></column>
             </columns>
         </worksheet>
     </worksheets>
 </gc-spread-sheets>

要素の設定が単純型である場合、または単純な文字列として設定できる場合は、要素の属性として設定します。 単純型には、number、string、Boolean、enum、font、lineBorderなどがあります。

JavaScript
コードのコピー
<gc-spread-sheets style="width:100%;height:500px;border:1px solid gray">
     <worksheets>
         <worksheet>
             <default-style backcolor="#c6e0b4" font="large Meiryo" border="#8ea9db dashed"></default-style>
         </worksheet>
     </worksheets>
 </gc-spread-sheets>

要素の設定がオブジェクト型であり、単純な文字列として設定できない場合は、基本要素の子要素として設定します。 子要素は、別の子要素を持つこともできます。 次に、例を示します。

JavaScript
コードのコピー
<gc-spread-sheets style="width:100%;height:500px;border:1px solid gray">
     <worksheets>
         <worksheet>
             <columns>
                 <column width="100">
                    <default-style formatter="#,##0.00">
                         <number-validator comparisonoperator="GreaterThan" value1="0"></number-validator>
                    </default-style>                
                 </column>
             </columns>
         </worksheet>
     </worksheets>
 </gc-spread-sheets>

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

属性名では大文字と小文字は区別されず、単語間の区切りには「-」を使用できます。 たとえば、以下のコードはすべて同じ結果となります。

<column dataField="country"></column>
<column datafield="country"></column>
<column DATAFIELD="country"></column>
<column data-field="country"></column>
<column Data-Field="country"></column>

属性値には、"{{binding}}"を使用して、作業範囲のデータをバインドできます。 次に、例を示します。 この列では、列幅がcolumnWidthにバインドされています。

<column width={{columnWidth}} >

次に、ng-modelを使用してcolumnWidthをバインドするHTML input要素を示します。

Column Width: <input ng-model="columnWidth"  />

input要素に数値を入力すると、列幅が自動的にサイズ変更されます。

Spreadディレクティブ要素または属性を、要素のディレクティブに従っていない別の要素に追加しても、効果はありません。 HTMLタグで定義されている列は、並べ替え、挿入、または削除することはできません。 これらを行うと、値のバインドエラーとなります。

 

 

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