안녕하세요 그레이프시티입니다.

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(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.