안녕하세요 그레이프시티입니다.
1. BackEnd에서 생성한 자료를 Front의 SpreadJS로 어떻게 넘겨야하고, 어떻게 호출해야하는가?
=> Django를 통해 RESTful API 서버를 구축 한 후에는 SpreadJS는 fetch를 이용하여 비동기 HTTP 요청을 보내서 데이터를 가져오실 수 있습니다. 아래와 같이 response 객체를 json형식으로 값을 받아와, setDataSource()로 데이터 소스를 설정하고 bindColumn() 각 열에 바인딩하시면 SpreadJS의 그리드에 값이 나타나는 것을 확인하실 수 있습니다.
fetch('https://jsonplaceholder.typicode.com/todos/')
.then(res => {
// response 처리
console.log(res);
// 응답 JSON 파싱
return res.json();
})
.then(data => {
// json 출력
console.log(data)
sheet.setDataSource(data);
sheet.bindColumn(0,"userId")
sheet.bindColumn(1,"id")
sheet.bindColumn(2,"title")
sheet.bindColumn(3,"completed")
})
.catch(err => {
// error 처리
console.log('Fetch Error', err);
});
[setDataSource 도움말 문서]
https://www.grapecity.com/spreadjs/docs/v14/online/SpreadJS~GC.Spread.Sheets.Worksheet~setDataSource.html
[bindColumn 도움말 문서]
https://www.grapecity.com/spreadjs/docs/v14/online/SpreadJS~GC.Spread.Sheets.Worksheet~bindColumn.html
2. load 후, 색상 변경 문의
데이터를 바인딩 한 후, setStyle 메서드를 이용하여 특정 시트 영역에 특정 셀에 대한 스타일을 설정하실 수 있습니다. 아래는 열과 행의 위치가 (1,1)인 셀의 배경 색깔을 "lightGreen"으로 설정하는 코드입니다.
(...)
var style = new GC.Spread.Sheets.Style();
style.backColor = "lightGreen";
sheet.setStyle(1,1,style,GC.Spread.Sheets.SheetArea.viewport);
[styles 도움말 문서]
https://www.grapecity.com/spreadjs/docs/v14/online/styles.html
[setStyle 도움말 문서]
https://www.grapecity.com/spreadjs/docs/v14/online/SpreadJS~GC.Spread.Sheets.Worksheet~setStyle.html
[셀 채우기 효과 데모]
https://demo.grapecity.co.kr/spreadjs/learn-spreadjs/features/cells/fill-effect/purejs
3. 열 헤더의 색상을 변경 문의
sheet 영역에 대한 범위를 가져오는 getRange 메서드를 이용하여 열 헤더를 가져온 다음, 해당 영역의 backColor를 "yellow"로 지정하시면 됩니다.
var row = sheet.getRange(0, -1, 1, -1,GC.Spread.Sheets.SheetArea.colHeader);
row.backColor("Yellow");
[set header color 도움말 문서]
https://www.grapecity.com/spreadjs/docs/v14/online/schcolor.html
4.기본적으로 제공하는 SpreadSheet CSS가 있는지?
SpreadJS에서는 ThemeRoller를 이용한 사용자 정의 테마, 기본 SpreadJS 테마, 엑셀 테마 등 여러가지 Theme을 적용하실 수 있습니다. 아래 온라인 도움말 링크에서 사용 방법에 대해 확인 보시기 바랍니다.
[Theme 도움말 문서]
https://www.grapecity.com/spreadjs/docs/v14/online/styletheme.html
[Theme 데모]
https://demo.grapecity.co.kr/spreadjs/learn-spreadjs/features/theme/spread-theme/purejs
5. 예제
문의 주신 기능과 관련한 샘플을 전달 드리오니 자세한 코드는 아래 샘플에서 확인하시길 바랍니다.
다른 궁금한 점이 생기면, 언제든 문의 주시기 바랍니다.
감사합니다.
그레이프시티 드림
* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.