실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트
그리드 자체적인 이벤트와 그리드를 클릭 했을 때 발생하는 이벤트에 대해서 알아본다.
v3.6.3 부터 모든 이벤트에 대해서 this 참조가 그리드로 전달이 되므로 이벤트 내부에서 $(this)를 사용이 가능하다.
$(document).ready(function() {
$("#list").jqGrid({
datatype: 'local',
styleUI: 'Foundation',
data: dataArray,
colModel: [
{name: 'name', label : 'Name'},
{name: 'phone', label : 'Phone Number'}
],
caption : 'Users Grid',
height: 'auto',
sortname: 'phone',
autowidth: false,
pager: '#pager',
rowNum: 5,
onSelectRow : function ( id ) {
$('#grid1').html(jQuery('#list')[0].innerHTML);
$('#grid2').html($(this)[0].innerHTML)
}
});
});
셀을 클릭 시 이벤트 작동을 확인 가능
Event 리스트
(Cell Editing, subGrid 등 몇개의 항목들의 이벤트는 해당 설명에 기술되어 있음)
1004lucifer
| Event | Type | Description |
|---|---|---|
| afterInsertRow | rowid, rowdata, rowelem | row에 삽입된 후 발생 rowid - row에 삽입된 id rowdata - row에 삽입된 데이터 배열 rowelem - row에 삽입된 응답요소 (xml데이터면 xml요소) (PS. gridview 옵션이 true로 되어있는경우 수행되지 않음) |
| beforeProcessing | data, status, xhr | response 받은 서버의 데이터가 처리되기전에 발생 datatype이 json인경우 data는 javascript object 형식이다. |
| beforeRequest | (none) | 데이터를 요청하기전에 발생 데이터유형이 함수인경우에 실행되지 않음 이벤트가 false 반환시 서버에 요청이 이루어지지 않음 |
| beforeSelectRow | rowid, e | 사용자가 row 클릭 했을때 선택 직전 발생 rowid - row의 id e - 이벤트객체 true, false 둘중에 하나 반환을 해야 하며, true 리턴 시 선택이 완료, false 리턴 시 행이 선택되지 않고 다른 동작도 발생하지 않음. |
| gridComplete | (none) | 모든 데이터가 그리드에 표현되고 다른 모든 프로세스가 완료되면 발생 |
| loadBeforeSend | xhr, settings | xhr가 전송되기전에 발생 이 함수를 이용하여 사용자 정의 헤드 등을 설정. false 반환시 요청이 취소됨. |
| loadComplete | data | 서버에 모든 요청 후 즉시 발생. data - datatype에 따른 응답 데이터 |
| loadError | xhr, status, error | 요청이 실패할 경우 발생 xhr - XMLHttpRequest 객체 status - 에러타입 error - 발생한 exception 객체 |
| onCellSelect | rowid, iCol, cellcontent, e | 그리드의 특정 셀을 클릭시 발생 rowid - row의 id iCol - cell의 index cellcontent - cell의 content e - 클릭 Element의 이벤트객체 (PS. 셀편집 모드를 사용하지 않을때 사용할 수 있으며, 셀편집모드를 사용하면 이벤트 발생되지 않음) |
| ondblClickRow | rowid, iRow, iCol, e | row가 더블클릭한 직후 발생 rowid - row의 id iRow - row의 index (rowid와 함께사용을 권고하지 않음) iCol - cell의 index e - 이벤트객체 |
| onHeaderClick | gridstate | 그리드를 보이거나 숨김을 클릭 시 발생 (hidegrid:true) gridstate - 그리드 상태 (visible | hidden) |
| onPaging | pgButon | page 이동 시 데이터를 채우기전에 발생 페이지 갯수 옵션을 선택해서 row갯수가 변경된 경우에도 발생 'stop'을 반환 시 처리가 중지되며 사용자 정의 페이징을 정의할 수 있다. (링크 - 이벤트 설명) |
| onRightClickRow | rowid, iRow, iCol, e | row에서 오른쪽 클릭 직후 발생 rowid - row의 id iRow - row의 index (rowid와 함께사용을 권고하지 않음) iCol - cell의 index e - 이벤트객체 (Opera는 oncontextmenu 이벤트를 지원하지 않아서 Opera에서는 작동하지 않음) |
| onSelectAll | aRowids, status | multiselect옵션이 true 일때 Header의 checkbox 클릭 시 발생 aRowids - 선택된 row의 id (rowid's) status - Header checkbox 상태 (true | false) |
| onSelectRow | rowid, status, e | row 클릭 한 직후 발생 rowid - row의 id status - 선택상태 (multiselect옵션 true인경우 사용, 행이 선택된경우 true, 선택되지 않은경우 false) e - 이벤트객체 |
| onSortCol | index, iCol, sortorder | 정렬가능한 열을 클릭 직후 데이터 정렬 전에 발생 index - colModel의 인덱스 이름 iCol - row의 index sortorder - 새로운 정렬순서 (asc | desc) 'stop' 반환 시 정렬처리 중지되며 사용자 정의 정렬을 정의할 수 있다. |
| rowattr | rowData, currentObj, rowId | 그리드에 새로운 row가 삽입 시 발생 rowData - 셀 데이터가 있는 배열 currentObj - json or xml과 같이 현재 행Obj rowId - row의 id row의 추가 스타일 및 클래스 속성을 동적으로 설정하는데 사용할 수 있다. 해당 이벤트는 { "style": "somestyle", "class": "someclass"} 과 같은 객체를 반환해야 한다. 행에 다른 속성을 설정할 수 없다. 새 row가 삽입될때만 이벤트가 발생하며, setRowData와 같이 행을 업데이트 하는 경우에는 발생하지 않음. |
| resizeStart | event, index | 컬럼 resize 직전 발생 event - event 객체 index - colModel 안에 컬럼의 index |
| resizeStop | newwidth, index | 컬럼 resize 직후 발생 newwidth - 컬럼의 새로운폭 index - colModel의 컬럼의 인덱스 |
| serializeGridData | postData | 이벤트 설정 시 ajax 요청에 전달 할 데이터를 직렬화 할 수 있다. 이 함수는 직렬화된 데이터를 반환해야 한다.(json문자열, xml문자열 등) ex) function (postData) { return JSON.stringify(postData); } |
트리거 이벤트 리스트 (v4.3.2 이상)
| Event | Parameters | Return value | Description |
|---|---|---|---|
| jqGridResizeStart | … | none | … |
| jqGridResizeStop | … | none | … |
| jqGridRowAttr | … | … | … |
| jqGridAfterInsertRow | … | none | … |
| jqGridGridComplete | none | none | … |
| jqGridAfterGridComplete | none | none | … |
| jqGridBeforeRequest | none | … | … |
| jqGridLoadComplete | … | none | … |
| jqGridAfterLoadComplete | … | none | … |
| jqGridSortCol | … | … | … |
| jqGridSelectAll | … | none | … |
| jqGridBeforeSelectRow | … | … | … |
| jqGridCellSelect | … | none | … |
| jqGridDblClickRow | … | … | … |
| jqGridRightClickRow | … | … | … |
| jqGridHeaderClick | … | none | … |
| jqGridSelectRow | … | none | … |
| jqGridShowHideCol | … | none | … |
| jqGridRemapColumns | … | none | … |
| jqGridKeyLeft | … | none | … |
| jqGridKeyRight | … | none | … |
| jqGridKeyEnter | … | none | … |
| jqGridKeySpace | … | none | … |
| jqGridToolbarBeforeSearch | none | … | … |
| reloadGrid | … | none | … |
| jqGridToolbarAfterSearch | none | none | … |
| jqGridToolbarBeforeClear | none | … | … |
| jqGridToolbarAfterClear | none | none | … |
| jqGridFilterBeforeShow | … | … | … |
| jqGridFilterAfterShow | … | none | … |
| jqGridFilterInitialize | … | none | … |
| jqGridFilterSearch | none | … | … |
| jqGridFilterReset | none | … | … |
| jqGridAddEditBeforeCheckValues | … | … | … |
| jqGridAddEditClickSubmit | … | … | … |
| jqGridAddEditBeforeSubmit | … | … | … |
| jqGridAddEditErrorTextFormat | … | … | … |
| jqGridAddEditAfterSubmit | … | … | … |
| jqGridAddEditAfterComplete | … | none | … |
| jqGridAddEditBeforeInitData | form, oper | … | This event is fired before the dataInit function. form is the form as a jQuery object oper is the operation type, either “add” or “edit” |
| jqGridAddEditBeforeShowForm | … | none | … |
| jqGridAddEditAfterShowForm | … | none | … |
| jqGridAddEditInitializeForm | … | none | … |
| jqGridAddEditClickPgButtons | … | none | … |
| jqGridAddEditAfterClickPgButtons | … | none | … |
| jqGridInlineEditRow | … | none | … |
| jqGridInlineAfterSaveRow | … | none | … |
| jqGridInlineSuccessSaveRow | … | … | … |
| jqGridInlineErrorSaveRow | … | none | … |
| jqGridInlineAfterRestoreRow | … | none | … |
| jqGridBeforeEditCell | … | none | … |
| jqGridAfterEditCell | … | none | … |
| jqGridSelectCell | … | none | … |
| jqGridBeforeSaveCell | … | … | … |
| jqGridBeforeSubmitCell | … | … | … |
| jqGridAfterSubmitCell | … | … | … |
| jqGridAfterSaveCell | … | none | … |
| jqGridErrorCell | … | none | … |
| jqGridAfterRestoreCell | … | none | … |
| jqGridSubGridBeforeExpand | … | … | … |
| jqGridSubGridRowExpanded | … | none | … |
| jqGridSubGridRowColapsed | … | … | … |
| jqGridGroupingClickGroup | … | none | … |
| jqGridImportComplete | … | none | … |
트리거된 이벤트의 반환값
위의 목록에 있는 이벤트 중 일부는 이벤트를 반환해야 하며, 여러개의 이벤트 핸들을 등록할 수 가 있다.
이벤트핸들은 이전에 호출된 이벤트핸들러에서 반환된 값을 얻기위해 이벤트 객체의 result 속성을 사용해야 하며, 반환 값의 유형에 따라 반환 예정인 결과값은 이전 핸들러의 반환결과를 결합해야 한다.
예를들어 boolean true/false 또는 'stop' 문자열을 반환하는 jqGridBeforeSelectRow 이벤트 핸들러를 구현한다고 할 때, 이벤트는 그리드 내부를 클릭하면 호출된다.
그리드는 클릭 된 row를 선택되기 전에 jqGridBeforeSelectRow 이벤트를 호출하며, 해당 이벤트가 false 또는 'stop' 문자열을 반환 시 그리드의 row는 선택되지 않을것이다.
따라서 row가 선택되지 않게하려면 false를 반환, 선택하려면 true를 분명히 반환해야 한다.
또한 이전의 이벤트핸들러가 false를 반환하더라도 강제로 선택이 되기 때문에 e 파라메터의 result 속성을 테스트 해야한다.
정의되지 않은경우는 이전에 호출된 다른 이벤트핸들러가 없는것이고, 반면에 e.result 값이 false 이거나 'stop' 인경우 이전에 호출된 이벤트핸들러는 선택하지 않기로 결정한 것이다.
이경우 true 대신에 e.result(false) 값을 반환해야 한다.
이것은 이전의 결정을 강제로 덮어쓰지 않기 위한 것이며, 이전 이벤트 핸들러의 결정에 따른다는 의미이다.
$("gridid").bind("jqGridBeforeSelectRow", function (e, rowid, orgClickEvent) { ... // if we want to return true, we should test e.result additionally return e.result === undefined ? true : e.result; });위의 코드가 이전에 호출된 이벤트 핸들러이며, 아래와 같이 false 또는 'stop' 에 대해서 명시적으로 테스트 할 수 있다.
$("gridid").bind("jqGridBeforeSelectRow", function (e, rowid, orgClickEvent) { ... // if we want to return true, we should test e.result additionally return e.result === false || e.result === "stop" ? false : true; });
Ajax Request 수행될 때 발생하는 이벤트 순서
1004lucifer
1. beforeRequest
2. serializeGridData
3. loadBeforeSend
4. loadError (오류발생시 5~7단계 수행안됨, 오류없으면 4단계 빼고 수행됨)
5. beforeProcessing
6. gridComplete
7. loadComplete
PS. 공식 API 문서에는 3번이 2번보다 먼저 실행되는 것으로 나와있지만 v4.6으로 실제 테스트 시 2번이 먼저 수행되는것을 확인 아래 데모에서 확인 가능
참고
- http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events
감사합니다.
답글삭제도움이 된것 같아 다행이네요..ㅎ
삭제