「Wijmo（ウィジモ）」は業務アプリケーションの様々な要件に対応できるUI部品を備えたJavaScriptライブラリです。
Wijmoには、標準的なグリッドの行と列を転置したレイアウトを実現する「TransposedGrid（トランスポーズドグリッド）」コントロールが含まれています。この記事では、その基本的な使い方を紹介します。
開発環境の準備とWijmoの参照
この記事では以下の開発環境を使用します。
作成するファイルは次の4つです。
| index.html | ページ本体。ページの要素としてTransposedGridコントロールを配置します |
|---|---|
| app.js | TransposedGridコントロールを作成するコードを記載します |
| data.js | TransposedGridコントロールに連結するデータを記載します |
| styles.css | 各種ページ要素のスタイル定義を記載します |
転置レイアウトとは
TransposedGridコントロールは、通常のグリッドの行と列を入れ替えたレイアウトを実現します。この転置レイアウトは、データの行数が少なく、逆に列数が多い場合に真価を発揮します。TransposedGridコントロールの利用については以下のドキュメントも用意していますので、ここで紹介できなかった機能については、これらのドキュメントを参照していただければと思います。
今回の記事では、標準的なグリッドのFlexGridコントロールと転置レイアウトを実現するTransposedGridコントロールに同じデータを設定して、その違いを確かめてみたいと思います。
TransposedGridコントロールを作成する
TransposedGridコントロールの機能を使うために必要となるWijmoのモジュールなどへの参照設定は「index.html」で行います。また、TransposedGridコントロールの各種設定を記載する「app.js」とデータを記載する「data.js」の参照もここに追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TransposedGridコントロール入門</title>
<link rel="stylesheet" type="text/css" href="css/wijmo.min.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="scripts/wijmo.min.js"></script>
<script src="scripts/wijmo.grid.min.js"></script>
<script src="scripts/wijmo.grid.transposed.min.js"></script>
<script src="scripts/cultures/wijmo.culture.ja.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/data.js"></script>
</head>
<body>
<h4 id="FlexGrid">グリッド</h4>
<div id="Wijmo_FlexGrid"></div>
<h4 id="TransposedGrid">転置グリッド</h4>
<div id="Wijmo_TransposedGrid"></div>
</body>
</html>今回は通常のデータグリッドとの比較を行うため、以下の通りFlexGridの表示に関する設定も追加しています。
・・・（中略）
<script src="scripts/wijmo.grid.min.js"></script>
・・・（中略）
<h4 id="FlexGrid">グリッド</h4>
<div id="Wijmo_FlexGrid"></div>
・・・（中略）FlexGridの使用方法については以下の記事もご覧ください。
また、ページ上の要素のスタイルを「styles.css」で定義します。
#Wijmo_FlexGrid, #Wijmo_TransposedGrid{
border: 1px solid gray;
width: 800px;
}さらに「app.js」と「data.js」に次のようなコードを記述してTransposedGridコントロールと比較用のFlexGridを作成します。まずは初期状態の最小限の設定を行っていきます。
document.addEventListener("DOMContentLoaded", function () {
// 転置グリッド
Introduction();
});
function Introduction(){
const data = getData1();
// FlexGrid
new wijmo.grid.FlexGrid('#Wijmo_FlexGrid', {
itemsSource: data
});
// TransposedGrid
new wijmo.grid.transposed.TransposedGrid('#Wijmo_TransposedGrid', {
itemsSource: data
});
}function getData1() {
return[
{'No': 0, '商品名': 'コーヒーマイルド', '受注日': '2017/11/18', '金額': 6400, '値引': true},
{'No': 1, '商品名': '果汁100%ピーチ', '受注日': '2019/11/14', '金額': 1760, '値引': true},
{'No': 2, '商品名': 'チョコクリームアイス', '受注日': '2017/06/04', '金額': 25200, '値引': true},
{'No': 3, '商品名': 'モーニングブレッド', '受注日': '2020/10/16', '金額': 11200, '値引': false},
{'No': 4, '商品名': '果汁100%レモン', '受注日': '2020/05/17', '金額': 42500, '値引': false},
{'No': 5, '商品名': '果汁100%グレープ', '受注日': '2017/09/16', '金額': 41600, '値引': false},
{'No': 6, '商品名': 'ライフマーガリン', '受注日': '2019/08/09', '金額': 36400, '値引': false},
{'No': 7, '商品名': '果汁100%グレープ', '受注日': '2017/10/10', '金額': 2600, '値引': false},
{'No': 8, '商品名': 'ブラックペッパー', '受注日': '2019/02/02', '金額': 8700, '値引': false},
{'No': 9, '商品名': '果汁100%グレープ', '受注日': '2017/09/22', '金額': 10400, '値引': false}
];
}
TransposedGridコントロールのコンストラクタで設定しているitemsSourceプロパティには、コントロールに表示するデータを設定します。これだけでTransposedGridコントロールが作成できます。
作成したページを表示すると次のようになります。FlexGridコントロールと比較することでTransposedGridコントロールの転置レイアウトについてよく理解できると思います。
階層構造のデータを表示する
次にTransposedGridコントロールのグループ化について紹介していきたいと思いますが、その前にグループ化を行う階層構造のデータを単純に表示させてみたいと思います。階層構造のデータを生成する関数「getData2」を「data.js」に追加します。このデータは、4つの商品の四半期ごとの売上の数量、金額、利益から構成されています。
function getData1() {
・・・（中略）
}
function getData2() {
return[
{
name: '商品A',
firstQuarter: {
name: '',
quantity: 100,
amount: 1000000,
profit:100000
},
secondQuarter: {
name: '',
quantity: 200,
amount: 2000000,
profit:200000
},
thirdQuarter: {
name: '',
quantity: 300,
amount: 3000000,
profit:300000
},
fourthQuarter: {
name: '',
quantity: 400,
amount: 4000000,
profit:400000
}
},
{
name: '商品B',
firstQuarter: {
name: '',
quantity: 50,
amount: 10000000,
profit:2000000
},
secondQuarter: {
name: '',
quantity: 100,
amount: 20000000,
profit:4000000
},
thirdQuarter: {
name: '',
quantity: 150,
amount: 30000000,
profit:6000000
},
fourthQuarter: {
name: '',
quantity: 200,
amount: 40000000,
profit:8000000
}
},
{
name: '商品C',
firstQuarter: {
name: '',
quantity: 40,
amount: 4000000,
profit:200000
},
secondQuarter: {
name: '',
quantity: 30,
amount: 3000000,
profit:150000
},
thirdQuarter: {
name: '',
quantity: 20,
amount: 2000000,
profit:100000
},
fourthQuarter: {
name: '',
quantity: 10,
amount: 1000000,
profit:50000
}
},
{
name: '商品D',
firstQuarter: {
name: '',
quantity: 5,
amount: 5000000,
profit:500000
},
secondQuarter: {
name: '',
quantity: 10,
amount: 10000000,
profit:1000000
},
thirdQuarter: {
name: '',
quantity: 5,
amount: 5000000,
profit:500000
},
fourthQuarter: {
name: '',
quantity: 20,
amount: 20000000,
profit:2000000
}
}
];
}さらに「app.js」を以下のように修正します。この階層構造のデータをTransposedGridコントロールに表示するには、itemsSourceプロパティに加えて、autoGenerateColumnsプロパティとcolumnsプロパティを追加する必要があります。
また、getDataColumns関数は、columnsプロパティに設定する値を生成するもので、連結するデータのフィールドやヘッダに表示するキャプション文字列、そしてセルに表示する数値の書式を設定します。
document.addEventListener("DOMContentLoaded", function () {
// 転置グリッドのグループ化
RowGroup();
});
・・・（中略）
function RowGroup(){
new wijmo.grid.transposed.TransposedGrid('#Wijmo_TransposedGrid', {
autoGenerateColumns: false,
columns: getDataColumns(),
itemsSource: getData2()
});
}
function getDataColumns(){
return [
{ binding: 'name', header: ' ' },
{ binding: 'firstQuarter.name', header: '第１四半期' },
{ binding: 'firstQuarter.quantity', header: '数量', format: 'n' },
{ binding: 'firstQuarter.amount', header: '金額', format: 'c' },
{ binding: 'firstQuarter.profit', header: '利益', format: 'n' },
{ binding: 'secondQuarter.name', header: '第２四半期' },
{ binding: 'secondQuarter.quantity', header: '数量', format: 'n' },
{ binding: 'secondQuarter.amount', header: '金額', format: 'c' },
{ binding: 'secondQuarter.profit', header: '利益', format: 'n' },
{ binding: 'thirdQuarter.name', header: '第３四半期' },
{ binding: 'thirdQuarter.quantity', header: '数量', format: 'd' },
{ binding: 'thirdQuarter.amount', header: '金額', format: 'c' },
{ binding: 'thirdQuarter.profit', header: '利益', format: 'd' },
{ binding: 'fourthQuarter.name', header: '第４四半期' },
{ binding: 'fourthQuarter.quantity', header: '数量', format: 'd' },
{ binding: 'fourthQuarter.amount', header: '金額', format: 'c' },
{ binding: 'fourthQuarter.profit', header: '利益', format: 'd' }
];
}作成したページは次のようになります。
グループ化する
先ほどの例では、TransposedGridコントロールに階層構造のデータを表示しただけですが、ここから階層構造のデータを展開・折りたたみできるようにグループ化の設定を行います。
グループ化するには、columnsプロパティに代えてrowGroupsプロパティを使います。
rowGroupsプロパティに設定する内容は、columnsプロパティとほとんど変わりませんが、設定内容が階層構造になっている点が異なります。
それでは、「app.js」を次のように変更して階層構造のデータをグループ化してみましょう。
document.addEventListener("DOMContentLoaded", function () {
// 転置グリッドのグループ化
RowGroup();
});
・・・（中略）
function RowGroup(){
new wijmo.grid.transposed.TransposedGrid('#Wijmo_TransposedGrid', {
autoGenerateColumns: false,
rowGroups: getRowGroups(),
itemsSource: getData2()
});
}
・・・（中略）
function getRowGroups() {
return [
{ binding: 'name', header: ' ', align: 'center' },
{
header: '第１四半期', align: 'center', collapseTo: 'firstQuarter.amount', rows: [
{ binding: 'firstQuarter.quantity', header: '数量', format: 'n' },
{ binding: 'firstQuarter.amount', header: '金額', format: 'c' },
{ binding: 'firstQuarter.profit', header: '利益', format: 'n' }
]
},
{
header: '第２四半期', align: 'center', collapseTo: 'secondQuarter.amount', rows: [
{ binding: 'secondQuarter.quantity', header: '数量', format: 'n' },
{ binding: 'secondQuarter.amount', header: '金額', format: 'c' },
{ binding: 'secondQuarter.profit', header: '利益', format: 'n' }
]
},
{
header: '第３四半期', align: 'center', collapseTo: 'thirdQuarter.amount', rows: [
{ binding: 'thirdQuarter.quantity', header: '数量', format: 'n' },
{ binding: 'thirdQuarter.amount', header: '金額', format: 'c' },
{ binding: 'thirdQuarter.profit', header: '利益', format: 'n' }
]
},
{
header: '第４四半期', align: 'center', collapseTo: 'fourthQuarter.amount', rows: [
{ binding: 'fourthQuarter.quantity', header: '数量', format: 'n' },
{ binding: 'fourthQuarter.amount', header: '金額', format: 'c' },
{ binding: 'fourthQuarter.profit', header: '利益', format: 'n' }
]
},
];
}次の画像は、すべての四半期を展開した状態です。
第1四半期を折りたたむと下のようになります。
ここでは、親子2階層でグループ化する例を紹介しましたが、もっと多くの階層にグループ化することもできます。Webサイトでは親子孫の3階層のグループ化を実現するサンプルを紹介していますので、ご参照いただければと思います。
今回ご紹介した各種設定は以下のデモアプリケーションでも確認できます（“Run Project”をクリックするとデモが起動します）。
さいごに
今回はWijmoに含まれているTransposedGridコントロールの基本的な使用方法を紹介いたしました。Wijmoには、このTransposedGridコントロールの他にも、FlexGrid、MultiRow、TransposedMultiRow、FlexSheetなどの多様なグリッド系コントロールが用意されています。さまざまなアプリケーションに最適なグリッド機能を提供するこれらのコントロールをぜひご検討いただけますと幸いです。
この他にもWijmoの各種コントロールの基本的な使い方や応用的な使い方の解説を連載記事として公開しています。こちらも是非ご覧ください。
製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。