Translate

[jqGrid] 기본 Formatter 설명

날짜:






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



(미리 정의된) 기본 Formatter

 - Formatter는 form, inline, cell 편집에서 셀 내용의 고급포메팅을 제공하며, 기본형식과 사용자 정의형식 2가지 방법중 한가지를 사용할 수 있다.
 - jqGrid의 Formatter 모듈이 로딩이 되어야 사용이 가능하다.





언어 옵션
1004lucifer
 - 기본 언어 포메팅 옵션은 grid.locale-xx 로 되어있는 언어파일에 지정되어 있다.
  (기본 포메터 옵션은 언어파일별로 다르다)

아래는 영어파일의 기본 포메터 옵션
jQuery.jgrid = {
...
   formatter : {
     integer : {thousandsSeparator: " ", defaultValue: '0'},
     number : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00'},
     currency : {decimalSeparator:".", thousandsSeparator: " ", decimalPlaces: 2, prefix: "", suffix:"", defaultValue: '0.00'},
     date : {
       dayNames: [
         "Sun", "Mon", "Tue", "Wed", "Thr", "Fri", "Sat",
         "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"
       ],
       monthNames: [
         "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
         "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
       ],
       AmPm : ["am","pm","AM","PM"],
       S: function (j) {return j < 11 || j > 13 ? ['st', 'nd', 'rd', 'th'][Math.min((j - 1) % 10, 3)] : 'th'},
       srcformat: 'Y-m-d',
       newformat: 'd/m/Y',
       parseRe: /[Tt\\\/:_;.,\t\s-]/,
       masks : {
         ISO8601Long:"Y-m-d H:i:s",
         ISO8601Short:"Y-m-d",
         ShortDate: "n/j/Y",
         LongDate: "l, F d, Y",
         FullDateTime: "l, F d, Y g:i:s A",
         MonthDay: "F d",
         ShortTime: "g:i A",
         LongTime: "g:i:s A",
         SortableDateTime: "Y-m-d\\TH:i:s",
         UniversalSortableDateTime: "Y-m-d H:i:sO",
         YearMonth: "F, Y"
       },
       reformatAfterEdit : false
     },
     baseLinkUrl: '',
     showAction: '',
     target: '',
     checkbox : {disabled:true},
     idName : 'id'
   }
...

여기에 기본 포메터를 사용하기전에 검토하거나 변경하기 위한 모든 옵션이 있으며, colModel의 formatoptions 파라메터를 이용해 특정 컬럼에 대해 재정의가 가능하다.


아래와 같이 colModel 에서 옵션 포메터를 사용시
jQuery("#grid_id").jqGrid({
...
   colModel : [
   ...
      {name:'myname', ... formatter:'number', ...},
   ...
   ],
...
});
활성 언어셋 내부의 number 규칙에 따라 myname 컬럼의 내용을 포메팅 한다.
예를들어 원래의 값이 '1234.1' 이라면 위의 옵션을 사용하여 그리드에 들어가는 값은 '1 234.10' 값이 된다.





컬럼 특정 옵션

 - Formatter 옵션은 언어파일의 기본값에 대해서 특정 컬럼에 재정의 할 수 있으며, colModeld안에서 formatoptions 배열을 이용해 정의할 수 있다.

jQuery("#grid_id").jqGrid({
...
   colModel : [
   ...
      {name:'myname', ... formatter:'currency', formatoptions:{decimalSeparator:",", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$ "} } ,
   ...
   ],
...
});
위와같이 정의하여 언어파일의 기본값을 재정의 하며, 특정 포멧타입에 대해서 적절한 값을 넣어줘야 한다.





기본 Format 유형
1004lucifer
 - 기본 포멧 유형은 Editing 모듈과 호환된다.
 즉, numbers, links, e-mails 등을 변환하여 올바르게 Editing이 가능하다.


TypeOptionsDescription
integerthousandsSeparator,
defaulValue		thousandsSeparator: 천단위의 구분기호
defaultValue: 데이터가 없는경우 기본값
numberdecimalSeparator,
thousandsSeparator,
decimalPlaces,
defaulValue		thousandsSeparator: 천단위의 구분기호
decimalSeparator: 소수 자리수 구분기호
decimalPlaces: 소수 자리수 지정
defaultValue: 데이터 없는경우 기본값
currencydecimalSeparator,
thousandsSeparator,
decimalPlaces,
defaulValue,
prefix,
suffix		number와 동일하지만 두가지 옵션을 추가로 제공
prefix: 숫자 이전에 삽입되는 텍스트
suffix: 숫자 이후에 삽입되는 텍스트
datesrcformat,
newformat,
parseRe		srcformat: 변환해야 하는 날짜의 형식(source format)
newformat: 새로운 날짜의 형식
Date Format은 PHP변환 형식으로 정의되어 있으며, 또한 기본 Date Format으로도 사용이 가능하다. (기본 Date Formatting은 mask옵션을 참고)
parseRe: date string을 구문분석하기위한 표현식(regex)
emailnone메일 유형을 사용하면 e-mail 앞에 'mailto:' 와 함께 href 가 추가된다.
linktarget기본값: null
이 옵션을 사용하면 href 태그에 cell값을 넣고 target 속성에 링크를 구성한다.
showlinkbaseLinkUrl,
showAction,
addParam,
target,
idName		baseLinkUrl is the link.
showAction: baseLinkUrl 뒤에 추가되는 추가 값
addParam: idName속성 뒤에 추가할 수 있는 추가 파라메터
target: 추가 속성으로 추가
idName: 기본적으로 id 이며, showAction 뒤에 추가되는 첫번째 파라메터
checkboxdisabled기본값: true
checkbox의 변경여부를 지정.
false 로 설정 시 checkbox 값을 변경할 수 있다.
selectnone실제 선택이 아니라 특이케이스, 아래 노트 참조
actions{
keys: false,
editbutton : true,
delbutton : true,
editformbutton: false,
onEdit : null,
onSuccess: null,
afterSave:null,
onError: null,
afterRestore: null,
extraparam: {oper:'edit'},
url: null,
delOptions: {},
editOptions : {}
} 		이 타입은 inline editing을 위한 특정 컬럼에 button을 추가하는 손쉬운 방법이며, edit, delete 두가지 action을 추가한다.
editformbutton 파라메터를 true로 설정하면 inline editing 대신 form editing 다이얼로그가 나타난다.
editOptions 옵션은 form editing 에서만 사용이 된다.





Select 포메터 유형
1004lucifer
 - select 타입은 실제 select가 아니며, 일부 editing 모듈과 edittype:'select' 에서 사용된다.


이전 버전에서는 아래와 같이 key가 아닌 그리드의 select값을 전달했었다.
<script>
jQuery("#grid_id").jqGrid({
...
   colModel : [ {name:'myname', edittype:'select', editoptions:{value:"1:One;2:Two"}} ... ],
...
});
</script>
이경우 그리드 데이터의 myname 컬럼에 'One'이나 'Two' 가 셋팅되어야 했으나 아래와 같은 설정으로 key값에 '1' 또는 '2' 가 있어도 'One' 또는 'Two'가 보여지게 된다.
<script>
jQuery("#grid_id").jqGrid({
...
   colModel : [ {name:'myname', edittype:'select', formatter:'select', editoptions:{value:"1:One;2:Two"}} ... ]
...
});
</script>





showlink 예제

colModel 에서 아래와 같이 showlink가 정의되어 있다고 가정을 해보자.
<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ {name:'myname', formatter:'showlink', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit'}, ...} 
      ... 
   ]
...
});
</script>
그런경우 아래와 같이 결과가 나온다.
http://localhost/someurl.php?id=123&action=edit


링크의 id값 대신 myid로 변경하려면 아래와 같이 하면 되며
<script>
jQuery("#grid_id").jqGrid({
...
   colModel: [ {name:'myname', formatter:'showlink', formatoptions:{baseLinkUrl:'someurl.php', addParam: '&action=edit', idName:'myid'}, ...} 
      ... 
   ]
...
});
</script>
아래와 같이 결과가 나온다.
http://localhost/someurl.php?myid=123&action=edit







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

댓글

댓글 쓰기