Erstellen Sie Datenberichte mit der Javascript-Funktion

Angenommen, Sie veranstalten eine Sportveranstaltung oder einen Wettkampf. Höchstwahrscheinlich werden die Ergebnisse in einer Datenbank gespeichert und müssen auf einer Website aufgeführt werden. Sie können die Fetch-API verwenden, um die Daten vom Backend abzurufen. Dies wird in diesem Dokument nicht erläutert. Ich gehe davon aus, dass die Daten bereits abgerufen wurden und ein Array von Datensätzen sind. Dieses Array von Datensätzen muss in der richtigen Reihenfolge vorliegen, aber die Quellenfunktion kann das Array im laufenden Betrieb innerhalb der Berichts-Engine filtern und sortieren.

In diesem Dokument wird beschrieben, wie Sie ganz einfach Kopfzeilen und Fußzeilen definieren und wie Sie die Datensatzgruppierung auch über die Vergleichsfunktion anordnen.

Jede Header-Funktion gibt HTML basierend auf statischem Text und den Parametern currentRecord, objWork und splitPosition zurück. Jede Fußzeilenfunktion gibt HTML basierend auf statischem Text und den Parametern previousRecord, objWork und splitPosition zurück.

Es ist sehr flexibel, aber Sie müssen das HTML selbst erstellen! Erwarten Sie keinen WYSIWYG-Editor.

Allgemeine Struktur eines Berichts

• Der Bericht verfügt über eine Berichtskopf- und -fußzeile. Kann Text oder nur HTML oder beides sein.
• Der Bericht verfügt über eine oder mehrere Abschnittsebenen. Die Abschnittsebene N beginnt mit der Kopfzeilenebene N und endet mit der Fußzeilenebene N.
• Abschnittsebene N enthält ein oder mehrere Mal Abschnittsebene N 1, mit Ausnahme der höchsten Abschnittsebene.
• Die höchste Abschnittsebene enthält die Daten, die basierend auf den Datensätzen im Array erstellt wurden. In den meisten Fällen ist die höchste Abschnittsebene nur eine HTML-Tabelle oder ein HTML-Flex-Element.

Beispiel einer Berichtsstruktur

Struktur des Berichtsdefinitionsobjekts namens „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 => { ... };

Beispiele für Kopf- und Fußzeilen-Array-Elemente

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;

Beispiel einer Vergleichsfunktion

// 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;
};

Laufzähler

Falls Sie einen laufenden Zähler implementieren möchten, müssen Sie ihn an der richtigen Stelle initialisieren/zurücksetzen. Dies kann durch Einfügen von Code in den entsprechenden Header erreicht werden:

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>`;
};

Wenn Sie objWork.runningCounter nur am Anfang des Berichts initialisieren möchten, können Sie dies erreichen, indem Sie den richtigen Code in reportDefinition.headers[0] einfügen. Ich nenne es Eigenschaft runningCounter, aber Sie können ihm einen beliebigen Namen geben.

Sie müssen den laufenden Zähler irgendwo in Ihrem Code erhöhen, weil... er sonst nicht läuft ;-) zum Beispiel:

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 => { ... };

So erstellen Sie Summen für mehrere Abschnittsebenen, eine laufende Summe und sogar eine nummerierte Kopfzeile

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;

So verarbeiten Sie das Quellarray im laufenden Betrieb (z. B. in einem Klickereignis)

// 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;
};

So erstellen Sie den Bericht

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>`;
};

Quellcode

Nachstehend habe ich den Quellcode erstellt, damit das alles funktioniert. Es handelt sich um eine Art Wrapper-Funktion für alle Kopf- und Fußzeilen. Sie können es gerne kopieren, einfügen und in Ihrem eigenen Modul verwenden.

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

Was ist objWork

objWork ist ein Javascript-Objekt, das als zweites Argument an die Funktion „createOutput“ übergeben wird (optionales Argument, Standardwert {}). Es wird als flache Kopie an Kopfzeilenfunktionen, Fußzeilenfunktionen, Vergleichsfunktion, Init-Funktion, Quellfunktion und Anzeigefunktion weitergegeben. Alle diese Funktionen teilen sich dieses Objekt. Sie können es beispielsweise für Konfigurationsinformationen oder Farbthemen verwenden. objWork wird automatisch mit { rawData: thisData } erweitert. Zum Beispiel createOutput(reportDefinition, { Font: 'Arial', Font_Color: 'Blue' }).

Beispiele

Die unten aufgeführten Beispiele sind auf Niederländisch verfasst.
Berichte für Billardclub
Berichte für Billardergebnisse
Weitere Berichte zum Thema Karamell-Billard
Berichte für Petanque
und viele mehr....

Das obige ist der detaillierte Inhalt vonErstellen Sie Datenberichte mit der Javascript-Funktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!