자바스크립트 기능을 사용하여 데이터 보고서 만들기-JS 튜토리얼-php.cn

스포츠 행사나 대회가 있다고 가정해 보겠습니다. 대부분의 결과는 데이터베이스에 저장되고 웹사이트에 나열되어야 합니다. Fetch API를 사용하여 백엔드에서 데이터를 가져올 수 있습니다. 이 문서에서는 이에 대해 설명하지 않습니다. 데이터가 이미 검색되었으며 레코드 배열이라고 가정합니다. 이 레코드 배열은 올바른 순서로 되어 있어야 하지만 소스 함수는 보고서 엔진 내에서 즉시 배열을 필터링하고 정렬할 수 있습니다.

본 문서에서는 머리글과 바닥글을 아주 쉽게 정의하는 방법과 비교 기능을 통해 레코드 그룹화를 정리하는 방법을 설명합니다.

각 헤더 함수는 정적 텍스트와 매개변수 currentRecord, objWork 및 SplitPosition을 기반으로 html을 반환합니다. 각 바닥글 함수는 정적 텍스트와 이전Record, objWork 및 SplitPosition 매개변수를 기반으로 html을 반환합니다.

매우 유연하지만 HTML을 직접 만들어야 합니다! WYSIWYG 편집기를 기대하지 마십시오.

보고서의 일반 구조

보고서에는 보고서 머리글과 바닥글이 있습니다. 텍스트이거나 HTML이거나 둘 다일 수 있습니다.
보고서에는 하나 이상의 섹션 수준이 있습니다. 섹션 수준 N은 머리글 수준 N으로 시작하고 바닥글 수준 N으로 끝납니다.
섹션 수준 N에는 가장 높은 섹션 수준을 제외하고 하나 이상의 섹션 수준 N 1이 포함됩니다.
가장 높은 섹션 레벨에는 배열의 레코드를 기반으로 생성된 데이터가 포함됩니다. 대부분의 경우 가장 높은 섹션 수준은 html 테이블 또는 html flex 항목입니다.

보고서 구조의 예

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 함수의 두 번째 인수(선택 인수, 기본값 {})로 전달되는 자바스크립트 객체입니다. 헤더 함수, 바닥글 함수, 비교 함수, 초기화 함수, 소스 함수 및 표시 함수에 얕은 복사본으로 전달됩니다. 이러한 모든 함수는 이 개체를 공유합니다. 예를 들어 구성 정보나 색상 테마에 사용할 수 있습니다. objWork는 { rawData: thisData }를 사용하여 자동으로 확장됩니다. 예를 들어 createOutput(reportDefinition, {font: 'Arial',font_color: 'blue' }).