このシリーズでは、SpreadJS（スプレッドJS）に搭載の「テーブルシート」機能について基本的な使い方や便利な応用例などをご紹介します。
目次
データの階層表示
今回ご紹介するのはデータの階層表示です。テーブルシートでは、階層構造を含むJSONデータをバインドすることにより、以下のようなデータの階層表示を実現できます。
階層表示で使えるJSONデータの種類
データの階層表示にあたり、テーブルシートでは以下4種類のJSONデータ構造をサポートしています。
idとparentId要素を含む階層データ
// idとparentId要素を含む階層データの例
[
{ id: 1, parentId: -1 },
{ id: 2, parentId: 1 },
{ id: 3, parentId: 2 },
]children要素を含む階層データ
// children要素を含む階層データの例
[
{
name: 'USA',
children: [
{
name: 'Texas',
children: [
{
name: 'Houston',
}
]
}
]
}
]level要素を含む階層データ
// level要素を含む階層データの例
[
{ name: 'USA', level: -1, id: 1 },
{ name: 'Texas', level: 0, id: 2 },
{ name: 'Houston', level: 1, id: 3 },
]独自に定義したprimary keyを含む階層データ
// 独自に定義したprimary keyを含む階層データの例
// "1.1"や"1.1.1"といった独自要素を
// パース処理でparent keyに変換して階層表示します
[
{ id: '1' },
{ id: '2' },
{ id: '1.1' },
{ id: '1.1.1' },
]実装例
ここからはテーブルシートによるデータ階層表示の実装例をご紹介します。
テーブルシートの準備
まずはテーブルシートを準備します。本シリーズの「テーブルシート入門1 機能概要とデータ表示」でご紹介した方法を使い、テーブルシートを初期化します。
データと列の準備
今回はテーブルシートがサポートする4種類のデータ構造のうち「level要素を含む階層データ」を使って階層表示を実装します。
前項で用意したテーブルシートのバインドデータ（変数名:orderData）を以下のようなデータで差し替えます。また、変数名もorderDataからdataに変更します。
var data = [
{ id: 1, フォルダ: '共有ドキュメント', 更新日: '2023/03/07', 最終更新者: '佐藤', level: 0 },
{ id: 2, フォルダ: '全社共通', 更新日: '2022/03/12', 最終更新者: '太田', level: 1 },
{ id: 3, フォルダ: '社則全集', 更新日: '2022/03/11', 最終更新者: '田中', level: 2 },
{ id: 4, フォルダ: '総務部', 更新日: '2023/04/17', 最終更新者: '岩渕', level: 1 },
{ id: 5, フォルダ: '業務マニュアル', 更新日: '2023/09/07', 最終更新者: '山本', level: 2 },
{ id: 6, フォルダ: '人事部', 更新日: '2020/12/07', 最終更新者: '柴崎', level: 1 },
{ id: 7, フォルダ: 'システム部', 更新日: '2020/01/07', 最終更新者: '横井', level: 1 },
{ id: 8, フォルダ: '開発部関連', 更新日: '2021/01/08', 最終更新者: '三浦', level: 0 },
{ id: 9, フォルダ: '仕様書', 更新日: '2020/03/07', 最終更新者: '千葉', level: 1 },
{ id: 10, フォルダ: 'ハードウェア仕様書', 更新日: '2014/08/07', 最終更新者: '桑田', level: 2 },
{ id: 11, フォルダ: 'ソフトウェア仕様書', 更新日: '2023/03/07', 最終更新者: '大島', level: 2 },
{ id: 12, フォルダ: 'インターフェイス仕様書', 更新日: '2023/02/07', 最終更新者: '五十嵐', level: 2 },
{ id: 13, フォルダ: 'OS仕様書', 更新日: '2023/01/07', 最終更新者: '速水', level: 2 },
{ id: 14, フォルダ: 'IO仕様書', 更新日: '2023/02/07', 最終更新者: '轟', level: 2 },
{ id: 15, フォルダ: 'オプション仕様書', 更新日: '2022/11/07', 最終更新者: '原口', level: 2 },
{ id: 16, フォルダ: 'ソースコード', 更新日: '2023/07/07', 最終更新者: '小宮山', level: 1 },
{ id: 17, フォルダ: 'サンプルファイル', 更新日: '2023/04/07', 最終更新者: '小畑', level: 2 },
{ id: 18, フォルダ: 'エラー仕様書', 更新日: '2023/03/07', 最終更新者: '後藤', level: 1 },
{ id: 19, フォルダ: '経費関連', 更新日: '2020/03/07', 最終更新者: '高橋', level: 0 },
{ id: 20, フォルダ: '精算関連', 更新日: '2023/08/07', 最終更新者: '村井', level: 1 },
{ id: 21, フォルダ: '予算申請', 更新日: '2014/09/07', 最終更新者: '西原', level: 1 },
];続いて、元のコードにあるaddTable処理を以下のように変更し、上記のデータにある各要素を列としてテーブルシートに設定します。
// データマネージャーにテーブルを追加します
var productTable = dataManager.addTable('階層表示', {
data: data,
// スキーマ情報を設定します
schema: {
// 列情報を設定します
columns: {
Folder: { dataName: 'フォルダ' },
UpdateDate: { dataName: '更新日' },
User: { dataName: '最終更新者' },
HierarchyLevel: { dataName: 'level' },
Id: { dataName: 'id', isPrimaryKey: true },
},
},
});階層情報の設定
次に、データ内にある階層情報をテーブルシートに関連付けていきます。hierarchyプロパティを使い、先ほどの設定に続けて以下のコード（強調部分）を追加します。
// データマネージャーにテーブルを追加します
var productTable = dataManager.addTable('階層表示', {
data: data,
// スキーマ情報を設定します
schema: {
// 列情報を設定します
columns: {
Folder: { dataName: 'フォルダ' },
UpdateDate: { dataName: '更新日' },
User: { dataName: '最終更新者' },
HierarchyLevel: { dataName: 'level' },
Id: { dataName: 'id', isPrimaryKey: true },
},
// 階層情報を設定します
hierarchy: {
// 設定するJSONデータの種類を設定します（今回は"Level"）
type: 'Level',
// 階層情報を含む列を指定します
column: 'HierarchyLevel',
// 階層表示する列を指定します
outlineColumn: {
value: 'Folder',
},
},
},
});なお、hierarchyプロパティでは上記以外にも、使用するJSONデータの種類にあわせてさまざまな階層表示関連の設定が可能です。詳しくは製品のAPIリファレンスにあるこちらの項目をご確認ください。
ビューの設定
ここまで来れば、あとはいつも通りのテーブルシート設定でデータを階層表示ができるようになります。元のコードにあるビューの列情報定義を今回使用するJSONデータにあわせて以下のように設定すれば、階層表示の準備は完了です。
// ビューの列情報を定義します
var columnInfos = [
{ value: "Folder", caption: "フォルダ", width: 280},
{ value: "UpdateDate", caption: "更新日", style: { formatter: "yyyy年mm月dd日", } },
{ value: "User", caption: "最終更新者" },
];ここまでに実装したコードの実行例を以下に示します（“Run Project”をクリックするとデモが起動します）。テーブルシートにバインドしたデータが、階層となって表現されていることをご確認いただけます。
各階層にチェックボックスやアイコンを表示する
テーブルシートの階層表現では、同じくSpreadJSのアウトライン列機能と同じように、階層ごとにアイコン画像を設定したり、ツリーの親子関係と連動して動作するチェックボックスを設定することが可能です。
例えばチェックボックスの表示では、先に設定したschemaプロパティを以下のように設定します（コード内の強調部分をご確認ください）。
// 階層情報を設定します
hierarchy: {
// 設定するJSONデータの種類を設定します（今回は"Level"）
type: 'Level',
// 階層情報を含む列を指定します
column: 'HierarchyLevel',
// 階層表示する列を指定します
outlineColumn: {
value: 'Folder',
// チェックボックスを設定します
showCheckBox: true,
},
},またアイコン画像の表示を有効にする場合は以下のようにして、showImageプロパティをtrueに設定のうえ、階層ごとに表示したい画像を設定します。
// 階層情報を設定します
hierarchy: {
// 設定するJSONデータの種類を設定します（今回は"Level"）
type: 'Level',
// 階層情報を含む列を指定します
column: 'HierarchyLevel',
// 階層表示する列を指定します
outlineColumn: {
value: 'Folder',
// チェックボックスを設定します
showCheckBox: true,
// アイコン画像を設定します
showImage: true,
images: ['./archiverFolder.png', './newFloder.png', './docFile.png' ],
},
},画像の設定ではさらに、階層の折り畳みや展開用のUI（インジケーター）も変更可能です。この場合は次に示すようにexpandIndicatorプロパティとcollapseIndicatorプロパティを設定します。
// 階層情報を設定します
hierarchy: {
// 設定するJSONデータの種類を設定します（今回は"Level"）
type: 'Level',
// 階層情報を含む列を指定します
column: 'HierarchyLevel',
// 階層表示する列を指定します
outlineColumn: {
value: 'Folder',
// チェックボックスを設定します
showCheckBox: true,
// アイコン画像を設定します
showImage: true,
images: ['./archiverFolder.png', './newFloder.png', './docFile.png' ],
// 折り畳みと展開用のUI画像を設定します
expandIndicator:'./increaseIndicator.png',
collapseIndicator: './decreaseIndicator.png',
},
},上記のコード実行例を次に示します（“Run Project”をクリックするとデモが起動します）。
このようにしてチェックボックスや画像を設定することにより、テーブルシート上の階層表示をより視覚的に、便利に実現することができます。
さいごに
テーブルシート入門シリーズ、第8回は「階層表示」についてご紹介しました。本シリーズでは引き続きテーブルシートのさまざまな機能をご紹介していくほか、弊社Webサイトではテーブルシートを手軽に試せるデモアプリケーションや無料のトライアル版をご用意していますので、ぜひ、そちらもご確認ください。