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.
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;
};
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 => { ... };
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>`;
};
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>`;
};
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' }).
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!
