[javascript] SlickGrid의 셀 포맷 지정

01 Dec 2023

javascript

SlickGrid은 효율적인 데이터 그리드 구현에 사용되는 JavaScript 라이브러리입니다. 셀 포맷 지정은 SlickGrid에서 각 셀의 데이터를 어떻게 표시할 지를 정의하는 중요한 기능입니다. 이번 포스트에서는 SlickGrid에서 셀 포맷을 지정하는 방법을 알아보겠습니다.

1. 셀 포맷 지정 방법

SlickGrid에서 셀 포맷을 지정하기 위해서는 formatter 함수를 사용합니다. 이 함수는 각 셀의 데이터를 받아서 원하는 형식으로 변환한 뒤 문자열로 반환합니다. 아래의 예제 코드는 formatter 함수를 사용하여 날짜 데이터를 포맷팅하는 예제입니다.

function dateFormatter(row, cell, value, columnDef, dataContext) {
  if (value) {
    var date = new Date(value);
    return date.toLocaleDateString();
  }
  return '';
}

var columns = [
  { id: 'id', name: 'ID', field: 'id' },
  { id: 'name', name: '이름', field: 'name' },
  { id: 'date', name: '날짜', field: 'date', formatter: dateFormatter }
];

var options = {
  enableCellNavigation: true,
  enableColumnReorder: false
};

$(function() {
  var data = [
    { id: 1, name: '홍길동', date: '2022-01-01' },
    { id: 2, name: '김철수', date: '2022-02-01' },
    { id: 3, name: '이영희', date: '2022-03-01' }
  ];

  var grid = new Slick.Grid('#myGrid', data, columns, options);
});

위의 코드에서 dateFormatter 함수는 value라는 파라미터를 받아서 날짜 형식으로 변환한 뒤 반환합니다. 이 함수를 formatter 속성으로 지정한 컬럼에서 사용하면 해당 컬럼의 값이 포맷팅된 형식으로 표시됩니다.

2. 다양한 셀 포맷 지정 예제

SlickGrid에서 셀 포맷을 지정하는 방법은 다양합니다. 아래는 일반적으로 사용되는 몇 가지 예제입니다.

2.1 숫자 포맷팅

function numberFormatter(row, cell, value, columnDef, dataContext) {
  return value.toFixed(2);
}

2.2 문자열 자르기

function truncateFormatter(row, cell, value, columnDef, dataContext) {
  if (value.length > 10) {
    return value.substring(0, 10) + '...';
  }
  return value;
}

2.3 링크 추가

function linkFormatter(row, cell, value, columnDef, dataContext) {
  return '<a href="' + value + '" target="_blank">' + value + '</a>';
}

3. 결론

SlickGrid를 사용하면 간단하게 셀 포맷을 지정할 수 있습니다. formatter 함수를 사용하여 데이터를 원하는 형태로 변환하고, 해당 함수를 컬럼의 formatter 속성으로 지정하면 됩니다. 유연한 셀 포맷 지정은 데이터 그리드의 사용자 경험을 향상시키는 데 큰 도움이 됩니다.