Spread.Sheets > 開発者の手引き > データの管理 > AngularJSの使用 |
Spread.SheetsはAngularJSをサポートします。
AngularJSをSpread.Sheetsで使用するには、次の手順を実行します。
angular.module("myApp", ["gcspreadsheets", "module2","module3",...])
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タグで定義されている列は、並べ替え、挿入、または削除することはできません。 これらを行うと、値のバインドエラーとなります。