! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

JavaScript 범위 템플릿 셀 유형을 사용하는 방법 > 온라인 스터디

본문 바로가기

고급기능 JavaScript 범위 템플릿 셀 유형을 사용하는 방법

페이지 정보

작성자 GrapeCity 작성일 2021-08-18 11:00 조회 929회 댓글 0건

본문

SpreadJS는 개발자가 셀 범위 템플릿을 단일 셀 유형으로 정의할 수 있도록 하는 범위 템플릿 셀이라는 아주 강력한 기능을 제공합니다. 이를 통해 개발자는 템플릿을 셀에 적용하여 표시할 지정된 데이터를 로드할 수 있습니다. 


이 블로그에서는 데이터 소스를 생성, 추가하고 표시할 범위 템플릿 셀로 설정하는 방법을 설명합니다. GrapeCity는 주정부에서 보고한 일일 COVID-19 결과를 검색하기 위해 COVID Tracking Projects API를 템플릿의 데이터 소스로 사용할 것입니다.


완료된 제품


수행 단계:

  1. 범위 템플릿 만들기

  2. 지정된 범위에서 RangeTemplate 셀 유형 만들기

  3. 데이터 구성

  4. 최종 디자인 및 서식


1단계: 범위 템플릿 만들기


범위 템플릿을 만들기 위해 먼저 templateSheet라는 새 워크시트를 만듭니다.

범위 템플릿 셀을 표시할 활성 시트를 가져와서 renderSheet라는 변수에 저장합니다.

다음으로 templateSheet를 사용하여 값과 바인딩 경로가 있는 템플릿을 만듭니다.

여기에는 SpreadJS의 모범 사례를 따르는 Suspend와 Resume Paint 메서드도 포함됩니다.


템플릿을 작성하는 동안 최종 목표를 염두에 두십시오.

템플릿


여기에는 상태를 표시하는 범위가 있는 6개의 행과 3개의 열이 있습니다. 또한 API의 데이터도 포함되어 있으므로 SpreadJS setBindingPath 메서드를 사용하여 템플릿의 기준 셀에 바인딩 경로를 추가해야 합니다.


다음은 바인딩 경로를 쉽게 표시할 수 있도록 하는 COVID 추적 프로젝트의 API 필드의 예입니다.


API 필드


데이터 필드에 대한 자세한 내용은 다음의 COVID 추적 프로젝트 웹 사이트(모든 주에 대한 현재 값 아래) 링크에서 확인할 수 있습니다: https://covidtracking.com/data/api


아래 코드는 바인딩 경로와 값을 추가하는 예를 보여줍니다.

function templateCells() {
function templateCells() {
  // 1- Create a new worksheet as templateSheet
  var templateSheet = new GC.Spread.Sheets.Worksheet();
  // 1- Get the activesheet as renderSheet
  var renderSheet = spread.getActiveSheet();
// 1-This templateSheet is used to create a template for RangeTemplate CellType
  templateSheet.suspendPaint();
  // 1- Template
  templateSheet.addSpan(0, 0, 5, 1, GC.Spread.Sheets.SheetArea.viewport);
  templateSheet.setBindingPath(0, 0, "state");
  templateSheet.setValue(0, 1, "Cases Reported");
  templateSheet.setBindingPath(0, 2, "positive");
  templateSheet.setValue(1, 1, "New cases today");
  templateSheet.setBindingPath(1, 2, "positiveIncrease");
  templateSheet.setValue(2, 1, "Total Cases");
  templateSheet.setBindingPath(2, 2, "totalTestResults");
  templateSheet.setValue(3, 1, "Recovered");
  templateSheet.setBindingPath(3, 2, "recovered");
  templateSheet.setValue(4, 1, "Death");
  templateSheet.setBindingPath(4, 2, "death");
  templateSheet.resumePaint();
}
​
templateCells();


2단계: 지정된 범위에서 RangeTemplate 셀 유형을 작성합니다.


이제 템플릿 범위를 지정하는 RangeTemplate 셀 유형을 만듭니다.


B열의 활성 시트에 SpreadJS의 setStyle 메서드를 사용하여 rangeTemplateCellType을 스타일로 추가합니다.

function templateCells() {
  // 1 - Create a new worksheet as templateSheet
  var templateSheet = new GC.Spread.Sheets.Worksheet();
  // 1 - Get the active sheet as renderSheet
  var renderSheet = spread.getActiveSheet();
  // 1 - This templateSheet is used to create a template for RangeTemplate CellType
  templateSheet.suspendPaint();
​
  // 1 - Template binding paths
  templateSheet.addSpan(0, 0, 5, 1, GC.Spread.Sheets.SheetArea.viewport);
  templateSheet.setBindingPath(0, 0, "state");
  templateSheet.setValue(0, 1, "Cases Reported");
  templateSheet.setBindingPath(0, 2, "positive");
  templateSheet.setValue(1, 1, "New cases today");
  templateSheet.setBindingPath(1, 2, "positiveIncrease");
  templateSheet.setValue(2, 1, "Total Cases");
  templateSheet.setBindingPath(2, 2, "totalTestResults");
  templateSheet.setValue(3, 1, "Recovered");
  templateSheet.setBindingPath(3, 2, "recovered");
  templateSheet.setValue(4, 1, "Death");
  templateSheet.setBindingPath(4, 2, "death");
​
  templateSheet.resumePaint();
  // 2 - Create RangeTemplate Cell Types and specify the template scope
  var rangeTemplateCelltype = new GC.Spread.Sheets.CellTypes.RangeTemplate(
    templateSheet,
    0,
    0,
    6,
    3
  );
  // 2 - Add the RangeTemplate Cell Type as a style
  var style = new GC.Spread.Sheets.Style();
  style.cellType = rangeTemplateCelltype;
  // 2 - Set the new style to the active sheet's column B
  renderSheet.setStyle(-1, 1, style, GC.Spread.Sheets.SheetArea.viewport);
}
templateCells();
}


3단계: 데이터 구성


2단계 후에 범위 템플릿을 완성했습니다!


이제 템플릿이 설정되었으며 1단계에서 포함한 바인딩 경로를 기반으로 데이터를 표시할 준비가 되었습니다. 현재 템플릿에 데이터 소스 집합이 없으므로 다음과 같이 표시됩니다.


데이터 구성


언급했듯이 모든 주의 현재 값으로 COVID Tracking Project의 데이터 API를 사용하고 있습니다.


이는 범위 템플릿 데이터 소스입니다.


먼저 지정된 URL을 가져와 JSON으로 응답을 저장하는 WebService라는 사용자 정의 함수를 만들고 추가합니다.


사용자 정의 함수를 WEBSERVICE 수식으로 활성 시트에 추가하고 COVID-19 추적 프로젝트의 데이터 링크를 사용하여 수식을 설정합니다. (https://api.covidtracking.com/v1/states/current.json)


다음은 사용자 정의 함수를 생성하기 위한 코드 조각입니다.

// 3- Create a custom function called WebService
function WebService() {}
// 3- Take all the function parameters as key/value pairs and wrap them into an object for template binding
WebService.prototype = new GC.Spread.CalcEngine.Functions.AsyncFunction(
"WEBSERVICE",
1,
1
);
WebService.prototype.defaultValue = function () {
return "Loading...";
};
// 3- Fetch the given URL and store the response as JSON
WebService.prototype.evaluateAsync = function (context, arg) {
const url = arg;
fetch(url).then((response) => {
  const api_data = response.json();
  api_data.then((data) => {
    let x = data.map((d) => {
      if (Array.isArray(d)) {
        return d;
      }
      return [d];
    });
    var t = new GC.Spread.CalcEngine.CalcArray(x);
    context.setAsyncResult(t);
  });
});
};


사용자 정의 함수가 완료되면 사용자 정의 함수를 추가한 다음 수식을 설정합니다.

// 3- Add custom function
sheet.addCustomFunction(new WebService());
// 3- Set formula to B1
var f = '=WEBSERVICE("https://api.covidtracking.com/v1/states/current.json")';
sheet.setFormula(0, 1, f);


이제 템플릿은 1단계에서 지정한 바인딩 경로를 기반으로 데이터를 표시합니다.

데이터


4단계: 템플릿 디자인 및 서식 


이제 데이터가 표시되었으므로 최종 디자인 측면과 형식을 추가하여 많은 시각적 데이터를 표시할 것입니다.


templateSheet를 사용하여 범위 셀의 글꼴, 글꼴 크기와 맞춤을 설정하고 왼쪽 테두리를 추가합니다.

 COVID 데이터에 숫자 formatter를 적용하고 templateSheet의 눈금선을 제거합니다.

// 4- Set font and font size to the Span
var cell = templateSheet.getCell(0, 0, GC.Spread.Sheets.SheetArea.viewport);
cell.hAlign(GC.Spread.Sheets.HorizontalAlign.center);
cell.vAlign(GC.Spread.Sheets.VerticalAlign.center);
cell.font("36pt Arial");
// 4– add border next to state
templateSheet
  .getRange(0, 0, 5, 1, GC.Spread.Sheets.SheetArea.viewport)
  .borderRight(
    new GC.Spread.Sheets.LineBorder(
      "#61afef",
      GC.Spread.Sheets.LineStyle.medium
    )
  );
// 4- Set formatter
    templateSheet.setFormatter(
  -1,
  -1,
  "#,###",
  GC.Spread.Sheets.SheetArea.viewport
);
// 4- Remove grid lines
templateSheet.options.gridline = {
  color: "#FF2235",
  showVerticalGridline: false,
  showHorizontalGridline: false,
};


셀 범위 템플릿에 최종 디자인과 형식이 추가되어 이제 COVID-19 일일 데이터가 다음과 같이 범위 템플릿 셀 유형으로 표시됩니다.

범위 템플릿 셀 유형


RangeTemplate 셀 유형을 설정하고 템플릿의 데이터 소스를 제공하기 위해 URL에서 데이터를 검색하는 방법에 대해 즐겁게 배우셨기를 바랍니다. 이는 SpreadJS의 RangeTemplate 셀 유형을 사용하는 것이 얼마나 쉬운지 보여줍니다. 이를 통해 대량의 데이터를 체계적으로 표시할 수 있습니다.


RangeTemplate 셀 유형을 사용하여 자신만의 템플릿을 만들고 지금 SpreadJS의 모든 강력한 기능에 액세스할 수 있습니다.





지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.