JavaScript関数を使用してデータレポートを作成する-jsチュートリアル-php.cn

スポーツイベントまたは競技会があると仮定します。ほとんどの場合、結果はデータベースに保存され、Web サイトにリストされる必要があります。 Fetch API を使用して、バックエンドからデータをフェッチできます。これについては、この文書では説明しません。データはすでに取得されており、レコードの配列であると仮定します。このレコードの配列は正しい順序である必要がありますが、ソース関数 はレポートエンジン内でその場で配列をフィルタリングおよび並べ替えることができます。

このドキュメントでは、ヘッダー と フッター を非常に簡単に定義する方法と、比較関数 によってレコードのグループ化を調整する方法について説明します。

各 ヘッダー関数 は、静的テキストとパラメータ currentRecord、objWork、splitPosition に基づいて HTML を返します。各フッター関数は、静的テキストとパラメータpreviousRecord、objWork、splitPositionに基づいてhtmlを返します。

非常に柔軟性がありますが、HTML は自分で作成する必要があります。 WYSIWYG エディターを期待しないでください。

レポートの一般的な構造

レポートにはレポートヘッダーとフッターがあります。テキスト、HTML のみ、またはその両方を使用できます。
レポートには 1 つ以上のセクションレベルがあります。セクションレベル N はヘッダーレベル N で始まり、フッターレベル N で終わります。
セクションレベル N には、最上位のセクションレベルを除き、セクションレベル N 1 の 1 倍以上が含まれます。
最上位のセクションレベルには、配列内のレコードに基づいて作成されたデータが含まれます。ほとんどの場合、最高のセクションレベルは単なる HTML テーブルまたは HTML フレックス項目です。

レポート構成の例

Create data reports using javascript function

reportDefinition というレポート定義オブジェクトの構造

const reportDefinition = {};
reportDefinition.headers = [report_header, header_level_1, header_level_2, header_level_3, ...]; // default = []
reportDefinition.footers = [report_footer, footer_level_1, footer_level_2, footer_level_3, ...]; // default = []
reportDefinition.compare = (previousRecord, currentRecord, objWork) => {
    // default = () => -1
    // code that returns an integer (report level break number)
};
reportDefinition.display = (currentRecord, objWork) => {
    // code that returns a string, for example
    return `${currentRecord.team} - ${currentRecord.player}`;
};
// source array can be preprocessed, for example filter or sort
reportDefinition.source = (arr, objWork) => preProcessFuncCode(arr); // optional function to preprocess data array
// example to add extra field for HOME and AWAY and sort afterwards
reportDefinition.source = (arr, objWork) => arr.flatMap(val => [{ team: val.team1, ...val }, { team: val.team2, ...val }])
    .sort((a, b) => a.team.localeCompare(b.team));
// optional method 'init' which should be a function. It will be called with argument objWork
// can be used to initialize some things.
reportDefinition.init = objWork => { ... };

ログイン後にコピー

ヘッダーとフッターの配列要素の例

reportDefinition.headers = [];
// currentRecord=current record, objWork is extra object,
// splitPosition=0 if this is the first header shown at this place, otherwise it is 1, 2, 3 ...
reportDefinition.headers[0] = (currentRecord, objWork, splitPosition) => {
    // code that returns a string
};
reportDefinition.headers[1] = '<div>Some string</div>'; // string instead of function is allowed;
reportDefinition.footers = [];
// previousRecord=previous record, objWork is extra object,
// splitPosition=0 if this is the last footer shown at this place, otherwise it is 1, 2, 3 ...
reportDefinition.footers[0] = (previousRecord, objWork, splitPosition) => {
    // code that returns a string
};
reportDefinition.footers[1] = '<div>Some string</div>'; // string instead of function is allowed;

ログイン後にコピー

コンペア機能の例

// previousRecord=previous record, currentRecord=current record, objWork is extra object,
reportDefinition.compare = (previousRecord, currentRecord, objWork) => {
    // please never return 0! headers[0] will be displayed automagically on top of report
    // group by date return 1 (lowest number first)
    if (previousRecord.date !== currentRecord.date) return 1;
    // group by team return 2
    if (previousRecord.team !== currentRecord.team) return 2;
    // assume this function returns X (except -1) then:
    // footer X upto and include LAST footer will be displayed (in reverse order). In case of footer function the argument is previous record
    // header X upto and include LAST header will be displayed. In case of header function the argument is current record
    // current record will be displayed
    //
    // if both records belong to same group return -1
    return -1;
};

ログイン後にコピー

ランニングカウンター

実行中のカウンターを実装したい場合は、適切な場所で初期化/リセットする必要があります。これは、関連するヘッダーにコードを追加することで実現できます:

reportDefinition.headers[2] = (currentRecord, objWork, splitPosition) => {
    // this is a new level 2 group. Reset objWork.runningCounter to 0
    objWork.runningCounter = 0;
    // put extra code here
    return `<div>This is header number 2: ${currentRecord.team}</div>`;
};

ログイン後にコピー

レポートの先頭で objWork.runningCounter のみを初期化したい場合は、reportDefinition.headers[0] に適切なコードを入れることで実現できます。私はそれをプロパティ runningCounter と呼びますが、任意の名前を付けることができます。

コード内のどこかで実行中のカウンタを増やす必要があります。そうしないと実行されません ;-) 例:

const reportDefinition = {};
reportDefinition.headers = [report_header, header_level_1, header_level_2, header_level_3, ...]; // default = []
reportDefinition.footers = [report_footer, footer_level_1, footer_level_2, footer_level_3, ...]; // default = []
reportDefinition.compare = (previousRecord, currentRecord, objWork) => {
    // default = () => -1
    // code that returns an integer (report level break number)
};
reportDefinition.display = (currentRecord, objWork) => {
    // code that returns a string, for example
    return `${currentRecord.team} - ${currentRecord.player}`;
};
// source array can be preprocessed, for example filter or sort
reportDefinition.source = (arr, objWork) => preProcessFuncCode(arr); // optional function to preprocess data array
// example to add extra field for HOME and AWAY and sort afterwards
reportDefinition.source = (arr, objWork) => arr.flatMap(val => [{ team: val.team1, ...val }, { team: val.team2, ...val }])
    .sort((a, b) => a.team.localeCompare(b.team));
// optional method 'init' which should be a function. It will be called with argument objWork
// can be used to initialize some things.
reportDefinition.init = objWork => { ... };

ログイン後にコピー

複数のセクションレベルの合計、累計、偶数番号付きヘッダーを作成する方法

reportDefinition.headers = [];
// currentRecord=current record, objWork is extra object,
// splitPosition=0 if this is the first header shown at this place, otherwise it is 1, 2, 3 ...
reportDefinition.headers[0] = (currentRecord, objWork, splitPosition) => {
    // code that returns a string
};
reportDefinition.headers[1] = '<div>Some string</div>'; // string instead of function is allowed;
reportDefinition.footers = [];
// previousRecord=previous record, objWork is extra object,
// splitPosition=0 if this is the last footer shown at this place, otherwise it is 1, 2, 3 ...
reportDefinition.footers[0] = (previousRecord, objWork, splitPosition) => {
    // code that returns a string
};
reportDefinition.footers[1] = '<div>Some string</div>'; // string instead of function is allowed;

ログイン後にコピー

オンザフライでソース配列を前処理する方法 (クリックイベントなど)

// previousRecord=previous record, currentRecord=current record, objWork is extra object,
reportDefinition.compare = (previousRecord, currentRecord, objWork) => {
    // please never return 0! headers[0] will be displayed automagically on top of report
    // group by date return 1 (lowest number first)
    if (previousRecord.date !== currentRecord.date) return 1;
    // group by team return 2
    if (previousRecord.team !== currentRecord.team) return 2;
    // assume this function returns X (except -1) then:
    // footer X upto and include LAST footer will be displayed (in reverse order). In case of footer function the argument is previous record
    // header X upto and include LAST header will be displayed. In case of header function the argument is current record
    // current record will be displayed
    //
    // if both records belong to same group return -1
    return -1;
};

ログイン後にコピー

レポートの生成方法

reportDefinition.headers[2] = (currentRecord, objWork, splitPosition) => {
    // this is a new level 2 group. Reset objWork.runningCounter to 0
    objWork.runningCounter = 0;
    // put extra code here
    return `<div>This is header number 2: ${currentRecord.team}</div>`;
};

ログイン後にコピー

ソースコード

以下のソースコードは、これをすべて機能させるために作成したものです。これは、すべてのヘッダーとフッターのラッパー関数の一種です。自由にコピーして貼り付けて、独自のモジュールで使用してください。

reportDefinition.display = (currentRecord, objWork) => {
    objWork.runningCounter++;
    // put extra code here
    return `<div>This is record number ${objWork.runningCounter}: ${currentRecord.team} - ${currentRecord.player}</div>`;
};

ログイン後にコピー

objWorkとは

objWork は、createOutput 関数の 2 番目の引数として渡される JavaScript オブジェクトです (オプションの引数、デフォルトは {})。これは、ヘッダー関数、フッター関数、比較関数、初期化関数、ソース関数、および表示関数に浅いコピーとして渡されます。これらすべての関数はこのオブジェクトを共有します。たとえば、構成情報や色のテーマなどに使用できます。 objWork は、{ rawData: thisData } で自動的に拡張されます。たとえば、createOutput(reportDefinition, { font: 'Arial', font_color: 'blue' }).