세계화 서식 사용자 지정 - 디자이너 컴포넌트 > 온라인 스터디

디자이너컴포넌트 세계화 서식 사용자 지정 - 디자이너 컴포넌트

추천0

페이지 정보

작성자 GCK루카스

작성일 2022-12-14 16:14 조회 372회 댓글 0건

본문

관련링크

최근 기업과 정부의 디지털 트랜스포메이션이 가속화됨에 따라, 기존의 Excel(엑셀) 문서를 온라인 시스템에 통합하고, 이러한 엑셀 문서를 웹 상에서 관리하고 편집하고자 하는 요구 사항이 점점 많아지고 있습니다.

이를 위해, 웹 상에 구글 시트(Google Sheet) 또는 MS Office 365와 같이 기존의 Excel 파일과 호환이 되고, 최종 사용자가 기존의 MS Excel을 사용하는 것과 동일한 방식으로 사용할 수 있는 Excel(엑셀) 에디터를 구현하는 것은 결코 쉬운 일이 아닐 것 입니다.

이러한 요구 사항에 맞추어 GrapeCity에서는 개발자 분들이 조금이라고 쉽고 빠르게 웹 상에 Excel(엑셀) 스프레드시트의 UI와 엑셀 기능들을 구현할 수 있는 컨트롤과 함수를 제공하는 SpreadJS를 제공하고 있으며, 또한, 완전한 Excel 에디터 기능을 원하시는 개발자 분들을 위해, SpreadJS를 기반으로 하는 SpreadJS 디자이너 컴포넌트를 제공하고 있습니다.

*실제 SpreadJS 디자이너 컴포넌트를 구현한 모습입니다.

SpreadJS 디자이너 컴포넌트는 구글 시트, 온라인 MS Excel과 유사한 UI, 메뉴 구조 그리고 Excel의 기능을 웹 페이지 상에 구현하고자 하시는 분들을 위한 완전한 Front-End Excel 에디터입니다.

디자이너 컴포넌트에는 아래와 같은 요소들이 포함되어 있습니다.

리본 메뉴
수식 표시줄
상태 표시줄
측면 패널
컨텍스트 메뉴

기본적으로 구성된 컴포넌트를 그대로 사용할 수도 있지만, 원하시는 형태에 맞게 커스터마이징하여 사용하실 수 있습니다. "탭, 버튼, 컨텍스트 메뉴, 대화상자, 파일 불러오기 이벤트 바인딩, 상태 표시줄, 지역화"와 같은 추가적인 디자이너 컴포넌트를 커스터마이징 하는 방법을 확인 하고자 하시는 경우에는,

여기를 눌러 해당 글 목록을 확인하실 수 있습니다.

이번 글에서는 디자이너 컴포넌트를 커스터마이징하는 방법 중,

기본으로 지원하지 않는 세계화 서식을 사용자 지정하는 방법을 소개합니다.

세계화 서식 사용자 지정

SpreadJS 디자이너 컴포넌트에서 "셀 서식" 선택하면, MS Excel에서 볼 수 있는 것과 같이 여러 표시 형식들을 볼 수 있습니다.

위와 같은 화면에서 통화, 회계 등 국가 별로 다른 표시 형식을 갖는 범주에 대해 사용자 정의할 수 있으며 SpreadJS는 한국, 미국, 일본, 중국에 대한 세계화를 기본 지원합니다.

이를 통해, 고객이나 기업에서 원하는 세계화 형식을 추가로 제공하여, 업무 효율성을 극대화할 수 있는 솔루션을 제공할 수 있습니다.

통화, 회계 등 다른 국가 서식 항목 추가하기

아래 단계를 통해,

아래 이미지와 같이 "German (Germany)"라는 독일 세계화 서식을 생성 및 추가해 보도록 하겠습니다.

Spread.Common.CultureInfo 클래스를 이용하여 locale ID, display name, pre-defined formats과 같은 속성을 통해 새 문화 옵션을 정의합니다. (통화, 회계, 날짜, 시간, 기타)

먼저 디자이너 인스턴스를 선언합니다.

let designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"));

CultureInfo 생성자 메서드를 사용하여 culture info 인스턴스를 가져옵니다.
```
let cultureInfo = new GC.Spread.Common.CultureInfo();
```

서식 창에서 지정할 culture info 속성을 설정합니다. 사용 가능한 모든 locale ID에 대해 알아보려면 Microsoft Locale ID 정의를 참조하세요.

  cultureInfo.displayName = "German (Germany)"
  cultureInfo.NumberFormat.currencySymbol = '€'
  cultureInfo.name = function () { return "de-DE" }
  cultureInfo.id = 0x407;
  cultureInfo.predefinedFormats.Accounting = '_-* #,##0. [$€-407]_-;-* #,##0. [$€-407]_-;_-* "-". [$€-407]_-;_-@_-';
  cultureInfo.predefinedFormats.Currency = [
    "#,##0. [$€-407]",
    "#,##0. [$€-407];[Red]#,##0. [$€-407]",
    "#,##0. [$€-407];-#,##0. [$€-407]",
    "#,##0. [$€-407];[Red]-#,##0. [$€-407]"
  ];
  cultureInfo.predefinedFormats.Date = [
    "yyyy-mm-dd;@",
    "d.m;@",
    "d.m.yy;@",
    "dd.mm.yy;@",
    "[$-407]d. mmm.;@",
    "[$-407]d. mmm. yy;@",
    "[$-407]d. mmm yy;@",
    "[$-407]mmm. yy;@",
    "[$-407]mmmm yy;@",
    "[$-407]d. mmm yy;@",
    "[$-409]d/m/yy h:mm AM/PM;@",
    "d.m.yy h:mm;@",
    "[$-407]mmmmm;@",
    "[$-407]mmmmm yy;@",
    "d.m.yyyy;@",
    "[$-407]d. mmm. yyyy;@"
  ]
  cultureInfo.predefinedFormats.Time = [
    "h:mm;@",
    "[$-409]h:mm AM/PM;@",
    "h:mm:ss;@",
    "[$-409]h:mm:ss AM/PM;@",
    "mm:ss.0;@",
    "[h]:mm:ss;@",
    "[$-409]d/m/yy h:mm AM/PM;@",
    "d.m.yy h:mm;@"
  ]
  cultureInfo.predefinedFormats.Special = {
    "Postleitzahl": "00000",
    "Postleitzahl (A)": "\A-00000",
    "Postleitzahl (CH)": "C\H-00000",
    "Postleitzahl (D)": "\D-00000",
    "Postleitzahl (L)": "L-00000",
    "Versicherungsnachweis-Nr. (D)": "\[@\]",
    "Sozialversicherungsnummer (A)": "0000-00 00 00",
    "Sozialversicherungsnummer (CH)": "000\.00\.000\.000",
    "ISBN-Format (ISBN x-xxx-xxxxx-x)": "I\S\B\N #-###-#####-#",
    "ISBN-Format (ISBN x-xxxx-xxxx-x)": "I\S\B\N #-####-####-#",
    "ISBN-Format (ISBN x-xxxxx-xxx-x)": "I\S\B\N #-#####-###-#"
  }

addCultureInfo 메소드를 이용하여 새로운 culture info 객체를 추가합니다.
```
GC.Spread.Common.CultureManager.addCultureInfo(cultureInfo.name(), cultureInfo);
```
아래와 같이 German 세계화 서식이 추가된 것을 확인하실 수 있습니다.