분류 전체보기 (8) 썸네일형 리스트형 [SpreadJS] 테이블 시트 데이터를 시트 단위로 화면에 표현해야 되서 시트 바인딩으로 데이터를 바인딩했다. 근데 테이블처럼 헤더의 필터 버튼으로 필터 기능을 써야해서 찾아 보다가 테이블 시트 기능을 발견 했다. 보아 하니 테이블 시트로 구현 가능한 것이 많아 보여서, 그 중에서 썼던 기능들만 정리하겠다. 테이블 시트 테이블 시트를 사용하려면 gc.spread.sheets.tablesheet.x.x.x.min.js 라이브러리를 먼저 헤더 태그 내부에 추가해야 한다. 해당 라이브러리를 추가한 후에, SpreadJS 에서 테이블 시트를 추가하면 아래와 같은 시트가 화면에 보여진다. 테이블 시트 생성 테이블 시트는 dataManager 클래스의 addTable 메서드를 이용해서 테이블을 생성한다. 이때, addTable 메서드의 data.. [SpreadJS] 이미지 삽입 엑셀로 보고서를 만들다 보면 이미지를 넣어야 하는 경우가 있다. 이번 글에서는 SpreadJS 로 웹 화면에 보고서를 만들 때, 이미지를 추가하는 방법에 대해서 정리할 것이다. 이미지 삽입 SpreadJS 를 이용해서 시트에 이미지를 삽입 하는 방법은 3가지가 있다. 아래 3가지 방법을 통해 이미지를 시트에 삽입해 보았는데, 도형 기능을 이용해서 이미지를 삽입한 경우 이외에는 엑셀로 내보내 지지 않았다. 포럼에서 왜 그런지 찾아 봤는데 스파크라인과 움직이는 개체에 대한 기능은 SpreadJS 에서만 지원하고 엑셀에서는 지원하지 않는 기능이라 그런 것으로 보인다. (자세한 내용은 아래의 '삽입된 이미지를 포함해서 Excel 내보내기' 항목을 참고) 스파크라인 특정 셀 안에 이미지를 추가 setFormula.. [SpreadJS] 컨텍스트 메뉴 SpreadJS 의 시트에서 마우스 우 클릭을 하게 되면 컨텍스트 메뉴가 뜬다. 웹 화면을 구성하면서 시트에 우클릭 했을 때 뜨는 컨텍스트 메뉴를 별도로 커스터마이징 해야 했는데 그래서 이번엔 컨텍스트 메뉴와 관련된 내용을 정리할 것 이다. 컨텍스트 메뉴 SpreadJS 의 컨텍스트 메뉴는 앞에서 말한 것과 같이 시트에서 마우스 우 클릭해서 확인 할 수 있다. SpreadJS 에서 제공하는 컨텍스트 메뉴를 쓰지 않을려고 하면 spread.options.allowContextMenu 옵션을 false 로 지정하면 된다. var spread = GC.Spread.Sheets.findControl(document.getElementById('ss')); spread.options.allowContextMenu.. [SpreadJS] 조건부 서식 지난번에 올린 데이터 바인딩 글 내용을 토대로 데이터를 바인딩해서 프로젝트를 진행 중이다. 바인딩한 데이터가 몇 천 건은 되는데 특정 값을 넘기면 표시하는 기능을 구현해야 했다. 해서 이번에는 조건부 서식에 대한 내용을 정리하고자 한다. 조건부 서식 conditionalFormat 을 사용하여 시트에 조건부 서식을 불러옴 addRule, addSpecificTextRule, addCellValueRule 메서드를 이용하여 조건부 서식 지정 addRule(rule) : 조건부 규칙(rule)을 시트에 추가 addSpecificTextRule(comparisonOperator, text, style, ranges) comparisonOperator : 조건부 규칙. TextComparisonOperators.. [오픈 데이터] 공공 데이터 포털 이용하기 프론트엔드 쪽에서 일하면서 종종 벡엔드 단의 내용을 들을 때가 많은데, 얼핏 들은 걸로만 이해한 개념들이 대부분이라 답답한 경우가 꽤 있었다. 그래서 이번엔 벡엔드를 직접 제대로 공부해서 개인적으로 연습할만한 게시판 사이트 같은 걸 하나 간단하게 만들어보려고 한다. 일단 게시판에 쓰일 데이터를 간단하게 들고오는 것부터 시작해보려고 한다. 해서 공공데이터포털에서 오픈API를 받아와서 써보기로했다. [참고 링크 : 공공 데이터 포털] 공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase www.data.go.kr 공공데이터포털에서 데이터 받아오기 공공데.. [SpreadJS] ExcelIO 프로젝트를 진행하면서 만든 시트에 Excel 파일을 불러와 몇몇 부분을 수정하고 그 내용이 저장된 엑셀 파일을 내보내는 기능을 구현해야 했다. 이번 글에서는 해당 기능을 SpreadJS 로 구현하는 방법에 대해서 정리하고자 한다. ExcelIO 일단 SpreadJS 에서 Excel 파일 불러오기 및 내보내기를 할려면, gc.spread.excelio.x.x.x.min.js 라이브러리를 추가해야 한다. 그리고 데모를 보다가 알게 된게 있는데, SpreadJS 에서는 Excel 파일을 불러오고 내보낼 때, Spread JSON 이라는 형식의 파일을 쓴다. 데모의 'SpreadJS 파일 형식' 페이지에서 파일을 다운 받을 수 있는 샘플이 있길래 한번 사용해 봤는데, SpreadJS 에서는 ssjson 이랑 s.. [SpreadJS] 데이터 바인딩 웹 개발을 진행할 때 분리된 뷰와 모델이 동기화 된 상태로 유지되게 하려면 데이터 바인딩(Data Binding) 이란 것을 해야한다. 이번엔 SpreadJS 로 데이터를 바인딩 하는 방법에 대해서 정리해 보았다. 데이터 바인딩 일단 데이터 바인딩에 대해서 간단히 설명하자면, 뷰와 모델에서 쓰이는 각각의 데이터 소스를 연결하고 동기화된 상태를 유지하는 기술을 말한다. [참고 링크 : 데이터 바인딩(Data Binding) velog 블로그 글] SpreadJS 에서는 데이터 바인딩 방법이 3개가 있던데 각각 어떻게 쓰는 건지 정리해 보자. 시트 바인딩 setDataSource 메서드를 이용해서 데이터를 시트에 바인딩한다. 시트의 열에 대한 설정(열 너비, 열 헤더에 표시될 텍스트 등등)를 지정하기 이전에.. [SpreadJS] Workbook/Worksheet 회사에서 프로젝트 진행을 위해 SpreadJS 라는 툴을 사용하게 될 것 같다. (거의 확정된 듯..) 일단 프로젝트는 진행하게 될테니 미리 이게 뭔지 공부 해보자... SpreadJS 다운로드 및 적용 SpreadJS 를 사용하기 위해 일단 홈페이지에서 다운 받았다. 처음 사용하는 거니 하나도 모르겠다.. 홈페이지에서 보니 튜토리얼이 있길래 튜토리얼의 시작하기에 나온 내용을 보면서 테스트해보았다. > 위의 코드로 테스트 해보면서 알 수 있었던 건, 시트에 값을 넣을 때 Workbook 객체가 저장된 spread 변수를 이용해서 넣는 게 아니란 것이다. spread 변수로 sheet? 라는 것을 또 불러와서 그걸 이용해 값을 넣어야 한다. Workbook 객체와 Worksheet 객체의 차이 Workbo.. 이전 1 다음
