로케일 설정
다국어 환경에서 그리드를 더 편하게 설정할 수 있도록 기능이 강화되었습니다.
그리드 내부에서 사용되고 있는 문구들을 지정한 언어에 맞게 변경하여 표시할 수 있으며 숫자 포맷도 국제 표준에 맞게 currency, accounting, decimal 형태로 표시할 수 있습니다.
숫자 포맷의 추가나 수정이 필요한 경우 Intl.NumberFormat (opens in a new tab) 을 참고하여 포맷을 작성합니다.
기본으로 제공되는 numberFormat은 아래와 같습니다.
number: {
style: "decimal",
excelFormat: "#,##0.0"
},
currency: {
style: "currency",
currency: currency,
excelFormat: currency === "KRW" ? "₩#,##0" : undefined
},
accounting: {
style: "currency",
currency: currency,
currencySign: "accounting",
// excelFormat: currency === "KRW" ? "\"₩\"#,##0_);[Red](\"₩\"#,##0)" : undefined
}**주의사항**
- 화면에 표시되는 형태만 변경되며 편집기는 일반 숫자편집기가 사용 됩니다.
const message = {
"en" : {
dateEditorWeekDays: ['sun','mon','tue','wed','thu','fri','sat'],
dateEditorMonths: ['Jun','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
dateEditorSaveLabel: 'Save',
dateEditorCancelLabel: 'Cancel',
dateEditorDeleteLabel: 'Delete',
dateEditorTodayLabel: 'Today',
dateEditorHourLabel: 'Ho',
dateEditorMinuteLabel: 'Mi',
dateEditorSecondLabel: 'Se',
dateEditorYearDisplayFormat: '{Y}',
// dateEditorMonthDisplayFormat: '{M}월',
searchEditorMoreText: "more",
checkListAcceptText: "Accept",
checkListCancelText: "Cancel",
checkListAllCheckText: "Check All",
filterSelectorAcceptText: "Accept",
filterSelectorAllCheckText: "(All Select)",
filterSelectorCancelText: "Cancel",
filterSelectorEmptyFilterText: "(Empty Value)",
filterSelectorFilterResetText: "Reset",
filterSelectorFiltersResetText: "Reset All",
filterSelectorSearchPlaceholder: "Search...",
filterSelectorSearchedCheckText: "(Search All Selected)",
filterSelectorDateYearFormat: '{YYYY}',
filterSelectorDateQuarterFormat: 'Q{Q}',
filterSelectorDateMonthFormat: '{M}',
filterSelectorDateDayFormat: 'YYYY-MM-DD',
dataDropProxyLabel: "${rows} rows ${mode}",
dataDropModeCopy: "Move",
dataDropModeMove: "Copy",
groupingPrompt: "Drag a column header and drop it here to group by that column.",
displayEmptyMessage: "There is no data to display.",
filterOperatorContains: "contains",
filterOperatorNotContains: "not contains",
filterOperatorStartsWith: "starts with",
filterOperatorEndsWith: "ends width",
filterOperatorEqual: "equal",
filterOperatorNotEqual: "not Equal",
filterOperatorEmpty: "empty Value",
filterOperatorReset: "reset",
filterOperatorGreater: "greater then",
filterOperatorGreaterEqual: "greater then or equal",
filterOperatorLower: "less then",
filterOperatorLowerEqual: "less then or equal",
filterOperatorBetween: "between"
},
"ko": {
dateEditorCancelLabel: "취소",
dateEditorDeleteLabel: "삭제",
dateEditorHourLabel: "시",
dateEditorMinuteLabel: "분",
dateEditorSecondLabel: "초",
dateEditorMonths: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dateEditorSaveLabel: "저장",
dateEditorTodayLabel: "오늘",
dateEditorWeekDays: ['일','월','화','수','목','금','토'],
dateEditorYearDisplayFormat: '{Y}년',
dateEditorMonthDisplayFormat: '{M}월',
searchEditorMoreText: "더보기",
checkListAcceptText: "확인",
checkListCancelText: "취소",
checkListAllCheckText: "전체 선택",
filterSelectorAcceptText: "확인",
filterSelectorAllCheckText: "(전체 선택)",
filterSelectorCancelText: "취소",
filterSelectorEmptyFilterText: "(값 없음)",
filterSelectorFilterResetText: "초기화",
filterSelectorFiltersResetText: "전체 초기화",
filterSelectorSearchPlaceholder: "검색...",
filterSelectorSearchedCheckText: "(조회 전체 선택)",
filterSelectorDateYearFormat: '{YYYY}년도',
filterSelectorDateQuarterFormat: '{Q}사분기',
filterSelectorDateMonthFormat: '{M}월',
filterSelectorDateDayFormat: 'YYYY-MM-DD',
filterToastMessage: "필터링 중입니다...",
dataDropProxyLabel: "${rows} 행 ${mode}",
dataDropModeCopy: "이동",
dataDropModeMove: "복사",
groupingPrompt: "컬럼 헤더를 이 곳으로 끌어다 놓으면 그 컬럼으로 그룹핑합니다.",
groupingToastMessage: "행 그룹핑 중입니다...",
displayEmptyMessage: "표시할 데이타가 없습니다.",
filterOperatorContains: "포함",
filterOperatorNotContains: "포함하지 않음",
filterOperatorStartsWith: "시작 문자",
filterOperatorEndsWith: "끝 문자",
filterOperatorEqual: "같음",
filterOperatorNotEqual: "같지 않음",
filterOperatorEmpty: "값 없음",
filterOperatorReset: "초기화",
filterOperatorGreater: "보다 큼",
filterOperatorGreaterEqual: "크거나 같음",
filterOperatorLower: "보다 작음",
filterOperatorLowerEqual: "작거나 같음",
filterOperatorBetween: "범위",
invalidDatetimeFormat1: "잘못된 날짜 형식입니다. - 'H'와 'a'가 같이 존재할 수 없습니다: ",
invalidDatetimeFormat2: "잘못된 날짜 형식입니다 - 'h'가 있으면 'a'가 반드시 있어야 합니다: ",
commitEditingMessage: "먼저 편집을 완료 하십시오.",
deleteRowsMessage: "선택된 행(들)을 삭제하시겠습니까?",
invalidFormatMessage: "잘못된 입력 유형입니다.",
decimalSeparator: ".",
thousandsSeparator: ",",
sortingToastMessage: "정렬 중입니다...",
rowIndicatorHeadText: "No.",
rowIndicatorFootText: "Σ",
rowIndicatorSumText: "Σ",
stateTextCreateAndDeleted: "X",
stateTextCreated: "C",
stateTextDeleted: "D",
stateTextUpdated: "U",
rowOutOfBounds: "row is out of bounds: ",
fieldIndexOutOfBounds: "fieldIndex is out of bounds: ",
fieldNameMustExists: "fieldName must be exists.",
fieldNameAlreadyExists: "fieldName is already exists: ",
clientEditingError: "Client is editing (call grid.commit() or grid.cancel() first)"
},
"ja": {
dateEditorWeekDays: ['日','月','火','水','木','金','土'],
displayEmptyMessage: '表示するデータはありません。',
groupingPrompt: '列ヘッダーをこの位置にドラッグ＆ドロップすると,その列にグループ化されます。',
dateEditorYearDisplayFormat: '{Y}年',
dateEditorMonthDisplayFormat: '{M}月',
dateEditorTodayLabel: '今日',
dateEditorMonths: ['いちがつ', 'にがつ', 'さがつ', 'しがつ', 'ごがつ', 'ろくがつ', 'しちがつ', 'はちがつ', 'くがつ', 'じゅうがつ', 'じゅういちがつ', 'じゅうにがつ'],
dateEditorSaveLabel: "セーブ",
dateEditorCancelLabel: "取消",
dateEditorDeleteLabel: "デリート",
checkListAcceptText: "適用する",
checkListCancelText: "取消",
checkListAllCheckText: "全選択",
},
"fr": {
dateEditorWeekDays: ['dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam'],
dateEditorMonths: ['janv', 'févr', 'mars', 'avr', 'mai', 'juin', 'juil', 'août', 'sept', 'oct', 'nov', 'déc'],
displayEmptyMessage: "Il n'y a aucune donnée à afficher"
},
"hi": {
displayEmptyMessage: 'प्रदर्शित करने के लिए कोई डेटा नहीं है.',
dateEditorWeekDays: ['रवि', 'सोम', 'मंगल', 'बुध', 'गुरु', 'शुक्र', 'शनि'],
dateEditorMonths: ['जन॰', 'फ़र॰', 'मार्च', 'अप्रैल', 'मई', 'जून', 'जुल॰', 'अग॰', 'सित॰', 'अक्तू॰', 'नव॰', 'दिस॰'],
groupingPrompt: "किसी कॉलम हेडर को खींचें और उसे उस कॉलम के आधार पर समूहित करने के लिए यहां छोड़ें।",
dateEditorYearDisplayFormat: "{Y}वर्ष"
}
}
const gridLocale = {
"en-US": {
locale: "en-US",
currency: "USD",
messages: message.en,
numberFormats: {
currency: {
style: "currency",
currency: "USD"
},
USD: {
style: "currency",
currency: "USD"
}
}
},
"en-CA": {
locale: "en-CA",
currency: "CAD",
messages: message.en,
numberFormats: {
USD: {
style: "currency",
currency: "USD"
}
}
},
"fr-CA": {
locale: "fr-CA",
currency: "CAD",
messages: message.fr,
numberFormats: {
USD: {
style: "currency",
currency: "USD"
}
}
},
"hi-IN": {
locale: "hi-IN",
currency: "INR",
messages: message.hi,
numberFormats: {
USD: {
style: "currency",
currency: "USD"
}
}
},
"ko-KR": {
locale: "ko-KR",
currency: "KRW",
messages: message.ko,
numberFormats: {
currency: {
style: "currency",
currency: "KRW",
excelFormat: "₩#,##0"
},
accounting: {
style: "currency",
currency: "KRW",
currencySign: "accounting",
// excelFormat: "₩#,##0_);[빨강](₩#,##0)"
excelFormat:"\"₩\"#,##0_);[Red](\"₩\"#,##0)"
},
USD: {
style: "currency",
currency: "USD"
}
}
},
"ja-JP": {
locale: "ja-JP",
currency: "JPY",
messages: message.ja,
numberFormats: {
USD: {
style: "currency",
currency: "USD"
}
}
},
"fr-FR": {
locale: "fr-FR",
currency: "EUR",
messages: message.fr,
numberFormats: {
USD: {
style: "currency",
currency: "USD"
}
}
}
}
RealGrid.setLocale(gridLocale["en-US"])
dataProvider = new RealGrid.LocalDataProvider();
gridView = new RealGrid.GridView(container);
gridView.setDataSource(dataProvider);