본문으로 건너뛰기

숫자 서식

DHTMLX Spreadsheet는 셀의 숫자 값에 적용할 수 있는 숫자 서식을 지원합니다.

공통, 숫자, 통화, 퍼센트, 날짜, 시간, 텍스트 옵션이 있는 DHTMLX Spreadsheet 숫자 서식 드롭다운

노트

사용자 가이드를 통해 사용자들이 Spreadsheet를 더 쉽게 사용할 수 있습니다.

기본 숫자 서식​

숫자 서식은 다음 속성 세트를 포함하는 객체입니다:

  • id - setFormat() 메서드로 셀에 서식을 설정할 때 사용하는 서식의 id
  • mask - 숫자 서식의 마스크. 아래에서 마스크에 사용할 수 있는 문자 목록을 확인하세요
  • name - 툴바 및 메뉴 드롭다운 목록에 표시되는 서식의 이름
  • example - 서식이 적용된 숫자가 어떻게 보이는지 보여주는 예제. 기본적으로 서식 예제에는 2702.31이 사용됩니다

기본 숫자 서식은 다음과 같습니다:

defaultFormats = [
    { name: "Common", id: "common", mask: "", example: "1500.31" },
    { name: "Number", id: "number", mask: "#,##0.00", example: "1,500.31" },
    { name: "Percent", id: "percent", mask: "#,##0.00%", example: "1,500.31%" },
    { name: "Currency", id: "currency", mask: "$#,##0.00", example: "$1,500.31" },
    { name: "Date", id: "date", mask: "mm-dd-yy", example: "28/12/2021" },
    { 
        name: "Time",
           id: "time",
           mask: hh:mm:ss am/pm || hh:mm:ss, // localization.timeFormat 구성에 따라 다름
           example: "13:30:00"
    },
    { name: "Text", id: "text", mask: "@", example: "'1500.31'" },
    { name: "Scientific", id: "scientific", mask: "0.00E+00", example: "1.50E+03" }
];

다양한 숫자 서식이 적용된 스프레드시트의 모습은 다음과 같습니다:

날짜 서식​

localization 속성의 dateFormat 옵션으로 스프레드시트에 표시되는 날짜 서식을 정의할 수 있습니다. 기본 서식은 "%d/%m/%Y"입니다.

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    localization: {
        dateFormat: "%D/%M/%Y",
    }
});

spreadsheet.parse({
    styles: {
        // 스타일 세트
    },
    data: [
        {cell: "B1", value: "03/10/2022", format: "date"},
        {cell: "B2", value: new Date(), format: "date"},
    ]
});

날짜 서식 설정에 사용할 수 있는 전체 문자 목록을 확인하세요.

시간 서식​

스프레드시트 셀에 시간이 표시되는 서식을 정의하려면 localization 속성의 timeFormat 옵션을 사용하세요:

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    localization: {
        timeFormat: 24,
    }
});

spreadsheet.parse({
    styles: {
        // 스타일 세트
    },
    data: [
        { cell: "A1", value: "18:30", format: "time" },
        { cell: "A2", value: 44550.5625, format: "time" },
        { cell: "A3", value: new Date(), format: "time" },
    ]
});

숫자, 날짜, 시간, 통화 로컬라이제이션​

Spreadsheet 구성 옵션을 사용하면 시간과 날짜를 현지화하고, 필요한 통화 기호를 지정하며, 원하는 소수점 및 천단위 구분자를 제공할 수 있습니다. 이러한 설정은 모두 localization 속성에서 사용할 수 있습니다. 다음 속성을 포함하는 객체입니다:

  • decimal - (선택) 소수점 구분자로 사용하는 기호, 기본값은 "." (마침표)
    가능한 값: "." | ","
  • thousands - (선택) 천단위 구분자로 사용하는 기호, 기본값은 "," (쉼표)
    가능한 값: "." | "," | " " | ""
  • currency - (선택) 통화 기호, 기본값은 "$"
  • dateFormat - (선택) 문자열로 설정된 날짜 표시 서식, 기본값은 "%d/%m/%Y". localization API 페이지에서 자세한 내용을 확인하세요
  • timeFormat - (선택) 12 또는 24로 설정된 시간 표시 서식, 기본값은 12

예를 들어, 아래와 같이 기본 로컬라이제이션 설정을 변경할 수 있습니다:

const spreadsheet = new dhx.Spreadsheet("spreadsheet", {
    localization: {
        decimal: ",", 
        thousands: " ", 
        currency: "¥",  
        dateFormat: "%D/%M/%Y",
        timeFormat: 24
    }
});

spreadsheet.parse(dataset);

Spreadsheet의 localization 객체 구성 결과는 다음과 같습니다:

과학적 숫자 서식​

과학적(지수) 표기법은 기본 서식으로 제공되며 매우 크거나 작은 숫자를 간결하게 표현하는 데 유용합니다. 내장된 "scientific" 서식은 마스크 0.00E+00을 사용하며, 예를 들어 1500.31을 1.50E+03으로 표시합니다.

셀에 적용하려면 setFormat() 메서드를 사용하세요:

spreadsheet.setFormat("A1", "scientific");

formats 구성 옵션을 통해 다른 마스크로 사용자 정의 과학적 서식을 정의할 수도 있습니다. 예를 들어 0.###E+0은 더 간결한 출력을 생성합니다:

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    formats: [
        { id: "scientific_compact", mask: "0.###E+0", name: "Scientific (compact)", example: "1.5E+3" }
    ]
});

서식 사용자 정의​

기본 숫자 서식에만 국한되지 않습니다. 두 가지 방법으로 서식을 사용자 정의할 수 있습니다:

  • 기본 숫자 서식의 설정 변경
  • 스프레드시트에 사용자 정의 숫자 서식 추가

이러한 모든 수정은 formats 구성 옵션으로 할 수 있습니다. 서식 객체 배열이며, 각 객체는 다음 속성 세트를 포함합니다:

  • id - (string) 필수, setFormat() 메서드로 셀에 서식을 설정할 때 사용하는 서식의 id
  • mask - (string) 필수, 숫자 서식의 마스크. 아래에서 마스크에 사용할 수 있는 문자 목록을 확인하세요
  • name - (string) 선택, 툴바 및 메뉴 드롭다운 목록에 표시되는 서식의 이름
  • example - (string) 선택, 서식이 적용된 숫자가 어떻게 보이는지 보여주는 예제

마스크의 구조​

마스크에는 숫자 자리 표시자, 구분자, 퍼센트 및 통화 기호, 유효 문자를 포함하는 공통 구문 문자 세트가 포함될 수 있습니다:

  • 0 - 숫자의 한 자리. 숫자가 서식의 0 수보다 적은 경우 의미 없는 0을 표시하는 데 사용됩니다. 예를 들어 2를 2.0으로 표시하려면 서식 0.0을 사용하세요.
  • # - 숫자의 한 자리. 유효한 숫자만 표시하는 데 사용됩니다(숫자가 서식의 # 기호 수보다 적은 경우 의미 없는 0은 생략됩니다).
  • $ - 숫자를 달러 값으로 서식 지정합니다. 다른 통화 기호를 사용하려면 마스크에서 [$ your_currency_sign]#,##0.00으로 정의해야 합니다. 예를 들어 [$ €]#,##0.00.
노트

[$와 ] 사이의 모든 문자는 통화 기호로 해석됩니다.

  • .(마침표) - 숫자에 소수점을 적용합니다.
  • ,(쉼표) - 숫자에 천단위 구분자를 적용합니다.
  • 날짜 서식 설정 문자 - 날짜 및 시간 마스크를 만드는 데 사용됩니다. 예를 들어 27.09.2023을 27, Sep 2023으로 표시하려면 서식 "%d, %M %Y"를 사용하세요.
  • E+ / E- - 숫자를 과학적(지수) 표기법으로 서식 지정합니다. E 뒤의 자릿수는 지수 자릿수의 최솟값을 정의합니다. E+는 항상 지수 부호를 표시하고, E-는 음수 지수에 대해서만 표시합니다. 예를 들어 마스크 0.00E+00은 1500.31을 1.50E+03으로 표시합니다.

서식 설정​

숫자 값에 필요한 서식을 적용하려면 setFormat() 메서드를 사용하세요. 두 개의 매개변수를 받습니다:

  • cell - (string) 값의 서식을 지정할 셀의 id
  • format - (string) 셀 값에 적용할 기본 숫자 서식의 이름

예를 들어:

// A1 셀에 퍼센트 서식을 적용합니다
spreadsheet.setFormat("A1","percent");

서식 가져오기​

getFormat() 메서드로 셀 값에 적용된 숫자 서식을 검색할 수 있습니다. 이 메서드는 셀의 id를 매개변수로 받습니다.

var format = spreadsheet.getFormat("A1"); 
// ->"percent"

이벤트​

이벤트 쌍을 사용하여 셀 서식 변경을 제어할 수 있습니다:

  • beforeAction - setCellFormat 액션이 실행되기 전에 발생합니다
  • afterAction - setCellFormat 액션이 실행된 후에 발생합니다
Need more help?Contact Support