컬럼

컬럼 타입별 format 옵션 지원

static, input, datepicker 타입의 컬럼은 화면에서 데이터를 더 직관적으로 보여줄 수 있도록 format 옵션을 지원합니다.

📌 사용 가능한 format 타입

▪️ "string" → 문자열 형식
▪️ "number" → 숫자 형식
▪️ "date" → 날짜 형식
▪️ "custom" → 사용자 지정 형식

일반적인 포맷이 아닌 경우, custom을 사용해 콜백 함수에서 원하는 형식으로 데이터를 변환할 수 있습니다.

또한, 입력 보조 기능인 mask 옵션과 함께 사용하면, 사용자가 데이터를 입력할 때 보다 편리하게 입력할 수 있습니다.

Step 1: 'string'

format 타입을 'string'으로 사용할 시 rule 값에 @를 설정하여 사용할 단어를 설정합니다.

Step 2: 'number' 타입 설정

format 타입을 'number'로 사용할 경우, rule 값에 jQuery NumberFormatter에서 제공하는 통화 서식을 지정할 수 있습니다.

📌 사용 가능한 숫자 서식 규칙

▪️ #,### → 천 단위 구분 기호를 포함한 정수 (1,600)
▪️ #,###.00 → 소수점 이하 두 자리까지 포함한 실수 (1,650.00)
▪️ #,###.0 → 소수점 이하 한 자리까지 포함한 실수 (1,650.1)
▪️ #,###.## → 소수점 이하 최대 두 자리까지 포함한 실수 (1,650.11 또는 1,650)
▪️ 0,000 → 천 단위 구분 기호가 포함된 정수 (01,600 → 1,600)
▪️ 0,000.00 → 천 단위 구분 기호 + 소수점 이하 두 자리 포함 (1,650.00)

브라우저의 숫자 자동 처리 특성

브라우저는 숫자를 표시할 때 불필요한 소수점 이하의 0을 자동으로 제거하는 특성이 있습니다.
이 동작은 내장된 숫자 파싱 및 표시 메커니즘에 의해 처리되며, 브라우저마다 다르게 구현될 수 있습니다.

📌 숫자 표시 예시

▪️ 정수(소수점 없음) → 1,600 → 1,600
▪️ 소수점 이하가 00인 경우 → 1,700.00 → 1,700
▪️ 소수점 이하에 값이 있는 경우 → 1,650.11 → 1,650.11

Step 3: 'date' 타입 설정

format 타입을 'date'로 설정하면, rule 값에 jQuery Date Format에서 제공하는 날짜 서식을 지정할 수 있습니다.

또한, **원본 날짜 포맷(origin)**을 "YYYYMMDD"로 설정하면, 입력된 날짜 데이터를 화면에 표시할 때 정확한 연도, 월, 일을 인식할 수 있습니다.

📆 날짜 서식 규칙

YYYY → 연도를 4자리로 표시 (예: 2022)
YY → 연도의 뒤 2자리만 표시 (예: 22)
MM → 월을 2자리 숫자로 표시 (예: 01 → 1월, 12 → 12월)
M → 월을 1자리 또는 2자리 숫자로 표시 (예: 1 → 1월, 12 → 12월)
DD → 일을 2자리 숫자로 표시 (예: 01 → 1일, 31 → 31일)
D → 일을 1자리 또는 2자리 숫자로 표시 (예: 1 → 1일, 31 → 31일)

특히, 'YYYY-MM-DD' 형식은 ISO 8601 표준을 따르며, 데이터 저장 및 교환 시 널리 사용됩니다.
이를 활용하면 날짜를 일관되게 표시하고 처리할 수 있습니다.

이제 날짜를 보다 직관적으로 관리하고 표시할 수 있습니다!

# Step 4: 'custom'

format 타입을 'custom'으로 사용할 시 콜백함수를 제공하여 data를 넘겨받아 function 함수를 만들어 설정할 수 있습니다.

---