고급기능 JavaScript 범위 템플릿 셀 유형을 사용하는 방법
페이지 정보
작성자 GrapeCity 작성일 2021-08-18 11:00 조회 929회 댓글 0건본문
관련링크
SpreadJS는 개발자가 셀 범위 템플릿을 단일 셀 유형으로 정의할 수 있도록 하는 범위 템플릿 셀이라는 아주 강력한 기능을 제공합니다. 이를 통해 개발자는 템플릿을 셀에 적용하여 표시할 지정된 데이터를 로드할 수 있습니다.
이 블로그에서는 데이터 소스를 생성, 추가하고 표시할 범위 템플릿 셀로 설정하는 방법을 설명합니다. GrapeCity는 주정부에서 보고한 일일 COVID-19 결과를 검색하기 위해 COVID Tracking Projects API를 템플릿의 데이터 소스로 사용할 것입니다.
수행 단계:
범위 템플릿 만들기
지정된 범위에서 RangeTemplate 셀 유형 만들기
데이터 구성
최종 디자인 및 서식
1단계: 범위 템플릿 만들기
범위 템플릿을 만들기 위해 먼저 templateSheet라는 새 워크시트를 만듭니다.
범위 템플릿 셀을 표시할 활성 시트를 가져와서 renderSheet라는 변수에 저장합니다.
다음으로 templateSheet를 사용하여 값과 바인딩 경로가 있는 템플릿을 만듭니다.
여기에는 를 따르는 Suspend와 Resume Paint 메서드도 포함됩니다.
템플릿을 작성하는 동안 최종 목표를 염두에 두십시오.
여기에는 상태를 표시하는 범위가 있는 6개의 행과 3개의 열이 있습니다. 또한 API의 데이터도 포함되어 있으므로 SpreadJS 를 사용하여 템플릿의 기준 셀에 바인딩 경로를 추가해야 합니다.
다음은 바인딩 경로를 쉽게 표시할 수 있도록 하는 COVID 추적 프로젝트의 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의 를 사용하여 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단계에서 포함한 바인딩 경로를 기반으로 데이터를 표시할 준비가 되었습니다. 현재 템플릿에 데이터 소스 집합이 없으므로 다음과 같이 표시됩니다.
언급했듯이 모든 주의 현재 값으로 를 사용하고 있습니다.
이는 범위 템플릿 데이터 소스입니다.
먼저 지정된 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, };
RangeTemplate 셀 유형을 설정하고 템플릿의 데이터 소스를 제공하기 위해 URL에서 데이터를 검색하는 방법에 대해 즐겁게 배우셨기를 바랍니다. 이는 SpreadJS의 RangeTemplate 셀 유형을 사용하는 것이 얼마나 쉬운지 보여줍니다. 이를 통해 대량의 데이터를 체계적으로 표시할 수 있습니다.
RangeTemplate 셀 유형을 사용하여 자신만의 템플릿을 만들고 지금 SpreadJS의 모든 강력한 기능에 액세스할 수 있습니다.
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.