プリザンターの一覧画面で、フィルタ条件に応じた数値項目の合計を表示する

はじめに

プリザンターの記録テーブルを使って、数値項目の計算結果を表示し、フィルタ後の合計値を集計する方法を説明します。

例として、以下のようなデータを扱います。

記録テーブル

分類A	数値A	分類B	数値B
A	1000	AA	123
B	2000	CC	456
C	3000	CC	789
D	4000	BB	999

ここでの分類Aは ClassA、数値Aは NumA、数値Bは NumB として扱います。

ここでは、各レコードごとに 数値A と 数値B を足し合わせた値を表示してみます。

分類A	数値A	分類B	数値B	数値A+数値B
A	1000	AA	123	1123
B	2000	CC	456	2456
C	3000	CC	789	3789
D	4000	BB	999	4999

数値A+数値Bの値を表示したい場合は、計算結果を格納するための数値項目として NumCを作成し、計算式を設定します。

１．数値Cを作成する

２．計算式に「数値A + 数値B」を設定する

３．結果

集計したい

次に、フィルタで絞り込んだレコードに対して、数値項目の合計値を表示します。

たとえば、分類Aや分類Bで特定の項目を選択した場合でも、プリザンターの集計を設定しておくことで、フィルタ後の内容に応じて自動的に再集計されます。

１．集計を設定する

テーブルの管理画面から、集計を選択し、分類無しを追加します。

２．集計方法を設定する

詳細設定で、集計種別を合計、集計対象を数値Aに設定します。

同じように数値Bと数値A+数値Bについても集計を作成します。

３．結果

集計値が表示されました。

分類BでCCを選択すると、フィルタ後のレコードを対象に集計値が表示されます。

スクリプトでやってみる

標準の集計機能で合計値を表示できますが、表の上に独自の集計バーを表示したい場合は、スクリプトで実装することもできます。

以下は、一覧画面に読み込まれている行から数値Aと数値Bを読み取り、表の上に集計バーを表示する例です。

テーブルの管理 → スクリプトで、出力先を一覧にして設定します。

$p.events.on_grid_load = function () {
    const parseNum = function (text) {
        const n = Number(String(text || '').replace(/,/g, '').trim());
        return isNaN(n) ? 0 : n;
    };

    let sumA = 0;
    let sumB = 0;

    $('tr[data-id]').each(function () {
        const id = $(this).attr('data-id');

        const cellA = $p.getGridCell(id, '数値A');
        const cellB = $p.getGridCell(id, '数値B');

        sumA += parseNum(cellA.text());
        sumB += parseNum(cellB.text());
    });

    const total = sumA + sumB;

    $('#CustomSumBar').remove();

    const html = `
        <div id="CustomSumBar" style="
            margin: 8px 0 12px 0;
            padding: 10px 14px;
            border: 1px solid #d0d7de;
            border-radius: 6px;
            background: #f6f8fa;
            font-weight: bold;">
            集計：
            数値A = ${sumA.toLocaleString()}　
            数値B = ${sumB.toLocaleString()}　
            A+B = ${total.toLocaleString()}
        </div>
    `;

    $('#Grid').before(html);
};

結果

このスクリプトでは、一覧画面に表示されている行を対象に集計しています。

そのため、フィルタ条件に一致する全件を正確に集計したい場合は、標準の集計機能を使うほうが安全です。

さいごに

プリザンターでは、数値項目同士の計算は計算式ィルタ後の合計表示は 集計 を使うことで、スクリプトを書かなくても実現できます。

今回のように数値A+数値Bの合計を表示したい場合は、まず計算結果を格納する数値項目を作成し、その項目を集計対象にするのが扱いやすいと思います。