SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

「ActiveReportsJS」ではじめるフロントエンド帳票開発(AD)

帳票出力でデータの集計や分類を行える「ActiveReportsJS」のテーブル機能

「ActiveReportsJS」ではじめるフロントエンド帳票開発 第2回

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

データのグループ化

 Tableレポートコントロールでは、特定の条件でデータを集めて、グループ単位で表示できます。図8のサンプルでは、メーカー(データ項目「vendor」)が同じデータをグループ化して表示します。また、前述の集計機能で、グループ単位と、全体での平均価格/在庫数を表示します。

図8 データをグループ表示するサンプル(p002-group)
図8 データをグループ表示するサンプル(p002-group)

 グループを設定するには、まず表を右クリックして、「グループ」-「グループの挿入」を選択します。

図9 表にグループを挿入(p002-group/p002-group.rdlx-json)
図9 表にグループを挿入(p002-group/p002-group.rdlx-json)

 次に、グループの基準とするデータ項目を設定します。表の右側に表示される「グループ」欄からグループを選択して、「プロパティ」の「式」で、グループの基準とするデータ項目(ここでは「vendor」)を選択します。

図10 グループの基準とするデータ項目の設定(p002-group/p002-group.rdlx-json)
図10 グループの基準とするデータ項目の設定(p002-group/p002-group.rdlx-json)

 グループを追加すると、グループに対応するヘッダ行とフッタ行が1組増えて表示されるので、グループ単位で表示したい内容(ヘッダ行のタイトルやフッタ行の集計式など)を設定できます。グループ単位とは別に、表全体のヘッダ行とフッタ行も設定できます。

図11 グループと表全体のヘッダ行・フッタ行(p002-group/p002-group.rdlx-json)
図11 グループと表全体のヘッダ行・フッタ行(p002-group/p002-group.rdlx-json)

 なお、グループは入れ子にして複数設定できます。図12は、メーカー(vendor)の下位に、5G対応(is5G)のグループを設定した例です。基本的な設定方法は1グループの場合と変わりません。詳細はサンプルコード(p003-group-multi/p003-group-multi.rdlx-json)を参照してください。

図12 複数のグループを設定したサンプル(p003-group-multi)
図12 複数のグループを設定したサンプル(p003-group-multi)

[補足]Tableを操作するメニュー

 Tableの操作時は、帳票デザイナの上部(リボン部分)に「Table」というメニューが表示されます。このメニューは、表、行、列、セルの各選択時で異なる内容が表示され、選択している要素に対する操作が行えます。

図13 帳票デザイナのTableメニュー(上から表、行、列、セルの選択時)
図13 帳票デザイナのTableメニュー(上から表、行、列、セルの選択時)

次のページ
フィルタでデータを絞り込み

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
「ActiveReportsJS」ではじめるフロントエンド帳票開発連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

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

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/12632 2020/08/06 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング