6.1.2. Spread.Views¶

ここでは Spread.Views を組み込んだ画面の基本的な開発方法を説明します。

コラム

Spread.Viewsの操作方法はSpreadJSに準拠します。詳しくは、SpreadJS Spread.Views の製品ヘルプを参照してください。

注意

Spread.ViewsはSpreadJS V13J以降で利用できなくなることが予定されています。（2019年12月1日現在）

詳細は以下のドキュメントを参照してください。

「IM-Spreadsheet for Accel Platform リリースノート」-「製品保守ポリシー Spread.Views」

項目

Spread.Viewsの読み込み
Spread.Viewsのインスタンス化
列の設定
数式の使用
グリッドの編集
ソート
テーマの適用
プラグインの利用

6.1.2.1. Spread.Viewsの読み込み ¶

Spread.Views を利用する場合は、以下のタグを使用します。

スクリプト開発モデルの場合
IMARTタグ「spreadview」タグを使用します。タグについては spreadviewタグ を参照してください。
<imart type="spreadview" />
JavaEE開発モデルの場合
IM-Spreadsheetタグライブラリ「spreadview」タグを使用します。タグについては spreadviewタグ を参照してください。
<imspreadsheet:spreadview />

6.1.2.2. Spread.Viewsのインスタンス化 ¶

Spread.Views を使用するには、データを用意して GC.Spread.Views.DataView をインスタンス化します。

<div id="grid1" style="width:100%;height:100vh;"></div>
<script type="javascript">
  var data = [
    {"region":"北海道","prefecture":"北海道","1970":5184,"1975":5338,"1980":5574,"1985":5678,"1990":5634,"1995":5687,"2000":5657},
    {"region":"東北","prefecture":"青森","1970":1427,"1975":1469,"1980":1524,"1985":1525,"1990":1482,"1995":1480,"2000":1475},
    {"region":"東北","prefecture":"岩手","1970":1371,"1975":1385,"1980":1421,"1985":1433,"1990":1417,"1995":1419,"2000":1415},
    {"region":"東北","prefecture":"宮城","1970":1820,"1975":1955,"1980":2081,"1985":2175,"1990":2241,"1995":2328,"2000":2365},
    {"region":"東北","prefecture":"秋田","1970":1242,"1975":1232,"1980":1256,"1985":1253,"1990":1228,"1995":1214,"2000":1189},
    {"region":"東北","prefecture":"山形","1970":1226,"1975":1220,"1980":1253,"1985":1262,"1990":1258,"1995":1257,"2000":1244},
    {"region":"東北","prefecture":"福島","1970":1946,"1975":1970,"1980":2036,"1985":2081,"1990":2102,"1995":2134,"2000":2127},
    ...
  ];
  var dataView = new GC.Spread.Views.DataView(document.getElementById("grid1"), data, new GC.Spread.Views.Plugins.GridLayout());
</script>

6.1.2.3. 列の設定 ¶

Spread.Viewsが判断できるように列設定オブジェクトを作成して、表示する列を追加できます。

列設定オブジェクトには各列の列名、幅、フォーマッタ等が指定できます。

var columns = [
  {id: "region", caption: "地域", dataField: "region", width: 80},
  {id: "prefecture", caption: "都道府県", dataField: "prefecture", width: 80},
  {caption: "年度", columns: [
    {id: "1970", caption: "1970年", dataField: "1970", format: "#,##0", width: 60},
    {id: "1975", caption: "1975年", dataField: "1975", format: "#,##0", width: 60},
    {id: "1980", caption: "1980年", dataField: "1980", format: "#,##0", width: 60},
    {id: "1985", caption: "1985年", dataField: "1985", format: "#,##0", width: 60},
    {id: "1990", caption: "1990年", dataField: "1990", format: "#,##0", width: 60},
    {id: "1995", caption: "1995年", dataField: "1995", format: "#,##0", width: 60},
    {id: "2000", caption: "2000年", dataField: "2000", format: "#,##0", width: 60},
  ]}
];
var dataView = new GC.Spread.Views.DataView(document.getElementById("grid1"), data, columns, new GC.Spread.Views.Plugins.GridLayout());

6.1.2.4. 数式の使用 ¶

Spread.Viewsでは新たな列を追加し、データフィールドとして数式を設定できます。

データフィールドに数式を設定する場合にはdataFieldの値を等号（=）で開始します。

var columns = [
  {id: "region", caption: "地域", dataField: "region", width: 80},
  {id: "prefecture", caption: "都道府県", dataField: "prefecture", width: 80},
  {caption: "年度", columns: [
    {id: "1970", caption: "1970年", dataField: "1970", format: "#,##0", width: 60},
    {id: "1975", caption: "1975年", dataField: "1975", format: "#,##0", width: 60},
    {id: "1980", caption: "1980年", dataField: "1980", format: "#,##0", width: 60},
    {id: "1985", caption: "1985年", dataField: "1985", format: "#,##0", width: 60},
    {id: "1990", caption: "1990年", dataField: "1990", format: "#,##0", width: 60},
    {id: "1995", caption: "1995年", dataField: "1995", format: "#,##0", width: 60},
    {id: "2000", caption: "2000年", dataField: "2000", format: "#,##0", width: 60},
  ]},
  {id: "total", caption: "合計", dataField: "=[1970]+[1975]+[1980]+[1985]+[1990]+[1995]+[2000]", format: "#,##0", width: 80, allowCellMerging: false, allowEditing: false},
  {id: "average", caption: "平均", dataField: "=[total]/7", format: "#,##0.00", width: 80, allowCellMerging: false, allowEditing: false}
];
var dataView = new GC.Spread.Views.DataView(document.getElementById("grid1"), data, columns, new GC.Spread.Views.Plugins.GridLayout());

6.1.2.5. グリッドの編集 ¶

Spread.Viewsではグリッドの値の編集可否を設定できます。

編集を有効にするには allowEditing オプションを有効にします。

var dataView = new GC.Spread.Views.DataView(document.getElementById("grid1"), data, columns, new GC.Spread.Views.Plugins.GridLayout({
  allowEditing: true
}));

また、 allowEditing オプションを列設定オブジェクトに指定することで列単位での編集可否を設定できます。

var columns = [
  {id: "region", caption: "地域", dataField: "region", width: 80, allowEditing: false},
  {id: "prefecture", caption: "都道府県", dataField: "prefecture", width: 80, allowEditing: false},
  ...
];
var dataView = new GC.Spread.Views.DataView(document.getElementById("grid1"), data, columns, new GC.Spread.Views.Plugins.GridLayout({
  allowEditing: true
}));

6.1.2.6. ソート ¶

Spread.Viewsではグリッドのソート機能を使用できます。

ソートを有効にするには allowSorting オプションを有効にします。

var dataView = new GC.Spread.Views.DataView(document.getElementById("grid1"), data, columns, new GC.Spread.Views.Plugins.GridLayout({
  allowSorting: true
}));

また、 allowSorting オプションを列設定オブジェクトに指定することで列単位でのソートの可否を設定できます。

var columns = [
  {id: "region", caption: "地域", dataField: "region", width: 80, allowSorting: false},
  {id: "prefecture", caption: "都道府県", dataField: "prefecture", width: 80, allowSorting: false},
  ...
];
var dataView = new GC.Spread.Views.DataView(document.getElementById("grid1"), data, columns, new GC.Spread.Views.Plugins.GridLayout({
  allowEditing: true
}));

6.1.2.7. テーマの適用 ¶

Spread.Views ではグリッドにテーマを適用できます。

テーマを適用するには spreadview タグの属性 theme を指定します。

スクリプト開発モデルの場合
<imart type="spreadview" theme="flat" />
JavaEE開発モデルの場合
<imspreadsheet:spreadview theme="flat" />

標準のテーマパターンには以下のパターンが用意されています。

bootstrap

flat

blue

6.1.2.8. プラグインの利用 ¶

Spread.Views ではプラグインを追加することでグリッドに様々な機能を追加できます。

テーマを適用するには spreadview タグの属性 plugins を指定します。

スクリプト開発モデルの場合
<imart type="spreadview" plugins="paging,searchbox" />
JavaEE開発モデルの場合
<imspreadsheet:spreadview plugins="paging,searchbox" />

以下の機能がプラグインで追加できます。

カレンダーグルーピング

カードレイアウトエンジン

ガント列タイププラグイン

水平レイアウトエンジン

メーソンリーレイアウトエンジン

ページング機能

検索ボックス機能

スパークライン機能

タイムライングルーピング

トレリスグルーピング

以下はグリッドにスパークラインを表示する機能を追加した例です。

<imart type="head">
  <imart type="spreadview" plugins="sparkline" />
</imart>
<div id="grid1" style="width:100%;height:100vh;"></div>
<script type="javascript">
 var data = [
   {"region":"北海道","prefecture":"北海道","1970":5184,"1975":5338,"1980":5574,"1985":5678,"1990":5634,"1995":5687,"2000":5657},
   {"region":"東北","prefecture":"青森","1970":1427,"1975":1469,"1980":1524,"1985":1525,"1990":1482,"1995":1480,"2000":1475},
   {"region":"東北","prefecture":"岩手","1970":1371,"1975":1385,"1980":1421,"1985":1433,"1990":1417,"1995":1419,"2000":1415},
   {"region":"東北","prefecture":"宮城","1970":1820,"1975":1955,"1980":2081,"1985":2175,"1990":2241,"1995":2328,"2000":2365},
   {"region":"東北","prefecture":"秋田","1970":1242,"1975":1232,"1980":1256,"1985":1253,"1990":1228,"1995":1214,"2000":1189},
   {"region":"東北","prefecture":"山形","1970":1226,"1975":1220,"1980":1253,"1985":1262,"1990":1258,"1995":1257,"2000":1244},
   {"region":"東北","prefecture":"福島","1970":1946,"1975":1970,"1980":2036,"1985":2081,"1990":2102,"1995":2134,"2000":2127},
   ...
 ];
 var sparklineSetting = {
   showMarkers: true,
   seriesColor: "#4472c4",
   markersColor: "#ba4e4e",
   lineWeight: 2
 }
 var sparklineFormula = '=LINESPARKLINE("1970,1975,1980,1985,1990,1995,2000", "", "' + JSON.stringify(sparklineSetting).replace(/\"/g, '') + '")';
 var columns = [
   {id: "region", caption: "地域", dataField: "region", width: 80},
   {id: "prefecture", caption: "都道府県", dataField: "prefecture", width: 80},
   {caption: "年度", columns: [
     {id: "1970", caption: "1970年", dataField: "1970", format: "#,##0", width: 60},
     {id: "1975", caption: "1975年", dataField: "1975", format: "#,##0", width: 60},
     {id: "1980", caption: "1980年", dataField: "1980", format: "#,##0", width: 60},
     {id: "1985", caption: "1985年", dataField: "1985", format: "#,##0", width: 60},
     {id: "1990", caption: "1990年", dataField: "1990", format: "#,##0", width: 60},
     {id: "1995", caption: "1995年", dataField: "1995", format: "#,##0", width: 60},
     {id: "2000", caption: "2000年", dataField: "2000", format: "#,##0", width: 60},
   ]},
   {id: "sparkline", caption: "スパークライン", dataField: sparklineFormula, width: 160},
 ];
 var dataView = new GC.Spread.Views.DataView(document.getElementById("grid1"), data, new GC.Spread.Views.Plugins.GridLayout());
</script>

目次