Buat laporan data menggunakan fungsi javascript

Anggap anda mempunyai acara sukan atau pertandingan. Kemungkinan besar keputusan akan disimpan dalam pangkalan data dan perlu disenaraikan di laman web. Anda boleh menggunakan API Ambil untuk mengambil data dari bahagian belakang. Ini tidak akan dijelaskan dalam dokumen ini. Saya menganggap data telah diambil semula dan merupakan susunan rekod. Tatasusunan rekod ini mestilah dalam susunan yang betul, tetapi fungsi sumber boleh menapis dan mengisih tatasusunan dengan pantas dalam enjin laporan.

Dokumen ini menghuraikan cara untuk mentakrifkan pengepala dan pengaki dengan sangat mudah dan cara mengatur pengumpulan rekod dengan fungsi bandingkan juga.

Setiap fungsi pengepala mengembalikan html berdasarkan teks statik dan parameter currentRecord, objWork dan splitPosition. Setiap fungsi footer mengembalikan html berdasarkan teks statik dan parameter previousRecord, objWork dan splitPosition.

Ia sangat fleksibel, tetapi anda perlu membuat html sendiri! Jangan mengharapkan editor WYSIWYG.

Struktur am laporan

• Laporan mempunyai pengepala dan pengaki laporan. Boleh dalam bentuk teks atau hanya html atau kedua-duanya sekali.
• Laporan mempunyai satu atau lebih peringkat bahagian. Tahap bahagian N bermula dengan tahap pengepala N dan berakhir dengan tahap pengaki N.
• Aras bahagian N mengandungi satu atau beberapa kali tahap bahagian N 1, kecuali tahap bahagian tertinggi.
• Tahap bahagian tertinggi mengandungi data yang dibuat berdasarkan rekod dalam tatasusunan. Dalam kebanyakan kes, tahap bahagian tertinggi hanyalah jadual html atau item fleksibel html.

Contoh struktur laporan

Struktur objek definisi laporan dipanggil 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 => { ... };

Contoh elemen tatasusunan pengepala dan pengaki

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;

Contoh fungsi bandingkan

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

Kaunter lari

Sekiranya anda ingin melaksanakan kaunter berjalan, anda perlu memulakan/menetap semulanya di tempat yang betul. Ia boleh dicapai dengan meletakkan beberapa kod dalam pengepala yang berkaitan:

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

Jika anda hanya mahu memulakan objWork.runningCounter pada permulaan laporan, anda boleh mencapainya dengan meletakkan kod yang betul dalam reportDefinition.headers[0]. Saya memanggilnya harta runningCounter, tetapi anda boleh memberikannya apa-apa nama yang anda mahukan.

Anda perlu meningkatkan kaunter berjalan di suatu tempat dalam kod anda kerana... jika tidak, ia tidak berjalan ;-) contohnya:

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

Cara membuat jumlah untuk berbilang peringkat bahagian, jumlah berjalan dan juga pengepala bernombor

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;

Cara untuk mempraproses tatasusunan sumber dengan cepat (contohnya dalam acara klik)

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

Bagaimana untuk menjana laporan

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

Kod sumber

Di bawah kod sumber yang saya buat untuk menjadikan ini semua berfungsi. Ia adalah jenis fungsi pembalut untuk semua pengepala dan pengaki. Sila salin tampal dan gunakannya dalam modul anda sendiri.

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

Apa itu objWork

objWork ialah objek javascript yang diluluskan sebagai argumen kedua untuk createOutput fungsi (argumen pilihan, lalai {}). Ia dihantar sebagai salinan cetek kepada fungsi pengepala, fungsi pengaki, fungsi bandingkan, fungsi init, fungsi sumber dan fungsi paparan. Semua fungsi ini berkongsi objek ini. Anda boleh menggunakannya sebagai contoh untuk maklumat konfigurasi atau tema warna. objWork dilanjutkan secara automatik dengan { rawData: thisData }. Contohnya createOutput(reportDefinition, { font: 'Arial', font_color: 'blue' }).

Contoh

Contoh yang disenaraikan di bawah ditulis dalam bahasa Belanda.
Laporan untuk kelab biliard
Laporan untuk markah biliard
Lebih banyak laporan untuk biliard karom
Laporan untuk petanque
dan banyak lagi....

Atas ialah kandungan terperinci Buat laporan data menggunakan fungsi javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!