Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

JavaScriptライブラリ「Wijmo(ウィジモ) 5」で1レコード複数行表示のグリッドを実現

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第13回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

layoutDefinition属性でMultiRowのレイアウトを調整する

 layoutDefinition属性に指定するレイアウト定義について、さまざまな表示パターンでMultiRowを表示する図3のサンプルで説明します。

図3 MultiRowのさまざまな表示(P002-layout)
図3 MultiRowのさまざまな表示(P002-layout)

基本的な指定パターン

 もっとも単純なレイアウト定義を、リスト5で説明します。

リスト5 レイアウト定義の例(P002-layout/src/app/app.component.ts)
layoutDef1 = [
  {
    header: "レイアウト例1",
    cells: [
      { binding: "苗字" },
      { binding: "名前" },
      { binding: "性別" },
    ]
  }
];

 レイアウト定義の要素を表1に示します。グループヘッダーは、ヘッダーを折りたたんだ時に表示されるヘッダー文字列です。ヘッダーの折りたたみについては後述します。

表1 レイアウト定義の要素
要素名 意味
header グループヘッダー
cells グループに指定するデータ要素の配列
binding cells配列の要素に指定する、データ項目名

 リスト5のように指定すると、cellsに指定された苗字、名前、性別のデータ項目が、縦に並んで表示されます。

図4 リスト5に対応するMultiRowの表示(P002-layout)
図4 リスト5に対応するMultiRowの表示(P002-layout)

colspanの指定でセルを横に並べる

 レイアウト定義にcolspanを指定すると、1つのグループ内で要素を横に並べることができます。指定例をリスト6に示します。

リスト6 colspanでデータを横に並べるレイアウト定義(P002-layout/src/app/app.component.ts)
layoutDef2 = [
  {
    header: "レイアウト例2",
    colspan: 2,
    cells: [
      { binding: "苗字" },
      { binding: "名前" },
      { binding: "性別" },
    ]
  }
];

 colspanを2に指定すると、cellsのデータ要素を最大2個だけ横に並べます。この場合は苗字と名前の2個を横に並べて、3個目の性別は2行目に折り返して表示されます。

図5 リスト6に対応するMultiRowの表示(P002-layout)
図5 リスト6に対応するMultiRowの表示(P002-layout)

 リスト7のように、colspanをcells配列の要素に設定することもできます。

リスト7 cells配列要素にcolspanを設定するレイアウト定義(P002-layout/src/app/app.component.ts)
layoutDef3 = [
  {
    header: "レイアウト例3",
    cells: [
      { binding: "苗字", colspan: 2 },
      { binding: "名前" },
      { binding: "性別" },
    ]
  }
];

 この場合、colspanに2が設定されている苗字の項目が、横に2列分の幅をとって表示され、名前と性別は折り返した2行目に横並びで表示されます。

図6 リスト7に対応するMultiRowの表示(P002-layout)
図6 リスト7に対応するMultiRowの表示(P002-layout)

セルに属性を設定してレイアウトを調整

 cells配列要素に指定する各データ項目には、レイアウトやフォーマットといった属性が設定できます。例をリスト8に示します。

リスト8 cells配列要素に属性を設定(P002-layout/src/app/app.component.ts)
layoutDef4 = [
  {
    header: "レイアウト例4",
    cells: [
      { binding: "苗字", align: "right" },
      { binding: "誕生日", align: "center", format: "yyyy/M/d" },
      { binding: "体重", align: "left", format: "f1" },
    ]
  }
];

 データ項目に対して、align属性で右/中央/左寄せを、format属性で日時や数字の表示形式を指定しています。体重に指定されたformat属性「f1」は、小終点第1位までを表示する意味です。

図7 リスト8に対応するMultiRowの表示(P002-layout)
図7 リスト8に対応するMultiRowの表示(P002-layout)

 リスト8で利用した属性のほかに、FlexGridの列を表すColumnクラスの属性が設定できます。詳細はドキュメントを参照してください。

参考 レイアウトの動的な切り替え

 layoutDefinition属性にあとから別のレイアウト定義を代入すると、MultiRowのレイアウトを動的に切り替えることができます。図8のサンプルは、ボタン押下でレイアウトが切り替わります。処理の詳細はサンプルコードを参照してください。

図8 MultiRowのレイアウトを切り替えるサンプル(P003-layout-change)
図8 MultiRowのレイアウトを切り替えるサンプル(P003-layout-change)

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5