JavaScript 하위 보고서를 웹 앱에 추가하는 방법
페이지 정보
작성자 MESCIUS
작성일 2024-04-23 17:06 조회 21회
댓글 0건
본문
관련링크
재사용 가능한 컴포넌트를 따라 모델링된 이 접근 방식을 사용하면 개발 프로세스가 간소화되어, 효율적 업데이트, 수정, 확장을 통해 보고 인프라를 더 확장할 수 있습니다.
ActiveReportsJS JavaScript 보고서 디자이너를 통해 보고서 작성자는 손쉽게 하위 보고서를 작성하여 마스터 보고서에 바인딩할 수 있습니다. ActiveReportsJS에서는 하위 보고서와 함께 중첩된 하위 보고서를 사용할 수 있기 때문에, 더 많은 모듈형 보고서 구조를 만들 수 있습니다.
이 문서에서는 ActiveReportsJS를 사용하여 판매용 자동차 목록을 표시하기 위한 중첩된 하위 보고서를 만드는 방법을 보여줍니다. 다음과 같은 주제를 다루게 됩니다.
하위 보고서 만들기
다른 보고서에서 하위 보고서 구현
중첩된 하위 보고서를 마스터 보고서에 로드
JavaScript 응용 프로그램에서 마스터 보고서 보기
이 문서에서는 사용자가 데이터 소스와 컨트롤을 보고서에 추가하는 데 관한 기본 사항을 알고 있다고 가정합니다. ActiveReportsJS를 시작하는 데 대한 자세한 내용은 페이지를 확인하십시오.
직접 해보고 싶으시다면 에서 전체 보고서와 프로젝트를 다운로드하십시오.
하위 보고서 만들기
가장 먼저 첫 번째 하위 보고서를 만듭니다. 하위 보고서는 단순히 다른 보고서에 로드되는 ActiveReportsJS 보고서이므로, 하위 보고서를 만드는 프로세스는 표준 보고서와 같습니다.
일부 데이터를 로드하고, 보고서에 컨트롤을 추가하고 데이터를 컨트롤에 바인딩하면 됩니다.
이 보고서의 경우. 자동차 제조업체에 대한 일부 기본 데이터를 사용합니다.
다음 조각은 일부 데이터를 보여줍니다.
{
"manufacturerId": 962,
"manufacturerName": "Toyota Motor North America",
"address": "6565 Headquarters Drive",
"city": "Washington",
"state": "Texas",
"postalCode": "75024",
"country": "United States",
"email": "contact@toyota.com",
"phone": "757-254-2810",
"fax": "1-408-999 7777"
},전체 데이터는 보고서에 데이터 소스로 포함될 Manufacturers.json 파일에서 확인할 수 있습니다.
그런 다음 방금 만든 데이터 소스를 사용하여 데이터 집합을 추가합니다.
이제 사용할 데이터가 있으므로 보고서에 데이터를 표시하기 위해 사용할 수 있는 컨트롤을 추가해야 합니다.
표 컨트롤을 보고서 영역에 끌어 놓습니다. 표 레이아웃을 필요에 맞게 수정할 것입니다.
첫째, 헤더 및 푸터 행을 삭제하고 세부 정보 행 3개와 열 1개를 추가합니다.
그런 다음 첫 번째 행의 모든 셀을 병합합니다. 완료되면 다음과 같은 표가 표시됩니다.
이제 표를 데이터에 대한 참조의 조합 및 몇 개의 아이콘으로 채웁니다.
아이콘을 로드하려면 이미지 컨트롤을 끌어 원하는 셀에 놓고 컴퓨터에서 보고서에 포함할 이미지를 선택합니다.
이제 보고서 미리 보기를 하면 데이터가 다음과 같이 표시됩니다.
이제 보고서를 하위 보고서로 제대로 활용하려면 매개 변수를 추가해야 합니다.
매개변수를 사용하여 보고서 작성자가 사용자가 런타임에 수정하도록 허용할 수 있습니다.
이 경우, 이 하위 보고서에서 하위 보고서에 전달된 매개 변수의 값을 기반으로 표시할 데이터를 수정합니다.
이 보고서의 경우 ManufacturerId라고 하는 단일 매개 변수를 추가합니다.
보시다시피, Hidden 매개 변수를 True로 설정하고 매개 변수에 기본값을 제공합니다.
매개 변수를 숨김으로써 마스터 보고서와 하위 보고서 사이에 백그라운드로 이 값을 전달할 수 있습니다.
기본값 1002를 설정하면, 보고서 미리 보기에서 해당 ID의 제조업체와 관련된 데이터만 표시되므로, 매개 변수가 작동하는지 테스트할 수 있습니다.
이 보고서에서 매개 변수를 구현하는 최종 단계는 표에 필터를 추가하는 것입니다. 이 필터를 사용하여 제조업체 ID가 일치하는 데이터만 표시할 수 있습니다.
이제 보고서 미리 보기를 하면 ID가 매개 변수에 설정한 기본값과 일치하는 제조업체만 표시됩니다.
이로써 첫 번째 하위 보고서가 작성되었습니다! 작성된 다른 보고서에서 제조업체 ID에 액세스할 수 있다고 가정하겠습니다.
이 경우, 이 보고서를 다시 만드는 대신 이 하위 보고서를 해당 보고서에 로드하여, 보고 인프라의 모듈성을 증대할 수 있습니다.
다음 섹션에서는 이 하위 보고서를 다른 보고서에 로드하는 방법을 설명합니다.
다른 보고서에서 하위 보고서 구현
이제 하위 보고서를 만들었으므로, 하위 보고서를 로드할 다른 보고서를 만들어야 합니다. 이 보고서의 경우, 각 제조업체의 차량과 관련된 일부 기본 정보를 표시합니다.
다음 조각은 일부 데이터를 보여줍니다.
{
"bodyClass": "Wagon",
"make": "TOYOTA",
"model": "FJ Cruiser",
"modelYear": "2008",
"engineModel": "1GR-FE",
"vin": "jtezu11f88k007763",
"manufacturerId": "962"
},보시다시피, 이 데이터에도 하위 보고서에 표시할 데이터를 결정하는 manufacturerId 속성이 있습니다.
전체 데이터는 보고서에 데이터 소스로 포함될 Vehicles.json 파일에서 확인할 수 있습니다.
그런 다음 방금 만든 데이터 소스를 사용하여 데이터 집합을 추가합니다.
이제 사용할 데이터가 있으므로 보고서에 데이터를 표시하기 위해 사용할 수 있는 컨트롤을 추가해야 합니다.
표 컨트롤을 보고서 영역에 끌어 놓습니다. 표 레이아웃을 필요에 맞게 수정할 것입니다. 우선 헤더 및 푸터 행을 삭제하고 세부 정보 행 다섯 개를 추가합니다.
그런 다음 첫 번째 행의 처음 두 셀을 병합하고, 마지막 열에서 2~6행의 셀을 병합합니다. 완료되면 다음과 같은 표가 표시됩니다.
이제 데이터 집합의 데이터로 표를 채우고, 표에 일부 스타일을 적용합니다.
표를 완성하기 위해 비어 있는 큰 셀에 하위 보고서를 추가합니다. 하위 보고서 컨트롤을 셀에 끌어다 놓습니다.
속성 패널에서 보고서 이름 및 보고서 매개 변수 속성을 설정합니다.
보고서 이름에는 이전에 만든 보고서를 사용합니다.
Manufacturers.rdlx-json. 그런 다음 보고서 매개변수의 경우 NAME을 ManufacturerId, VALUE를 {manufacturerId}로 설정합니다.
주의 사항: 첫 번째 주의 사항은 하위 보고서를 바인딩할 때, 보고서가 로드될 위치와 동일한 위치에 하위 보고서가 있어야 한다는 것입니다. 보고서가 보고서 이름 드롭다운에 표시되지 않으면 보고서를 저장해 보십시오.
둘째, 보고서를 추가할 때 하위 보고서에서 만든 매개변수의 이름(이 경우 ManufacturerId)과 일치하는 NAME 값을 제공해야 합니다.
이제 다음과 같은 표가 표시됩니다.
보고서 미리 보기를 하면 다음과 같이 표시됩니다.
이로써 하위 보고서가 다른 보고서에 추가되었습니다! 하지만 아직 끝나지 않았습니다. ActiveReportsJS를 사용하면 하위 보고서를 마스터 보고서에 중첩할 수 있습니다.
첫 번째 하위 보고서와 마찬가지로, 보고서에 매개 변수를 추가하고 표에 필터를 추가하여 이 보고서를 하위 보고서로 사용할 수 있도록 설정해야 합니다. 첫째, VIN이라는 이름의 매개 변수를 추가합니다.
전과 마찬가지로, Hidden 속성을 True로 설정하고 매개 변수의 기본값을 제공합니다.
이 보고서에서 매개 변수를 구현하는 최종 단계는 표에 필터를 추가하는 것입니다. 이 필터를 사용하여 VIN이 일치하는 데이터만 표시할 수 있습니다.
이제 보고서 미리 보기를 하면 VIN이 매개 변수에 설정한 기본값과 일치하는 차량만 표시됩니다.
이제 이 보고서에서 하위 보고서를 구현했을 뿐만 아니라 하위 보고서 자체로 사용할 수 있도록 만들었습니다! 다음 섹션에서는 이 중첩된 하위 보고서를 마스터 보고서에 추가합니다.
중첩된 하위 보고서를 마스터 보고서에 로드
중첩된 하위 보고서를 만든 다음, 마스터 보고서에 로드하고 모든 데이터를 동적으로 표시하도록 모든 것을 설정할 수 있습니다.
이 보고서의 경우, 각 자동차 목록에 정보를 표시합니다.
다음 조각은 일부 데이터를 보여줍니다.
{
"price": 6300,
"mileage": 274117,
"color": "blue",
"vin": "jtezu11f88k007763",
"condition": "Grade 3"
},보시다시피, 이 데이터에도 중첩된 하위 보고서에 표시할 데이터를 결정하는 VIN 속성이 있습니다.
전체 데이터는 보고서에 데이터 소스로 포함될 CarListings.json 파일에서 확인할 수 있습니다.
그런 다음 방금 만든 데이터 소스를 사용하여 데이터 집합을 추가합니다.
이제 데이터를 컴포넌트에 로드하기 전에, 이 보고서는 마스터 보고서이므로 보고서에 페이지 헤더를 추가합니다.
이 보고서의 경우, 헤더에 텍스트 상자 및 이미지 컨트롤을 추가합니다.
이제 페이지 헤더가 설정되었으므로 보고서에 데이터를 표시하기 위해 사용할 수 있는 컨트롤을 추가해야 합니다.
표 컨트롤을 보고서 영역에 끌어 놓습니다. 표 레이아웃을 필요에 맞게 수정할 것입니다.
첫째, 헤더 및 푸터 행을 삭제하고 세부 정보 행 3개와 열 1개를 추가합니다.
그런 다음 두 번째 행의 모든 셀을 병합합니다. 완료되면 다음과 같은 표가 표시됩니다.
이제 데이터 집합의 데이터로 표를 채우고, 표에 일부 스타일을 적용합니다.
표를 완성하기 위해 비어 있는 큰 셀에 하위 보고서를 추가합니다. 하위 보고서 컨트롤을 셀에 끌어다 놓습니다.
속성 패널에서 보고서 이름 및 보고서 매개 변수 속성을 설정합니다. 보고서 이름에는 이전에 만든 보고서를 사용합니다.
Vehicles.rdlx-json. 그런 다음 보고서 매개변수의 경우 NAME을 VIN, VALUE를 {vin}으로 설정합니다.
이제 다음과 같은 표가 표시됩니다.
보고서 미리 보기를 하면 이 보고서의 데이터 및 모든 데이터가 중첩된 하위 보고서의 관련 내용과 함께 올바로 표시됩니다.
이제 마스터 보고서를 만들었으므로, 다음 섹션에서는 JavaScript 응용 프로그램에서 마스터 보고서를 보는 방법을 설명합니다.
JavaScript 응용 프로그램에서 마스터 보고서 보기
이제 보고서가 설정되었으므로, JavaScript 응용 프로그램에 로드해야 합니다.
ActiveReportsJS는 응용 프로그램에 쉽게 로드하여 마스터 보고서를 볼 수 있는 JavaScript 보고서 뷰어를 제공합니다.
첫째, ActiveReportsJS 라이브러리를 응용 프로그램에 추가해야 합니다.
이를 위해 CDN을 사용하겠습니다.
<script> 태그를 사용하여 간단히 다음을 추가합니다.
<link rel="stylesheet" href="https://cdn.mescius.com/activereportsjs/4.latest/styles/ar-js-ui.css" type="text/css" /> <link rel="stylesheet" href="https://cdn.mescius.com/activereportsjs/4.latest/styles/ar-js-viewer.css" type="text/css" /> <script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-core.js"></script> <script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-viewer.js"></script> <script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-pdf.js"></script> <script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js"></script> <script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-html.js"></script>
이렇게 하면 ActiveReportsJS의 CSS 파일 및 JavaScript 보고서 뷰어에 필요한 모든 JavaScript 파일과 내보내기 설정이 로드됩니다.
다음으로 아래에 <script> 를 추가 합니다.
<style>
#viewer-host {
width: 100%;
height: 100vh;
}
</style>그리고 <body> 태그 안에 다음 마크업을 추가합니다.
<div id="viewer-host"></div>
이렇게 하면 JavaScript 보고서 뷰어가 포함될 큰 영역이 있는 div가 생성됩니다.
이제 보고서 뷰어 컨트롤을 응용 프로그램에 추가합니다.
<body> 태그 아래에 다음을 추가합니다.
<script> var viewer = new ActiveReports.Viewer(#viewer-host); viewer.open(CarListings.rdlx-json); </script>
이렇게 하면 생성된 div에 컨트롤이 로드되고 이전 단계에서 만든 CarListings.rdlx-json 보고서가 열립니다.
보고서 파일이 보고서 파일을 로드하는 HTML 파일과 같은 위치에 있는지, 또는 보고서의 경로를 적절히 나타내고 있는지 확인합니다. 하위 보고서도 이 위치에 있어야 합니다.
이제 브라우저에서 응용 프로그램을 실행하고 마스터 보고서를 볼 수 있습니다.
Visual Studio Code용 Live Server 플러그인을 사용하여 응용 프로그램을 실행합니다.
응용 프로그램이 시작하고 모든 것이 올바로 설정된 경우 다음과 같이 표시됩니다.
결론
그리고 이와 함께 끝이 납니다. 이 문서에서는 하위 보고서 만들기 및 바인딩에서 마스터 보고서에 중첩, JavaScript 보고서 뷰어에 로드에 이르기까지 다양한 주제를 다루었습니다.
이 문서에서 하위 보고서 사용의 이점을 확인하셨기를 바랍니다. 보고서를 하위 보고서로 분리하면 보고 인프라의 모듈성을 높여 보고서를 만드는 데 소요되는 시간을 단축할 수 있습니다.
이 문서에서 만든 보고서, 데이터, 응용 프로그램을 다운로드하려면 에서 찾아볼 수 있습니다.
지금 바로 ActiveReportsJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
