범위 템플릿 셀

SpreadJS는 사용자가 워크시트 내의 셀 범위를 템플릿으로 지정할 수 있도록 하는 범위 셀 유형 생성을 지원합니다.

사용 시나리오

범위 셀 유형은 매우 강력한 기능으로, 사용자 및 개발자가 셀 범위의 템플릿을 하나의 셀 유형으로 정의하고 해당 템플릿을 셀에 적용하여 다양한 형태의 데이터를 해당 템플릿(다중 행 및/또는 열 포함)에 로드할 수 있게 해줍니다. 일단 셀이나 셀 범위에 셀 유형이 적용되면, 해당 범위 템플릿은 셀 값(또는 값들)을 데이터 소스로 사용하여 지정된 바인딩 경로를 해결합니다.

범위 템플릿은 다음과 같은 상황에서 특히 유용합니다:

사용자가 동일한 구조를 가진 특정 데이터 범위를 손쉽고 빠르게 표시하고자 할 때, 개별 범위마다 동일한 스타일을 일일이 설정하지 않아도 됩니다. (아래 스크린샷 참조)
범위 셀 유형을 사용해 사용자 정의 스파크라인을 만들고자 할 때, 아래의 데이터 분석 리포트 예시와 같이 사용할 수 있습니다:
범위 템플릿 셀 유형을 사용해 KPI 블록(예: 재무 KPI)을 만들고자 할 때 아래 스크린샷처럼 사용할 수 있습니다:
범위 템플릿을 정의하고 이를 도형처럼 사용할 수 있으며, 특정 작업에 따라 템플릿으로 렌더링되는 도형이 삽입되어 프로젝트 관리 중 업무 기반 스케줄을 생성할 수 있습니다
배열 함수를 결합하여 특정 지역의 상위 제품 판매 데이터를 보여주는 대시보드 블록을 만들고자 할 때 사용할 수 있습니다. 예를 들어, 템플릿이 지역 매개변수를 받아 배열 함수를 통해 데이터를 필터링하고 범위 템플릿을 통해 상위 제품 판매 정보를 표시하도록 구성할 수 있습니다.

범위 템플릿 작동 방식

스프레드시트에서 범위 셀 유형을 만들고 템플릿을 구성하면, 사용자는 단순히 템플릿을 변경하는 것만으로 배치 단위의 표시 모드와 외형을 손쉽게 수정할 수 있습니다.

범위 셀 유형은 일반 셀 스타일(GC.Spread.Sheets.Style)을 통해 설정될 수 있습니다. 사용자는 범위 셀 유형의 인스턴스를 생성해야 하며, 이 객체는 바인딩 경로를 해결하고 지정된 범위 내 각 셀의 레이아웃 및 셀 스타일 정보를 제공하는 데 사용됩니다.

다음 이미지는 범위 셀 유형의 워크플로우를 나타냅니다:

워크시트에서 범위 템플릿 셀 유형을 만들기 위한 단계입니다.:

템플릿 생성 – 워크시트 내에서 범위를 디자인하여 템플릿을 생성합니다. 템플릿에 데이터를 바인딩하려면 setBindingPath 메서드를 사용할 수 있습니다.
데이터 구성 – 이후, 사용자는 템플릿과 바인딩될 데이터 소스를 워크시트에 구성해야 합니다.
범위 Template 셀 유형 생성 및 적용 – 이제, TemplateSheet의 셀 범위를 사용하여 RangeTemplate 셀 유형을 생성하고 RenderSheet에 적용합니다. RangeTemplate 셀 유형은 CellRange class의 cellType 메서드를 통해 설정할 수 있습니다. 여기서 범위 템플릿 셀 유형은 바인딩 경로를 해결하여 템플릿 정보(1단계)를 포함시키고, 데이터 소스(2단계)를 사용해 해당 셀 유형을 범위에 구성함으로써 생성됩니다.

코드 사용 예시

다음은 워크시트에 범위 템플릿 셀 유형을 생성 및 추가하는 예시 코드입니다.

// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// renderSheet로 현재 활성 시트를 가져옴  
var renderSheet = spread.getActiveSheet();

// 1단계. 템플릿시트라는 새 워크시트를 생성  
var templateSheet = new GC.Spread.Sheets.Worksheet();

// 이 템플릿 시트는 RangeTemplate 셀 유형을 만들기 위한 템플릿으로 사용됨  
templateSheet.suspendPaint();
templateSheet.addSpan(0, 0, 1, 4);
templateSheet.getCell(0, 0).font("20px Arial").hAlign(GC.Spread.Sheets.HorizontalAlign.center).vAlign(GC.Spread.Sheets.VerticalAlign.center);
templateSheet.setBindingPath(0, 0, "name");
templateSheet.setValue(1, 0, "Asset Type");
templateSheet.setValue(1, 1, "Amount");
templateSheet.setValue(1, 2, "Diagram");
templateSheet.setValue(1, 3, "Note");
templateSheet.setValue(2, 0, "Savings");
templateSheet.setBindingPath(2, 1, "savings");
templateSheet.setValue(3, 0, "Shares");
templateSheet.setBindingPath(3, 1, "shares");
templateSheet.setValue(4, 0, "Stocks");
templateSheet.setBindingPath(4, 1, "stocks");
templateSheet.setValue(5, 0, "House");
templateSheet.setBindingPath(5, 1, "house");
templateSheet.setValue(6, 0, "Bonds");
templateSheet.setBindingPath(6, 1, "bonds");
templateSheet.setValue(7, 0, "Car");
templateSheet.setBindingPath(7, 1, "car");
templateSheet.setFormatter(-1, 1, "$#,##0");
templateSheet.addSpan(2, 2, 6, 1);
templateSheet.addSpan(8, 1, 1, 3);
templateSheet.setValue(8, 0, "Total");
templateSheet.getCell(8, 0).font("14px Arial");
templateSheet.setFormula(8, 1, "=SUM(B3:B8)");
templateSheet.getCell(8, 1).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
templateSheet.setFormula(2, 2, '=PIESPARKLINE(B3:B8,"#919F81","#D7913E","CEA722","#B58091","#8974A9","#728BAD")');
templateSheet.getCell(2, 3).backColor("#919F81").formula("=B3/$B$9");
templateSheet.getCell(3, 3).backColor("#D7913E").formula("=B4/$B$9");
templateSheet.getCell(4, 3).backColor("#CEA722").formula("=B5/$B$9");
templateSheet.getCell(5, 3).backColor("#B58091").formula("=B6/$B$9");
templateSheet.getCell(6, 3).backColor("#8974A9").formula("=B7/$B$9");
templateSheet.getCell(7, 3).backColor("#728BAD").formula("=B8/$B$9");
templateSheet.setFormatter(-1, 3, "0.00%");
templateSheet.setRowHeight(0, 50);

for (var i = 1; i < 8; i++) {
     templateSheet.setRowHeight(i, 25);
}

templateSheet.setColumnWidth(0, 100);
templateSheet.setColumnWidth(1, 100);
templateSheet.setColumnWidth(2, 200);
templateSheet.resumePaint();

// 2단계. renderSheet에 데이터 구성 및 추가  
// 데이터 구성 
var data = [{
        "name": "Peyton's Assets",
        "savings": 25000,
        "shares": 55000,
        "stocks": 15000,
        "house": 250000,
        "bonds": 11000,
        "car": 7500
    }, {
        "name": "Icey's Assets",
        "savings": 30000,
        "shares": 45000,
        "stocks": 25000,
        "house": 20000,
        "bonds": 18000,
        "car": 75000
    }, {
        "name": "Walter's Assets",
        "savings": 20000,
        "shares": 4000,
        "stocks": 95000,
        "house": 30000,
        "bonds": 10000,
        "car": 56000
    }, {
        "name": "Chris's Assets",
        "savings": 70000,
        "shares": 85000,
        "stocks": 35000,
        "house": 20000,
        "bonds": 15000,
        "car": 45000
}];

// renderSheet에 데이터 추가  
renderSheet.setValue(0, 0, data[0]);
renderSheet.setValue(0, 1, data[1]);
renderSheet.setValue(1, 0, data[2]);
renderSheet.setValue(1, 1, data[3]);

// 3단계. 템플릿 시트의 셀 범위 [0,0,9,4]를 사용하여 RangeTemplate 셀 유형 생성  
var rangeTemplateCelltype = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet, 0, 0, 9, 4);

// RangeTemplate 셀 유형을 renderSheet의 셀 범위에 적용
renderSheet.getRange(0, 0, 2, 2).cellType(rangeTemplateCelltype);
renderSheet.setColumnWidth(0, 400);
renderSheet.setRowHeight(0, 250);
renderSheet.setColumnWidth(1, 400);
renderSheet.setRowHeight(1, 250);
renderSheet.resumePaint();

범위 템플릿 셀

사용 시나리오

범위 템플릿 작동 방식

코드 사용 예시

제품

고객 서비스

메시어스 정보

정책(Policy)