[jqGrid] 사용자정의 Formatter 설명

 [ jqGrid 한글 API 문서 링크 ]

실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트



Custom Formatter
1004lucifer
 - 특정 컬럼에서 사용자 전용 formatter 를 정의할 수 있으며, 보통 function 으로 되어있다.
  formatter 옵션에서 설정할 때 아래와 같이 따옴표(')로 묶지 않고 괄호()를 입력하지 않고 함수 이름만 표시하면 된다.

<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter},
      ...
   ]
...
});
 
function currencyFmatter (cellvalue, options, rowObject)
{
   // do something here
   return new_format_value
}
</script>

정의, 파라메터

사용자 정의 formatter에는 아래와 같은 매개변수가 전달된다.

function myformatter ( cellvalue, options, rowObject )
{
// format the cellvalue to new format
return new_formated_cellvalue;
}

* 올바르게 작동하려면 항상 리턴값을 반환해야 한다.

 - cellvalue: format을 지정할 값
 - options: {rowId: rid, colModel: cm} Element를 포함하는 객체
  1) rowId: row의 id
  2) colModel: jqGrid의 colModel배열의 컬럼 속성 객체
 - rowObject: datatype 옵션에 정의된 형식으로 표현된 row 데이터
  1) datatype: xml/xmlstring - rowObject는 xmlReader 규칙에 따라 제공되는 xml 노드
  2) datatype: json/jsonstring - rowObject는 jsonReader 규칙에 따라 배열로 제공





Unformatting
1004lucifer
 - 기본 Formatter(링크) 에서 설명했듯이 모든 기본타입은 editing 모듈과 호환되며, 숫자, 링크, 메일 등을 변환하여 올바르게 편집할 수 있다.
또한 getRowData, getCell 과 같은 데이터를 가져오는 메소드는 이 unformat을 이용하여 원래의 값을 가져온다.

여기서 발생하는 문제는 사용자정의 Formatter를 사용하고 getRowData, getCell과 같은 메소드를 사용하여 원래 값으로 되돌리고 싶은데 그런경우 colModel에서 unformatter 기능을 사용하여 가능하다.

예) 이미지 표시 및 경로 편집

<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:imageFormat, unformat:imageUnFormat},
      ...
   ]
...
});
 
function imageFormat( cellvalue, options, rowObject ){
 return '<img src="'+cellvalue+'" />';
}
function imageUnFormat( cellvalue, options, cell){
 return $('img', cell).attr('src');
}
</script>

사용자정의 unformat 함수에는 아래와 같은 파라메터가 전달된다.

 - cellvalue: format되지 않은 값 (순수 텍스트)
 - options: {rowId: rid, colModel: cm} Element를 포함하는 객체
  1) rowId: row의 id
  2) colModel: jqGrid의 colModel배열의 컬럼 속성 객체
 - cellobject: jQuery cell 객체. cell Element에서 다른 것들을 얻는데 사용할 수 있으며, 예를들어 jQuery(cellobject).html() 을 이용하여 텍스트 대신에 HTML 컨텐츠를 가져올 수 있다.


예제

<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:currencyFmatter, unformat:unformatCurrency},
      ...
   ]
...
});
 
function currencyFmatter (cellvalue, options, rowObject)
{
 
   return "$"+cellvalue;
}
function  unformatCurrency (cellvalue, options)
{
 
   return cellvalue.replace("$","");
}
 
</script>

그리드에 삽입되거나 업데이트 된 값이 123.00 이면 그리드에서 $123.00 으로 보여주고, getRowData, getCell 같은 메서드 또는 모든 editing 모듈을 사용하면 123.00이 된다.







공용 formatter 함수 만들기
1004lucifer
 - 여러 곳에서 사용자정의 format/unformat 함수를 코드에서 사용하려는 경우가 있다.

jqGrid javascript 파일이 로드된 이후에 아래와 같이 스크립트 태그에서 정의 할 수 있다.
(또는 간단히 head 영역에 include 하는 file을 생성할 수도 있다.)

<script type="text/javascript">
jQuery.extend($.fn.fmatter , {
    currencyFmatter : function(cellvalue, options, rowdata) {
    return "$"+cellvalue;
}
});
jQuery.extend($.fn.fmatter.currencyFmatter , {
    unformat : function(cellvalue, options) {
    return cellvalue.replace("$","");
}
});
 
</script>

위와 같이 작업 후 코드에서 수행해야 하는 작업은 아래와 같다.

<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', index:'price', width:60, align:"center", editable: true, formatter:'currencyFmatter'},
      ...
   ]
...
});

(이경우에는 unformat 형식을 지정하지 않아도 된다.)




참고
 - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter