문서
리포트 뷰어
RealGrid 리포트 뷰어
02. RealGrid 출력하기

02. RealGrid 출력하기

RealReport가 설치되었다면 GridReportViewer를 이용해 간단하게 RealGrid (opens in a new tab)를 출력할 수 있습니다.

GridReportViewer

GridReportViewer의 기능을 사용하기 위해서는 페이지에 표시되는 완전한 RealGrid (opens in a new tab) 객체가 필요합니다. 웹 페이지에 아래와 같은 그리드가 랜더링 되어 보여진다고 가정해 보겠습니다.

이미지

이 그리드를 보고서형식으로 출력 위해 RealReport의 GridReportViewer를 이용할 수 있습니다.

컨테이너

RealReport를 이용해 미리보기하려면 컨테이너가 필요합니다. 웹 페이지에 컨테이너 요소를 만들고 GridReportViewer를 생성하는 코드를 작성합니다.

<body>
    <div class="content">
        <!-- 그리드 컨테이너 -->
        <div id="realgrid"></div>
        <!-- 리포트 컨테이너 -->
        <div id="realreport"></div>
    </div>
</body>

GridViewer

컨테이너에 RealGrid를 설치하고 데이터를 연결하는 코드는 아래와 같습니다. 그리드의 설치에 대한 자세한 설명은 그리드 준비하기 (opens in a new tab)를 보시기 바랍니다. 아래 코드는 그리드에 필드와 컬럼을 지정하고 데이터를 연결하는 코드가 포함되어 있습니다.

아래 코드에서 각각의 탭은 아래 값을 포함합니다.

  • grid.js: 그리드 설치 코드
  • gridFields.js: 필드
  • gridColumns.js: 컬럼
  • gridAta.js: 데이터
gridContainer = document.getElementById('realgrid');
dataProvider = new RealGrid.LocalDataProvider();
gridView = new RealGrid.GridView(gridContainer);
gridView.setDataSource(dataProvider);
 
dataProvider.setFields(gridFields);
dataProvider.fillJsonData(gridData, { fillMode: "set" });
gridView.setColumns(gridColumns);

GridReportViewer

GridReport를 설치하기 위해 RealReport의 GridReportViewer를 생성합니다. 생성인자로 위에서 설치한 GridView와 GridReportOptions를 넘겨주고 preview() 함수를 호출하면 해당 컨테이너에 리포트가 미리보기 됩니다.

GridReportViewer의 생성인자에 대한 자세한 설명은 GridReportViewer 생성인자를 참고하세요.

reportView = new RealReport.GridReportViewer('realreport', gridView, gridReportOptions);
reportView.preview();

미리보기

preview()함수를 통해 출력된 미리보기 화면은 아래와 같습니다. 옵션을 통해 타이틀 및 출력할 컬럼의 목륵을 설정할 수 있습니다.

이미지

전체 코드

GridReportViewer의 샘플 코드는 examples 저장소 (opens in a new tab)에서 다운로드 할 수 있습니다.

/**
 * RealReport를 사용하기 위해 라이선스가 필요합니다. https://service.realgrid.com 에서 무료 라이선스를 발급 받을 수 있습니다.
 * - 아래 라이선스는 유효기간 2022년 8월 1일 까지 localhost, 127.0.0.1 또는 real-report.com 도메인에서 사용할 수 있는 라이선스 입니다.
 */
var realReportLic = 'upVcPE+wPOkcfqywe+clVN+UVTCvO3is+83EYTz6U/sTXJR8Yw8Y0WXyjOMqbrgvr3+iyFPC2UvWntFnlQAvG/WiN+dO0JtjVohH/45jQUB5oxsrC+spwp92TPc/g3tu+6ZGVxDxR7Q=';
 
/**
 * RealGrid를 사용하기 위해 라이선스가 필요합니다. https://service.realgrid.com 에서 무료 라이선스를 발급 받을 수 있습니다.
 * - 아래 라이선스는 유효기간 2022년 8월 1일 까지 localhost,127.0.0.1,*.real-report.com,*.realgrid.com 도메인에서 사용할 수 있는 라이선스 입니다.
 */
var realGrid2Lic = 'upVcPE+wPOmtLjqyBIh9RkM/nBOseBrflwxYpzGZyYm9cY8amGDkiMnVeQKUHJDjW2y71jtk+wv50juZqrKKzQ4npiZoGBKqiyNJFvlrikYx1/B3rwdT6DEb9aq2Rq6tZHuQ4eQrQLca/e4w623FLQ==';
 
/**
 * 웹 페이지에 RealGrid와 RealReport 컴포넌트를 랜더링할 컨테이너가 필요합니다.
 * 아래 변수는 렌더링할 컨테이너의 Element를 보관할 변수 입니다.
 */
var gridContainer, reportContainer;
 
/**
 * RealGrid의 데이터를 관리할 LocalDataProvider객체를 위한 변수를 선언합니다.
 */
var dataProvider;
 
/**
 * RealGrid와 RealReport 컴포넌트를 위한 변수를 선언합니다.
 */
var gridView, reportView;
 
/**
 * 그리드와 리포트를 렌더링할 컨테이너 페이지가 로드된 다음 컨테이너 요소를 가져오기 위해
 * DOMContentLoaded 이벤트에서 작성합니다.
 */
document.addEventListener('DOMContentLoaded', function () {
    gridContainer = document.getElementById('realgrid');
    if (!dataProvider) {
        dataProvider = new RealGrid.LocalDataProvider();
        gridView = new RealGrid.GridView(gridContainer);
        gridView.setDataSource(dataProvider);
    }
 
    // 그리드에 필드, 컬럼, 데이터를 연결합니다.
    dataProvider.setFields(gridFields);
    dataProvider.fillJsonData(gridData, { fillMode: "set" });
    gridView.setColumns(gridColumns);
 
    if (gridView) {
        reportView = new RealReport.GridReportViewer('realreport', gridView, gridReportOptions);
        reportView.preview();
    }
});