formatter

 

formatter

jqGrid의 formatter는 표시된 데이터의 형식을 사용자 지정하는 데 사용되는 기능입니다. 주로 데이터를 특정한 형식으로 변환하거나 특정한 스타일을 적용하는 데에 활용됩니다.

 

formatter 종류

1. 'integer' 및 'number' formatter

정수 또는 부동 소수점 숫자를 특정 형식으로 표시할 때 사용됩니다. 예를 들어 천 단위 구분기호를 추가하거나 소수점 이하 자릿수를 지정할 수 있습니다.

{ name: 'price', index: 'price', formatter: 'number', formatoptions: { decimalPlaces: 2, thousandsSeparator: ',' } }

 

2. 'date' formatter

날짜를 특정한 형식으로 표시할 때 사용됩니다.

{ name: 'date', index: 'date', formatter: 'date', formatoptions: { srcformat: 'Y-m-d', newformat: 'd/m/Y' } }

 

3. 'currency' formatter

통화를 특정한 형식으로 표시할 때 사용됩니다.

{ name: 'amount', index: 'amount', formatter: 'currency', formatoptions: { prefix: '$', suffix: '', thousandsSeparator: ',', decimalPlaces: 2 } }

 

4. Custom formatter

사용자가 정의한 함수를 사용하여 데이터를 원하는 형식으로 변환할 수 있습니다.

{
  name: 'customField',
  index: 'customField',
  formatter: function(cellvalue, options, rowObject) {
    // 사용자 정의 로직을 여기에 작성
    return 'Formatted: ' + cellvalue;
  }
}

 

4-1. Custom formatter 예시: 버튼 추가

function btnForm(cellvalue, options, rowObject) {
  let rowId = options.rowId;
  let btnHtml = "<img name='delete' id= " + rowId + " title=\"Delete\"  src='/resources/img/delete_btn.png' style='cursor:pointer' alt='delete'/>&nbsp;<img name='edit' id= " + rowId + " title=\"Edit\"  src='/resources/img/edit_btn.png' style='cursor:pointer' alt='Edit'/>";
  return btnHtml
}

// jqGrid 초기화
$("#grid").jqGrid({
  // 데이터 소스
  //url: 'your_data_url', // 데이터를 가져올 URL
  data: [
    { id: 1, name: 'John Doe', edit: "" },
    { id: 2, name: 'Jane Smith', edit: "" },
    { id: 3, name: 'Bob Johnson', edit: "" }
  ],
  // 컬럼 모델
  colModel: [
    { name: 'id', label: 'ID', key: true, width: 75 },
    { name: 'name', label: 'Name', width: 150 },
    { name: 'edit', label: 'Price', width: 100, formatter: btnForm, formatoptions: "" }
  ]
});