「Wijmo（ウィジモ）」は業務アプリケーションの様々な要件に対応できるUI部品を備えたJavaScriptライブラリです。
Wijmoには40を超えるコントロールが収録されていますが、1レコードに複数行を表示できるデータグリッドコントロール「MultiRow（マルチロウ）」は、業務アプリケーションの開発現場で非常に重宝されているコントロールです。今回の記事ではこのMultiRowの基本的な用法を解説したいと思います。
※ この機能はWijmo Enterpriseでのみ利用可能です。
目次
開発環境
今回は開発環境として以下を使用します。
MultiRowでデータの表示
MultiRowはFlexGridなどのコントロール同様、使い始めるのに難しい設定を行う必要はありません。今回は以下の2つのファイルを用意してMultiRow上にデータを表示します。
| index.html | ページ本体。このページの要素としてMultiRowを配置します |
|---|---|
| app.js | MultiRowの表示など各種機能を使用するためのコードを記載します |
Wijmoの参照
まずはMultiRowを使うのに必要なライブラリの参照設定をHTMLファイルに追加します。ほぼFlexGridを使用する場合と同様の設定になりますが、MultiRow専用のモジュールである「wijmo.grid.multirow.min.js」への参照が追加で必要です。また、Wijmoのモジュールのほか、MultiRowの各種処理を記載する「app.js」への参照も追加します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MultiRow入門</title>
<!-- Wijmoのスタイル（必須） -->
<link href="css/wijmo.min.css" rel="stylesheet" />
<!-- Wijmoのコアモジュール（必須） -->
<script src="scripts/wijmo.min.js"></script>
<!-- Wijmoコントロール（オプション。必要なコントロールを設定する） -->
<script src="scripts/wijmo.grid.min.js"></script>
<script src="scripts/wijmo.grid.multirow.min.js"></script>
<!-- Wijmoカスタムカルチャー（オプション。任意のカルチャーを設定する） -->
<script src="scripts/wijmo.culture.ja.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
</body>
</html>上記のように直接プロジェクトにモジュールを配置する方法のほか、CDNから参照したり、npmパッケージを使用したりすることもできます。
製品ヘルプの「Wijmoの参照」を見る
製品ヘルプの「npmによるWijmoの参照」を見る
MultiRowの定義
次にMultiRowを表示する領域を<div>タグで定義します。今回はID属性に「Wijmo_MultiRow」を設定しました。
<body>
<div id="Wijmo_MultiRow" style="height: 600px;"></div>初期化処理とデータの表示
次に「app.js」にMultiRowの初期化処理と、サンプルデータの設定処理を記述します。
MultiRowにデータを表示するには、FlexGridと同様に、itemsSourceプロパティに、配列などのデータの集合（データソース）を設定します。
今回はダミーデータを使用する処理を記述していますが、実際にはWeb APIなどでデータを取得する処理を実装する必要があります。
さらにMultiRowでは「layoutDefinition」プロパティを使用してグリッド上のセルのレイアウトを定義します。以下は1つのセルグループに3つのデータフィールドを表示する例です。
document.addEventListener("DOMContentLoaded", function () {
let multirow = new wijmo.grid.multirow.MultiRow('#Wijmo_MultiRow', {
itemsSource: orders,
layoutDefinition: [
{
cells: [
{ binding: '受注コード' },
{ binding: '氏名' },
{ binding: '在籍支社' }
]
},
{
cells: [
{ binding: '部署名' },
{ binding: '出荷先名', width: 200 },
{ binding: '郵便番号' }
]
},
{
cells: [
{ binding: '住所', width: 300 },
{ binding: '商品名' },
{ binding: '区分名' }
]
},
{
cells: [
{ binding: '単価', format: 'c' },
{ binding: '数量' },
{ binding: '合計', format: 'c' }
]
}
]
})
})
var orders = [
{ 受注コード: '1001', 氏名: '成宮 真紀', 在籍支社: '大阪支社', 部署名: '営業一', 出荷先名: '小料理ひろ', 郵便番号: '486-0969', 住所: '愛知県春日井市味美白山町1-9-X', 商品名: 'ピュアデミグラスソース', 区分名: '調味料', 単価: 200, 数量: 30, 合計: 6000 },
{ 受注コード: '1002', 氏名: '正門 恵子', 在籍支社: '東京本社', 部署名: '営業二', 出荷先名: 'イルカランド', 郵便番号: '144-0047', 住所: '東京都大田区萩中 2-4-X', 商品名: 'だしこんぶ', 区分名: '調味料', 単価: 290, 数量: 50, 合計: 14500 },
{ 受注コード: '1003', 氏名: '森上 偉久馬', 在籍支社: '東京本社', 部署名: '営業一', 出荷先名: 'ヒロコーポレーション', 郵便番号: '241-0831', 住所: '神奈川県横浜市旭区左近山 3-18-XXX', 商品名: 'ピリカラタバスコ', 区分名: '調味料', 単価: 200, 数量: 20, 合計: 4000 },
];以上でMultiRowの表示に関する準備は完了です。Visual Studio Code上で「index.html」を右クリックして、［Open with Live Server］を実行します。
実行後、ブラウザ上にMultiRowが表示されます。
MultiRowのセルのレイアウトのカスタマイズ
セルを横方向に結合
上記の例では1つの列（セル）のグループに3つのデータフィールドを表示するように設定していますが、レイアウトは「layoutDefinition」プロパティを使用して柔軟に調整することができます。
以下はグリッド列3つ分のスパン（幅）に対して、様々なスパンの6つのセルを配置する場合のイメージです。
コード上は以下のようになります。「受注コード」と「出荷先名」のフィールドにはそれぞれ「colspan」プロパティを設定して、横方向にセルを結合する幅を指定しています。
・・・（中略）
layoutDefinition: [
{
colspan: 3, cells: [
{ binding: '受注コード', colspan: 2 },
{ binding: '氏名' },
{ binding: '出荷先名', colspan: 3 },
{ binding: '郵便番号' },
{ binding: '在籍支社' },
{ binding: '部署名' }
]
}
]
・・・（中略）
セルを縦方向に結合
グリッドのセルを縦方向に結合する場合は、「rowspan」プロパティを使用して幅を指定します。
・・・（中略）
layoutDefinition: [
{
cells: [
{ binding: '受注コード' },
]
},
{
cells: [
{ binding: '氏名', rowspan: 3 },
{ binding: '在籍支社' },
{ binding: '部署名' }
]
},
{
cells: [
{ binding: '出荷先名', rowspan: 2 },
{ binding: '郵便番号' },
{ binding: '住所', width: 300 },
]
},
{
cells: [
{ binding: '商品名', width: 240 },
{ binding: '区分名' },
{ binding: '単価', format: 'c' },
{ binding: '数量' },
{ binding: '合計', format: 'c' }
]
}
]
・・・（中略）上記の例の場合、1レコードに対する縦方向の幅はセル5つ分となりますが、1列目の「受注コード」や3列目の「住所」のフィールドのように、「rowspan」を指定しない場合であっても、全体の縦方向の幅にマッチするように、列の中の一番最後のフィールドの縦の幅が自動的に拡大されます。
列ヘッダーのレイアウトのカスタマイズ
MultiRowではグリッドのレイアウトを定義する「layoutDefinition」プロパティのほか、ヘッダーのレイアウトを個別に定義するための「headerLayoutDefinition」プロパティが利用可能です。以下の例では、ヘッダーの下2行は明細行と同じレイアウトにして、その上に列をグループ化するためのヘッダーセルを生成しています。
layoutDefinition: [
{
header: '受注コード',
cells: [
{ binding: '受注コード' }
]
},
{
header: '受注情報',
align: 'center',
colspan: 4, cells: [
{ binding: '氏名', colspan: 2 },
{ binding: '出荷先名', width: 240 },
{ binding: '郵便番号', width: 120 },
{ binding: '在籍支社' },
{ binding: '部署名' },
{ binding: '住所' },
]
},
{
header: '明細情報',
align: 'center',
colspan: 3, cells: [
{ binding: '商品名', colspan: 2 },
{ binding: '区分名' },
{ binding: '単価' },
{ binding: '数量' },
{ binding: '合計' },
]
}
],
headerLayoutDefinition: [
{
cells: [
{ binding: '受注コード' }
]
},
{
colspan: 4, cells: [
{ header: '受注情報', align: 'center', colspan: 4 },
{ header: '担当社員', align: 'center', colspan: 2 },
{ header: '出荷先', align: 'center', colspan: 2},
{ binding: '氏名', colspan: 2 },
{ binding: '出荷先名' },
{ binding: '郵便番号' },
{ binding: '在籍支社' },
{ binding: '部署名' },
{ binding: '住所' },
]
},
{
colspan: 3, cells: [
{ header: '明細情報', align: 'center', colspan: 2, rowspan: 2 },
{ binding: '商品名', colspan: 2 },
{ binding: '区分名' },
{ binding: '単価' },
{ binding: '数量' },
{ binding: '合計' },
]
}
]
列ヘッダーを折りたたむ
Multirowでは、列ヘッダーを1行に折りたたみ、個別のセルではなくグループ名だけを表示することができます。グリッド上のスペースを節約し、データをより多く表示したい場合などに有用です。
列ヘッダーを折りたたむには、「collapsedHeaders」プロパティを「true」に設定します。また、「showHeaderCollapseButton」プロパティを「true」に設定すると、列ヘッダーの折りたたみと展開を切り替えるボタンをグリッドの右上に表示できます。
この時、「layoutDefinition」プロパティの各セルグループに「header」を設定していないと、折りたたんだ時に正しくラベルが表示されないのでご注意ください。
document.addEventListener("DOMContentLoaded", function () {
let multirow = new wijmo.grid.multirow.MultiRow('#Wijmo_MultiRow', {
collapsedHeaders: true,
showHeaderCollapseButton: true,
itemsSource: orders,
・・・（中略）今回ご紹介したヘッダーのカスタマイズ設定は以下のデモアプリケーションでも確認できます（“Run Project”をクリックするとデモが起動します）。
さいごに
今回は1レコードに複数行を表示できるデータグリッドコントロール「MultiRow」の基本的な用法をご紹介しました。スペースの限られた画面上に多くのデータを表示したり、データをグループ化して見易くしたりなど、非常に有用なコントロールですので、是非ご利用検討いただければと思います。
この他にもWijmoの各種コントロールの基本的な使い方や応用的な使い方の解説を連載記事として公開しています。こちらも是非ご覧ください。
弊社Webサイトでは、製品の機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。