このシリーズでは、SpreadJS（スプレッドJS）に搭載の「テーブルシート」機能について基本的な使い方や便利な応用例などをご紹介します。
グループ化のレイアウト
SpreadJSの「V17.1J」ではテーブルシートのグループ化機能が強化され、グループ化の表示モードを3つのレイアウトから選択できるようになりました。
TableSheetクラスのoptions.groupLayout.modeプロパティにGroupLayoutMode列挙体を設定することで次のようなレイアウトを指定できます。
| 設定値 | 機能 |
|---|---|
| tabular | カテゴリ列や集計列を表示（従来の動作） |
| outline | グループヘッダやグループフッタを表示（新機能） |
| condensed | 高さを圧縮したグループヘッダやグループフッタを表示（新機能） |
レイアウトを「outline」または「condensed」に設定した場合には、従来の集計列に代えて集計行が表示されます。これにより本格的なアウトライン表示が可能になりました。
表形式モード（mode=tabular）
options.groupLayout.modeプロパティを「tabular」に設定すると、フィールド、集計、およびスライスをグループ化するためのカテゴリ列または計算列が追加されます（従来の動作）。
アウトラインモード（mode=outline）
options.groupLayout.modeプロパティを「outline」に設定すると、グループ化フィールドの名前と値がグループヘッダーに追加され、各グループ項目が階層表示されます。
統合モード（mode=condensed）
options.groupLayout.modeプロパティを「condensed」に設定すると、すべてのグループヘッダーとグループフッターの情報と集計結果を1行に統合して少ないスペースで表示できます。
集計行機能の使い方
次に、options.groupLayout.modeプロパティを「outline」または「condensed」に設定したときに可能になる「集計行」を表示する方法をご紹介します。
また、グループレイアウトを指定して集計行を表示するデモをご用意していますので、そちらもご覧いただければと思います。
ここでは、「テーブルシート入門7 複数のグループ化」で紹介した内容を前提にしています。
その基本となるグループ化とグループ集計についても、下記の記事で詳しく解説しています。
グループ集計として集計行を表示するには、前述のようにTableSheetクラスのoptions.groupLayout.modeプロパティを「outline」または「condensed」に設定する必要があります。「outline」に設定する場合は次のようになります。
・・・（中略）・・・
// グループレイアウトを設定します
tableSheet.options.groupLayout = {
mode: GC.Spread.Sheets.TableSheet.GroupLayoutMode.outline
};
・・・（中略）・・・グループ集計を行うには、groupByメソッドでsummaryFieldsオプションを設定します。summaryFieldsの詳細については前述の「テーブルシート入門5」をご参照ください。
次のコードでは、groupByメソッドを使って親階層と子階層からなるグループ化を行っています。複数のグループ化についても前述の「テーブルシート入門7」を参照していただければと思います。
また、レイアウトを「outline」または「condensed」に設定した場合には、spacingオプションで親階層のグループ間を区切るスペースを設定できます。spacingオプションではIGroupSpacingOptionsのrowプロパティで間隔の大きさを指定します。
・・・（中略）・・・
// groupByメソッド使い、グループ化を設定します
tableSheet.groupBy([
/* 1つ目のグループ化設定 */
{
field: "categoryName",
caption: 'カテゴリ',
// グループ集計を設定します
summaryFields: [
{
caption: 'カテゴリ合計',
formula: '=SUM([unitsOnOrder])',
position: 'header',
relateTo: 'unitsOnOrder',
}
],
},
/* 2つ目のグループ化設定 */
{
field: "productName",
caption: '製品名',
// グループ間の間隔を設定します
spacing: {row: 10},
// グループ集計を設定します
summaryFields: [
{
caption: '製品合計',
formula: '=SUM([unitsOnOrder])',
position: 'footer',
relateTo: 'unitsOnOrder',
},
],
}
]);
・・・（中略）・・・アウトラインモードで集計行を表示すると次のようになります。ここでは、親階層の集計行をヘッダに表示し、子階層の集計行をフッタに表示しています。
集計行のスタイル
グループ化では、グループ化領域と集計領域のそれぞれについてstyleとheaderStyleを設定することができます。
グループ化領域全体のスタイルはIGroupByOptionsのstyleプロパティとheaderStyleプロパティで設定し、集計領域のスタイルはIGroupSummaryFieldOptionsのstyleプロパティとheaderStyleプロパティで設定します。
IGroupByOptionsやIGroupSummaryFieldOptionsのstyleプロパティとheaderStyleプロパティで設定できる項目については、APIリファレンスのStyleOptionsとHeaderStyleOptionsをご参照ください。
先ほどご紹介したコードの「1つ目のグループ化設定」でこれらのスタイルを設定する例を以下に示します。
/* 1つ目のグループ化設定 */
{
field: "categoryName",
caption: 'カテゴリ',
style: {
backColor: '#dadada',
foreColor: '#000000',
fontSize: "20px",
},
headerStyle: {
font: "12px",
},
// グループ集計を設定します
summaryFields: [
{
caption: 'カテゴリ合計',
formula: '=SUM([unitsOnOrder])',
position: 'header',
relateTo: 'unitsOnOrder',
style: {
fontSize: '20px',
formatter: '#,##0 個',
hAlign: 'right',
vAlign: 'center',
},
headerStyle: {
fontSize: '12px',
hAlign: 'left',
vAlign: 'center'
},
}
],
},下は、「2つ目のグループ化設定」でスタイルを設定する部分です。
/* 2つ目のグループ化設定 */
{
field: "productName",
caption: '製品名',
spacing: {row: 10},
style: {
backColor: '#f0f0f0',
foreColor: '#000000',
fontSize: "18px",
},
headerStyle: {
font: "12px",
},
// グループ集計を設定します
summaryFields: [
{
caption: '製品合計',
formula: '=SUM([unitsOnOrder])',
position: 'footer',
relateTo: 'unitsOnOrder',
style: {
fontSize: '18px',
formatter: '#,##0 個',
hAlign: 'right',
vAlign: 'center',
},
headerStyle: {
fontSize: '12px',
hAlign: 'left',
vAlign: 'center'
},
},
],
}今回ご紹介したグループごとの集計行の機能は以下のデモアプリケーションで確認できます（“Run Project”をクリックするとデモが起動します）。アプリケーションの全容については、こちらのデモアプリケーションでご確認ください。
さいごに
テーブルシート入門シリーズ、第10回はグループ化したデータの集計行を表示する方法についてご紹介しました。本シリーズでは引き続きテーブルシートのさまざまな機能をご紹介していくほか、弊社Webサイトではテーブルシートを手軽に試せるデモアプリケーションや無料のトライアル版をご用意していますので、ぜひ、そちらもご確認ください。