GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の最新情報をお届けします。製品のTIPSや発売情報、イベントのお知らせなどをいち早く発信中です。

ツリー表示を実現するスプレッドシートの「アウトライン列」

2018年8月29日、弊社はJavaScriptライブラリ「SpreadJS」の最新バージョン「V11J」をリリースしました。今回はこの「V11J」で追加された機能の中からSpread.Sheetsライブラリの「アウトライン列」をピックアップし、ご紹介したいと思います。

シート上で階層表示を実現する「アウトライン列」

「アウトライン列」は、Spread.Sheetsライブラリの「インデント」と「グループ化」の特徴を組み合わせた機能です。

列のデータにインデントを設定してこの機能を有効にすると、同じインデントレベル(インデントの深さ)のデータがひとつの階層として認識され、UIによる一括の折りたたみや展開が可能になります。

「階層らしい外観」を提供するインジケーター表示

上記の例では、シートの左側に折りたたみ/展開用UIが表示されていますが、「アウトライン列」機能ではこのUIの代わり列内に「+」「ー」ボタンを表示する「インジケーター」オプションの設定が可能です。このオプションを設定し、グループ化用UIを非表示に設定すると、以下のように「階層らしい」外観を実現できます。

また、階層の画像設定も可能になっており、インジケーターオプションと組み合わせることで、次のような「ファイルエクスプローラー風」のツリー表示にも対応します。

階層を一括選択できるチェックボックス

加えて「チェックボックス」オプションを設定することにより、階層情報と連動して動作するチェックボックスが使用できるようになります。ツリー表示されたデータのなかから、特定のグループを一括選択する際などに効果を発揮する大変便利な機能です。

ここまでにご紹介した「アウトライン列」機能と各オプションの動作は以下で確認できます。インジケーターやチェックボックスの動作などを是非、実際のサンプルでお試しください。

いかがだったでしょうか。今回はSpread.SheetsライブラリのV11Jにおける新機能「アウトライン列」についてご紹介しました。同機能のみならず、SpreadJSのV11Jには他にも様々な新機能が搭載されています。弊社ウェブサイトでは、V11Jの新機能詳細やデモを公開していますので、上記のサンプルとあわせてご確認いただければ幸いです。