データグリッドを想定したテーブルシートの機能
データグリッドとしての利用を想定したテーブルシートの機能を、以下でいくつか紹介します。
複数テーブルのリレーションシップ
テーブルシートでは、2つのテーブル間にリレーションシップを定義できます。図2のサンプル(p002-relationship)では、リレーションシップが定義された2つのテーブルを参照してデータを表示します。
![図2 2つのテーブルからデータを表示するサンプル(p002-relationship)](http://cz-cdn.shoeisha.jp/static/images/article/19101/002.png)
このサンプルでは、スマートフォンの情報を表すphonesTableとは別に、会社の情報を表すvendorsTableが定義されています(リスト4)。
const vendorsTable = dataManager.addTable('vendorsTable', { data: [ { id: 1, name: 'Apple', region: 'アメリカ' }, (略) ], (略) });
この2つのテーブルに、リスト5の記述でリレーションシップを設定します。
dataManager.addRelationship( phonesTable, 'vendorId', 'vendor', vendorsTable, 'id', 'phones');
addRelationshipメソッドの引数は表3の通りです。
No. | 意味 |
1 | テーブル1の変数 |
2 | リレーションシップを設定するテーブル1の列名 |
3 | テーブル2のビューから参照するときの、テーブル1の名前 |
4 | テーブル2の変数 |
5 | リレーションシップを設定するテーブル2の列名 |
6 | テーブル1のビューから参照するときの、テーブル2の名前 |
つまり、リスト5のaddRelationshopでは、以下のリレーションシップが定義されます。
- phonesTableのvendorIdと、vendorsTableのidを関連付ける
- phonesTableのビューから、vendorsTableは「vendor」として参照できる
- vendorsTableのビューからは、phonesTableは「phones」として参照できる(ただし、このサンプルでは未使用)
この定義を使って、リスト6の通りデータを取得・表示できます。phonesTableのビューからはvendorsTableを「vendor」として参照できるため、(1)でvendor.name、(2)でvendor.regionとして、vendorsTableの列を参照できます。定義したビューを利用して(3)でデータを取得してテーブルシートに表示します。リスト3(2)ではテーブルに対してfetchを実行していましたが、リレーションシップを利用する場合は先にビューを定義して、そのfetchを実行する点に注意してください。
const view = phonesTable.addView('myView', [ (略) { value: 'vendor.name', width: 80, caption: '会社' }, // ...(1) { value: 'vendor.region', width: 80, caption: '地域' } // ...(2) ]); view.fetch().then(() => { // ...(3) sheet.setDataView(view); });
データのグループ表示
取得したデータを、テーブルシートでグループに分類して表示する方法を、図3のサンプルで説明します。カテゴリーごとにグループ化された合計金額と、店舗によるスライス(店舗単位の金額)が表示されます。
![図3 データをグループ表示するサンプル(p003-groupby)](http://cz-cdn.shoeisha.jp/static/images/article/19101/003.png)
グループ表示するテーブル(accyTable)はリスト7の通りです。category(カテゴリー)name(製品名)price(価格)count(個数)shop(店舗)を含みます。
const accyTable = dataManager.addTable('accyTable', { data: [ { category: 'ケース', name: 'iPhone 15 ケース', price: 1000, count: 50, shop: '本店' }, (略) ] });
「グループ化」ボタンクリック時に実行されるグループ表示の処理はリスト8の通りです。sheet.groupByメソッドにグループ表示の内容を指定して実行します。なお「グループ解除」ボタンクリックで「sheet.removeGroupBy();」によりグループ解除されます。
sheet.groupBy([ { caption: 'カテゴリー', field: 'category', // ...(1) summaryFields: [ // ...(2) { caption: '合計額', formula: '=SUM([price] * [count])', // ...(2a) width: 80, style: { formatter: '#,0' }, slice: { // ...(2b) field: 'shop', width: 80, style: { formatter: '#,0' } } } ] } ]);
(1)に、グループ表示とする対象のデータ列を指定します。(2)のsummaryFieldsは、グループごとに集計するデータ列で、ここでは合計額の列を1つ指定しています。計算式は(2a)で、price列×count列の合計を指定します。(2b)はスライス(グループごとの集計をさらに分割する条件)で、ここではshop(店舗)での分割を指定します。
同様の指定を画面で対話的に行えるパネル(テーブルシートパネル)を表示させることもできます(図4)。「フィールド」を「グループ」にドラッグアンドドロップして、集計方法(数式、キャプション、スライス)を設定できます。
![図4 テーブルシートパネルを表示するサンプル(p004-table-sheet-panel)](http://cz-cdn.shoeisha.jp/static/images/article/19101/004.png)
テーブルシートパネルを表示する実装はリスト9の通りです。GC.Spread.Sheets.TableSheet.TableSheetPanelコンストラクターの第1引数に名前、第2引数にスプレッドシートの変数、第3引数にテーブルシートパネルを表示するHTML要素を指定して実行します。
const panel = new GC.Spread.Sheets.TableSheet.TableSheetPanel( 'myPanel', sheet, document.getElementById('table-sheet-panel'));
データの階層表示
データの階層構造をデータグリッドに表示する機能を、図5のサンプルで説明します。表示した階層データはアイコンをクリックすることで折りたたみや展開も可能です。
![図5 データの階層構造を表示するサンプル(p005-hierarchy)](http://cz-cdn.shoeisha.jp/static/images/article/19101/005.png)
テーブルシートでは、階層データの定義方法が異なる、表4の階層タイプが利用できます。詳細は公式ドキュメントを参照してください。
No. | 階層タイプ | 階層データの定義方法 |
1 | Parent | 各データが親データのIDを保持 |
2 | ChildrenPath | 各データが子データの配列を直接保持 |
3 | Level | 各データが階層レベルの数字を保持 |
4 | Custom | 階層を判定する処理を自分で実装 |
図5のサンプルはParentタイプで実装されています(リスト10)。(1)のdataでは、各要素のparentIdに親データのIDを保持します。階層タイプは(2)で指定しており、typeに「Parent」を、columnには親データのIDに対応する属性名(ここではparentId)を指定します。階層を定義するためのデータID(id)は主キーである必要があるため、(3)でisPrimaryKeyをtrueに設定しています。
const gadgetsTable = dataManager.addTable('gadgetsTable', { data: [ // ...(1) { id: 1, name: 'ガジェット', parentId: -1 }, { id: 2, name: 'スマホ', parentId: 1 }, { id: 3, name: 'タブレット', parentId: 1 }, { id: 4, name: 'iPhone', parentId: 2 }, { id: 5, name: 'Androidスマホ', parentId: 2 }, { id: 6, name: 'iPad', parentId: 3 }, { id: 7, name: 'Androidタブレット', parentId: 3 } ], schema: { hierarchy: { type: 'Parent', column: 'parentId' }, // ...(2) columns: { id: { dataName: 'id', isPrimaryKey: true } // ...(3) } } });
データの階層構造を表示するビューの定義はリスト11です。nameに対してoutlineColumn属性にtrueを設定して、階層表示されるようにします。
const view = gadgetsTable.addView('myView', [ { value: 'id', width: 60, caption: 'ID' }, { value: 'name', width: 200, caption: '名前', outlineColumn: true } ]);