숨겨진 행/열 표시

보통 스프레드시트에서 숨김으로 설정된 행과 열은 화면에 표시되지 않습니다. 그러나 복잡한 보고서 템플릿을 디자인할 때, 숨겨진 행이나 열이 완전히 보이지 않으면 해당 영역의 내용을 편집하기 어렵습니다.

리포트 시트의 "숨겨진 행/열 표시(Show Hidden Rows and Columns)" 기능은 리포트 시트 템플릿의 디자인 뷰에서 숨김으로 표시된 행과 열의 가시성을 전환할 수 있게 해줍니다. 이 기능을 사용하면 최종 출력 상태와 관계없이 템플릿의 모든 영역에 쉽게 접근하여 템플릿을 작성하고 수정할 수 있습니다.

hidden2.4c9849.gif

주요 기능:

디자인 타임 가시성: 활성화하면 이전에 숨김으로 설정된 행과 열이 디자인 뷰에 표시됩니다.
미리보기 영향 없음: 이 기능은 최종 보고서 미리보기나 출력에 영향을 주지 않습니다. 숨김 처리된 행과 열은 항상 최종 미리보기와 보고서 생성 시 숨김 상태를 유지합니다.
시각적 표시: 표시된 숨김 행과 열은 일반 셀과 구별되는 스타일로 렌더링됩니다.
편집 가능: 표시된 상태에서 해당 행과 열의 내용과 속성을 일반 셀처럼 편집할 수 있습니다.
스타일 사용자 지정: 표시된 숨김 행과 열에 적용되는 배경색, 테두리, 글꼴 효과 등 스타일을 자유롭게 설정할 수 있습니다.

코드 사용 예제

리포트 시트 디자인 템플릿에서 숨김 행과 열의 표시를 제어하고 커스터마이징하려면 reportSheet 객체의 options 속성을 사용합니다.

기능 활성화 및 비활성화

특정 행/열을 숨긴 보고서 템플릿을 설정하는 예제:

const reportSheet = spread.getActiveSheetTab();
const template = reportSheet.getTemplate();

// 템플릿 셀 값 설정
template.setTemplateCell(2, 0, { 
    binding: "Orders[orderId]",
    type: "Group",
    filter: {
        condition: {
            and: [
                { "parameter": "startDate", "column": "orderDate", "operator": "GreaterThan" },
                { "parameter": "endDate",   "column": "orderDate", "operator": "LessThan" },
                { "parameter": "customerId","column": "customerId","operator": "Equal" }
            ]
        }
    }
});

// 컬럼 바인딩 설정
const columns = ['customerId', 'orderDate', 'freight', 'shipName', 'shipCity', 'shipCountry'];
columns.forEach((item, index) => {
    template.setTemplateCell(2, index + 1, {
        type: "Group",
        binding: `Orders[${item}]`
    })
});

// 보고서 파라미터 설정
reportSheet.parameter({
    startDate: new Date("1997-01-01"),
    endDate: new Date("1998-01-01"),
    customerId: "VINET"
});

// 행 4, 열 4 숨김
template.setRowVisible(4, false);
template.setColumnVisible(4, false);

기본적으로 showHiddenRowCol 파라미터는 false로 설정되어 있으며, 이는 명시적으로 숨긴 행/열이 현재 뷰에 표시되지 않음을 의미합니다.

숨겨진 요소를 확인하려면 해당 파라미터를 true로 변경합니다.

reportSheet.options.showHiddenRowCol = true;
reportSheet.refresh(); // 시트 갱신

참고: showHiddenRowCol 속성을 설정하면 ReportSheet 표시가 자동으로 갱신됩니다.

이렇게 하면 숨김 행과 열이 일시적으로 표시되어 필요에 따라 검토하거나 작업할 수 있습니다.

또한 디자인 모드에서 getRowVisible 및 getColumnVisible 메서드의 반환 값에도 영향을 줍니다.

template.getRowVisible(4); // true

표시된 숨김 요소 스타일 사용자 지정

리포트 시트는 기본 hiddenRowColStyle을 사용하며, 사용자 정의 스타일로 변경할 수도 있습니다.

// 기본 hiddenRowColStyle
hiddenRowColStyle = {
  backColor: { type: GC.Spread.Sheets.PatternType.lightDown }
}

스타일을 커스터마이징하려면:

var style = new GC.Spread.Sheets.Style();
style.backColor = "#B5B5B5";
style.foreColor = "#FFFFFF";
style.fontSize = "24px";

reportSheet.options.hiddenRowColStyle = style;
reportSheet.refresh();