jqGrid 추가 옵션
- postData : jqGrid 데이터 요청을 위해서 서버 request 시 추가로 넘기고자 하는 데이터가 있다면 설정한다. key=value 형태로 요청 query 에 추가되어 전송된다.
- sortable : 초기 sort 조건과 관련되며 true 이면 초기 데이터가 정렬되서 보인다.
- sortname : 초기 데이터 정렬시 정렬조건이다. 이곳에 설정된 값이 서버에 정렬 조건으로 전송된다.
- sortorder : desc asc 등 순방향 정렬, 역방향 정렬
- viewrecords : 화면 하단에 총 몇개중에서 몇번째꺼를 보여주고 있는지에 대한 문자열을 표시할것인가에 대한 설정이다.
- width : 전체 grid 화면의 사이즈를 지정하며 column 각각의 사이즈는 colModel 에서 지정한다. column 에 각각 width 가 설정되지 않으면 가장 큰 컬럼을 기준으로 동일하게 사이즈를 맞추어 준다.
- autowidth : width 속성과 같이 사용못하며 자동으로 column size 조정된다.
- toolbar : toolbar 의 사용여부와 위치를 지정할수 있다.
- loadonce : reload 여부이며 true 로 설정하면 한번만 데이터를 받아오고 그 다음부터는 데이터를 받아오지 않는다. 그 경우 sort 는 서버 연동에 의해 되지 않고 자체적으로 처리된다.
- rownumbers : 각 row 의 맨 앞줄에 각 row 의 번호가 자동으로 부여된다.
- rownumWidth : 줄번호의 size 지정
- height: 전데 grid 화면의 세로 사이즈
- loadtext : 서버연동시 loading 중이라는 표시가 뜨는데 그곳의 문자열 지정
- emptyrecords : 데이터가 없을경우 보여줄 문자열 지정
- recordtext: 총 몇건중 몇건을 보고 있다는 문자열을 원하는데로 바꾸기 위해서 사용된다
$("#grid").jqGrid({
.........
postData : { hello : 'world’},
colNames : [ 'UserId9', "Phone", 'Email', 'Address',Reg Date', 'Note' ],
colModel : [ ......................],
xmlReader : {.........................},
pager : jQuery('#pager'),
rowNum : 10,
rowList : [ 10, 20, 30, 40 ],
sortable : false,
sortorder : "desc",
viewrecords : true,
caption : 'My first grid',
autowidth : 'true',
toolbar : [ true, 'top' ],
gridview : true,
loadonce : true,
rownumbers : true,
rownumWidth : 40,
height:200,
loadtext:"Loading..!!.",
emptyrecords:"No records to view",
recordtext:"View11 {0} - {1} of {2}",
});
jqGrid Event
처리하고자 하는 이벤트를 jqGrid에 속성으로 주며 해당 이벤트가 발생했을때 호출될 함수를 지정하면 된다
onSelectRow : function(id){
if(id&& id!==lastsel){
jQuery('#grid').jqGrid('restoreRow',lastsel);
jQuery('#grid').jqGrid('editRow',id,true);
lastsel=id;
}
},
afterInsertRow
afterInsertRow 이벤트는 각 row 가 추가된후 발생한다. 만약 10개의 row 가 추가되는 grid가 있다면 결국 10번 발생하게 된다. 각 row의 id 값과 row 의 데이터 그리고 row 를 구성하기 위한 response element 가 매게변수로 전달된다.
beforeProcessing
서버로부터 데이터를 받은후 화면에 찍기 위한 processing 을 진행하기 직전에 호출된다. 넘어온 data 와 status, xhr 을 받을수 있는데 status 값을 이용해서 성공했는지에 대한 여부를 확인할수 있다.
beforeRequest
서버로 데이터를 요청하기 직전에 호출된다.
beforeSelectRow
유저가 row 를 클릭하는 순간 발생하며 선택한 row 의 id 값이 전달된다. 이곳의 return 값이 중요한데 true 로 설정하면 유저의 선택으로 보고 false 로 선택하면 선택을 안한걸로 본다. 결국 false 로 리턴하면 그다음 이벤트가 발생하지 않는다.
gridComplete
grid 가 모든 작업을 완료한 후 발생한다.
loadBeforeSend
XHR 에 의해 서버로 요청이 들어가기 전에 호출된다. 요청전 헤더값 설정등에 사용된다. 만약 이 함수가 false 를 리턴하면 요청이 취소된걸로 본다.
loadComplete
서버에 요청을 보낸 직후 호출된다.
loadError
요청 실패시에 호출된다.
onCellSelect
유저의 각 column 선택을 처리하기 위해서 사용된다. 각 row 선택 이벤트도 있지만 선택한 cell 을 식별하기 위해서 사용되며 매개변수로 선택한 rowid, columnidex 그리고 column 데이터가 반환된다.
onHeaderClick
유저에 의해 grid화면의 header 부분이 선택되었을때 호출된다. 유저가 grid헤더의 접었다 폈다를 지원하는 아이콘 클릭시 호출된다.
onPaging
유저에 의해 페이징이 변경이 되는 경우 호출된다. next, prev, first, last 버튼 클릭시 호출되며 어느 버튼을 눌렀는지를 매게변수로 받을수 있다.
onRightClickRow
유저의 오른쪽 마우스 버튼을 누른순간 호출된다.
onSelectAll
체크박스를 눌러 모든 row 를 선택한 순간 호출된다.
onSelectRow
각 row 에 제공되는 체크박스를 선택한 순간 호출된다.
onSortCol
유저가 각 column을 정렬시킬수 있는데 정렬시키기 위해서 버튼을 누르는 순간 호출된다.
resizeStart
유저에 의해 column 의 사이즈가 조정되는 순간 호출된다
jqGrid 추가 기능
사실 앞에까지 살펴본 내용은 jqGrid 를 이용하기 위한 가장 기본적인 option 및 설정들이었고 이런 Grid 시스템을 적용시키는 주된 이유는 강력한 Search 기능 이거나 Edit 기능 혹은 Delete 등의 기능이 필요하기 때문일 것이다.
jqGrid 홈페이지에서 다루는 내용을 이곳에서 모두 다루는것도 의미가 없을뿐더러 웹이라는 공간에서 이를 일일이 이야기하는것도 한계가 느껴진다. 자세한건 수업시간에 실습을 통해서 다루겠다....
jqGrid 검색
jQuery("#grid").jqGrid('navGrid','#pager',
{edit:false,add:false,del:false,search:true},
{},
{},
{},
{}
);
jqGrid 수정
jQuery('#grid').jqGrid('editRow',id,true);
jqGrid 삭제
데이터 삭제를 위해서 왼쪽 아래에 삭제를 위한 버튼을 제공해누고 Row 를 선택한후 버튼을 눌러 간단하게 삭제가 가능하도록 제공해줄수 있다
이 이외에 jqGrid 는 정말 기능이 많다는 생각이 들정도로 sub grid, tree grid 등도 제공이 된다.
'jqGrid > 함수' 카테고리의 다른 글
| [Tapestry] JQGrid 커스텀 컴포넌트 개발일지 (0) | 2015.10.22 |
|---|---|
| JqGrid 속성 (1) | 2015.10.22 |
| jqGrid (메소드) (0) | 2015.10.22 |
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!