Data 전송 및 표현 방법 문의 > Q&A | 토론

본문 바로가기

SpreadJS

Q&A | 토론

기타 Data 전송 및 표현 방법 문의

페이지 정보

작성자 배넝 작성일 21-05-03 10:05 조회 40회 댓글 0건
제품 버전 : 최신버전

본문

첨부파일

안녕하세요


Django(python)에서 SpreadJS를 사용하고자 합니다. 


아래와 같은 기능을 사용하려는 경우 어떻게 하면 되는지, 예제 샘플 부탁드립니다. 


● 환경

- Django(Python)


● 원하는 기능

- BackEnd에서 DB의 Table를 호출하여, 정보를 보관 중

- Front(spreadJS)에 Data를 전송하여 표시


● 궁금한 사항

- BackEnd에서 생성한 자룔를 Front의 SpreadJS로 어떻게 넘겨야하고, 어떻게 호출해야하는가?

- Front에서 자료를 Load 후 , SpreadJS의 속성(테이블 색상 등)을 변경하려고하는데 어떻게하는가?

- SpreadSheet를 첨부 1과 같이 표현을 하고 싶은데, 어떤 속성을 변경하는 되는지?

- 기본적으로 제공하는 SpreadSheet CSS가 있는지?

- 예제가 있는 사이트 링크

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

1 답변

기타 Re: Data 전송 및 표현 방법 문의

페이지 정보

작성자 GCK루시 작성일 21-05-04 14:08 댓글 0건

본문

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


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




댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.