Javascript) JqGrid custom edittype 사용하기

 Cell의 edittype은 기본적으로 text이다. 이 경우에는 Cell edit 시에 <input type="text">가 생성된다. 나는 이 부분을 number타입의 input으로 사용하고 싶었는데, formatter를 integer로 주는 방식은 값이 '4'일 경우에도 '4.00' 형태로 보이게끔 했다. 나는 일반적인 'number' 타입의 input처럼 정수로 표현할 수 있되, 증가/감소 버튼이 있는 ui를 원했기 때문에 custom 타입으로 대체를 하게 되면서 찾아보게 된 부분이다.

 

 아래 코드는 JqGrid에서 제공하는 API Document에서 발췌한 내용이다. edittype: 'custom'을 사용할 경우에는 editoptions로 custom_elem과 custom_value를 key로 하는 객체를 전달해주어야 한다. 이 때 아래와 같이 custom_elem의 값으로는 원하는 커스텀 Element를 반환하는 함수를 전달하면 되고, cutom_value의 경우에는 Custom Element에 값을 Set/Get할 경우에 어떤 로직을 타게할 것인지를 작성하면 된다.

<script>
function myelem (value, options) {
  var el = document.createElement("input");
  el.type="text";
  el.value = value;
  return el;
}
 
function myvalue(elem, operation, value) {
    if(operation === 'get') {
       return $(elem).val();
    } else if(operation === 'set') {
       $('input',elem).val(value);
    }
}
jQuery("#grid_id").jqGrid({
...
   colModel: [ 
      ... 
      {name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
      ...
   ]
...
});
</script>