Translate

2019년 4월 7일 일요일

[jqGrid] 이벤트 설명







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


그리드 자체적인 이벤트와 그리드를 클릭 했을 때 발생하는 이벤트에 대해서 알아본다.



 v3.6.3 부터 모든 이벤트에 대해서 this 참조가 그리드로 전달이 되므로 이벤트 내부에서 $(this)를 사용이 가능하다.

1004lucifer

$(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
EventTypeDescription
afterInsertRowrowid,
rowdata,
rowelem
row에 삽입된 후 발생
rowid - row에 삽입된 id
rowdata - row에 삽입된 데이터 배열
rowelem - row에 삽입된 응답요소 (xml데이터면 xml요소)
(PS. gridview 옵션이 true로 되어있는경우 수행되지 않음)
beforeProcessingdata,
status,
xhr
response 받은 서버의 데이터가 처리되기전에 발생
datatype이 json인경우 data는 javascript object 형식이다.
beforeRequest(none)데이터를 요청하기전에 발생
데이터유형이 함수인경우에 실행되지 않음
이벤트가 false 반환시 서버에 요청이 이루어지지 않음
beforeSelectRowrowid,
e
사용자가 row 클릭 했을때 선택 직전 발생
rowid - row의 id
e - 이벤트객체
true, false 둘중에 하나 반환을 해야 하며, true 리턴 시 선택이 완료, false 리턴 시 행이 선택되지 않고 다른 동작도 발생하지 않음.
gridComplete(none)모든 데이터가 그리드에 표현되고 다른 모든 프로세스가 완료되면 발생
loadBeforeSendxhr,
settings
xhr가 전송되기전에 발생
이 함수를 이용하여 사용자 정의 헤드 등을 설정.
false 반환시 요청이 취소됨.
loadCompletedata서버에 모든 요청 후 즉시 발생.
data - datatype에 따른 응답 데이터
loadErrorxhr,
status,
error
요청이 실패할 경우 발생
xhr - XMLHttpRequest 객체
status - 에러타입
error - 발생한 exception 객체
onCellSelectrowid,
iCol,
cellcontent,
e
그리드의 특정 셀을 클릭시 발생
rowid - row의 id
iCol - cell의 index
cellcontent - cell의 content
e - 클릭 Element의 이벤트객체
(PS. 셀편집 모드를 사용하지 않을때 사용할 수 있으며, 셀편집모드를 사용하면 이벤트 발생되지 않음)
ondblClickRowrowid,
iRow,
iCol,
e
row가 더블클릭한 직후 발생
rowid - row의 id
iRow - row의 index (rowid와 함께사용을 권고하지 않음)
iCol - cell의 index
e - 이벤트객체
onHeaderClickgridstate그리드를 보이거나 숨김을 클릭 시 발생 (hidegrid:true)
gridstate - 그리드 상태 (visible | hidden)
onPagingpgButonpage 이동 시 데이터를 채우기전에 발생
페이지 갯수 옵션을 선택해서 row갯수가 변경된 경우에도 발생
'stop'을 반환 시 처리가 중지되며 사용자 정의 페이징을 정의할 수 있다.
(링크 - 이벤트 설명)
onRightClickRowrowid,
iRow,
iCol,
e
row에서 오른쪽 클릭 직후 발생
rowid - row의 id
iRow - row의 index (rowid와 함께사용을 권고하지 않음)
iCol - cell의 index
e - 이벤트객체
(Opera는 oncontextmenu 이벤트를 지원하지 않아서 Opera에서는 작동하지 않음)
onSelectAllaRowids,
status
multiselect옵션이 true 일때 Header의 checkbox 클릭 시 발생
aRowids - 선택된 row의 id (rowid's)
status - Header checkbox 상태 (true | false)
onSelectRowrowid,
status,
e
row 클릭 한 직후 발생
rowid - row의 id
status - 선택상태 (multiselect옵션 true인경우 사용, 행이 선택된경우 true, 선택되지 않은경우 false)
e - 이벤트객체
onSortColindex,
iCol,
sortorder
정렬가능한 열을 클릭 직후 데이터 정렬 전에 발생
index - colModel의 인덱스 이름
iCol - row의 index
sortorder - 새로운 정렬순서 (asc | desc)
'stop' 반환 시 정렬처리 중지되며 사용자 정의 정렬을 정의할 수 있다.
rowattrrowData,
currentObj,
rowId
그리드에 새로운 row가 삽입 시 발생
rowData - 셀 데이터가 있는 배열
currentObj - json or xml과 같이 현재 행Obj
rowId - row의 id
row의 추가 스타일 및 클래스 속성을 동적으로 설정하는데 사용할 수 있다.
해당 이벤트는 { "style": "somestyle", "class": "someclass"} 과 같은 객체를 반환해야 한다.
행에 다른 속성을 설정할 수 없다.
새 row가 삽입될때만 이벤트가 발생하며, setRowData와 같이 행을 업데이트 하는 경우에는 발생하지 않음.
resizeStartevent,
index
컬럼 resize 직전 발생
event - event 객체
index - colModel 안에 컬럼의 index
resizeStopnewwidth,
index
컬럼 resize 직후 발생
newwidth - 컬럼의 새로운폭
index - colModel의 컬럼의 인덱스
serializeGridDatapostData이벤트 설정 시 ajax 요청에 전달 할 데이터를 직렬화 할 수 있다.
이 함수는 직렬화된 데이터를 반환해야 한다.(json문자열, xml문자열 등)

ex)
function (postData) {
 return JSON.stringify(postData);
}





트리거 이벤트 리스트 (v4.3.2 이상)

EventParametersReturn valueDescription
jqGridResizeStartnone
jqGridResizeStopnone
jqGridRowAttr
jqGridAfterInsertRownone
jqGridGridCompletenonenone
jqGridAfterGridCompletenonenone
jqGridBeforeRequestnone
jqGridLoadCompletenone
jqGridAfterLoadCompletenone
jqGridSortCol
jqGridSelectAllnone
jqGridBeforeSelectRow
jqGridCellSelectnone
jqGridDblClickRow
jqGridRightClickRow
jqGridHeaderClicknone
jqGridSelectRownone
jqGridShowHideColnone
jqGridRemapColumnsnone
jqGridKeyLeftnone
jqGridKeyRightnone
jqGridKeyEnternone
jqGridKeySpacenone
jqGridToolbarBeforeSearchnone
reloadGridnone
jqGridToolbarAfterSearchnonenone
jqGridToolbarBeforeClearnone
jqGridToolbarAfterClearnonenone
jqGridFilterBeforeShow
jqGridFilterAfterShownone
jqGridFilterInitializenone
jqGridFilterSearchnone
jqGridFilterResetnone
jqGridAddEditBeforeCheckValues
jqGridAddEditClickSubmit
jqGridAddEditBeforeSubmit
jqGridAddEditErrorTextFormat
jqGridAddEditAfterSubmit
jqGridAddEditAfterCompletenone
jqGridAddEditBeforeInitDataform,
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”
jqGridAddEditBeforeShowFormnone
jqGridAddEditAfterShowFormnone
jqGridAddEditInitializeFormnone
jqGridAddEditClickPgButtonsnone
jqGridAddEditAfterClickPgButtonsnone
jqGridInlineEditRownone
jqGridInlineAfterSaveRownone
jqGridInlineSuccessSaveRow
jqGridInlineErrorSaveRownone
jqGridInlineAfterRestoreRownone
jqGridBeforeEditCellnone
jqGridAfterEditCellnone
jqGridSelectCellnone
jqGridBeforeSaveCell
jqGridBeforeSubmitCell
jqGridAfterSubmitCell
jqGridAfterSaveCellnone
jqGridErrorCellnone
jqGridAfterRestoreCellnone
jqGridSubGridBeforeExpand
jqGridSubGridRowExpandednone
jqGridSubGridRowColapsed
jqGridGroupingClickGroupnone
jqGridImportCompletenone



트리거된 이벤트의 반환값

위의 목록에 있는 이벤트 중 일부는 이벤트를 반환해야 하며, 여러개의 이벤트 핸들을 등록할 수 가 있다.
이벤트핸들은 이전에 호출된 이벤트핸들러에서 반환된 값을 얻기위해 이벤트 객체의 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



댓글 없음 :

댓글 쓰기