[jqGrid] Custom Button 설명

 [ jqGrid 한글 API 문서 링크 ]

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


Custom Button으로 Pager에서 사용자 버튼과 액션을 정의할 수 있다.



정의
1004lucifer

 * navButtonAdd를 사용하려면 아래와 같이 navGrid를 먼저 정의해야 한다.

 * Old API

<script>
...
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});
...
</script>

 * New API

<script>
...
jQuery("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters});
...
</script>

 * chain 형식

...
jQuery("#grid_id")
.navGrid('#pager',{edit:false,add:false,del:false,search:false})
.navButtonAdd('#pager',{
   caption:"Add", 
   buttonicon:"ui-icon-add", 
   onClickButton: function(){ 
     alert("Adding Row");
   }, 
   position:"last"
})
.navButtonAdd('#pager',{
   caption:"Del", 
   buttonicon:"ui-icon-del", 
   onClickButton: function(){ 
      alert("Deleting Row");
   }, 
   position:"last"
});
...

 * 기본 파라메터

{ caption:"NewButton", buttonicon:"ui-icon-newwin", onClickButton:null, position: "last", title:"", cursor: "pointer"} 

 1. caption: (string) 빈문자열 가능
 2. buttonicon: (string) UI테마의 아이콘의 이름을 이용하여 지정 가능(기본은'none' 이며 텍스트만 보여진다.)
 3. onClickButton: (function) 버튼을 클릭할 때 수행할 작업
 4. position: ('first' or 'last') 버튼이 추가될 위치
 5. title: (string) 버튼에 대한 툴팁
 6. cursor: (string, default:'pointer) 요소를 마우스 오버할때 커서를 결정
 7. id: (string, optional) 추후 조작을 위한 버튼의 id를 설정

Separator (구분자)
1004lucifer

 * navSeparatorAdd 메소드를 이용해 작업할 수 있다.

<script>
...
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}).navSeparatorAdd("#pager",{separator_parameters}};
...
</script>

 * 기본 파라메터
 {sepclass : “ui-separator”,sepcontent: ''}

 1. sepclass: ui-grid에 정의된 separator 클래스를 재정의한다.
 2. sepcontent: separator Element에 넣을 수 있는 내용

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