실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트
Cell 편집
- 셀 편집은 다음과 같은 동작을 통해 키 탐색 및 개별 셀 편집을 지원한다.
1) 편집할 수 없는 셀을 클릭 시 셀이 선택되고 위/아래/왼쪽/오른쪽 키를 이용하여 셀을 탐색할 수 있다.
2) 편집 가능한 셀로 이동하면 Enter 키를 눌러 셀을 편집할 수 있으며, 셀은 Enter/Tab 키를 누르거나 다른 셀을 클릭할 때 저장되고 ESC키를 누르면 셀이 저장되지 않는다. 셀을 편집할 때 키는 셀 내에서만 이동한다.
3) 편집가능한 셀을 클릭하면 편집모드로 바로 변경된다.
4) colModel에서 일부 필드의 편집가능 항목을 true로 설정할 수 있는 대신, class값에 'not-editable-cell' 이 있는경우 해당셀을 편집할 수 없다.
- 이 모듈을 사용하려면 cell editing, common 모듈이 포함되어야 한다.
속성
- 이 속성은 그리드 옵션에서 셀편집에 대한 속성들이다.
1004lucifer
| Property | Type | Description | Default |
|---|---|---|---|
| cellEdit | boolean | 셀편집 여부 true 설정 시 onSelectRow 이벤트를 사용할 수 없으며, 마우스 hover를 사용할 수 없다. | false |
| cellsubmit | string | 셀의 내용이 저장되는 위치를 결정하며 'remote' 또는 'clientArray' 값을 가질 수 있다. remote - 셀의 내용이 변경되면 즉시 cellurl로 ajax호출을 통해 값을 저장하며, rowid와 cell내용은 url에 추가된다. - mtype을 post로 셋팅하면 key, value 가 post로 보내진다. - 예를들어 mycell 을 저장하면 {id: rowid, mycell: cellvalue} 내용이 url에 추가된다. clientArray - Ajax요청이 없으며 변경된 셀의 내용은 getChangedCells 메소드 또는 이벤트를 통해 얻을 수 있다. | remote |
| cellurl | string | cellsubmit이 remote 일때만 사용가능 셀이 저장될 URL을 지정 | null |
| ajaxCellOptions | object | 이 옵션은 셀을 편집하여 서버에 Ajax호출 시 전역설정을 지정한다. 모든 현재 Ajax설정을 겹쳐쓸수 있으며 complete 이벤트를 포함한다. | empty object |
예제
- remote
{ 'cellEdit' : true, 'cellsubmit' : 'remote', 'cellurl' : '/url/to/handling/the/changed/cell/value' }
- clientArray
{ 'cellEdit' : true, 'cellsubmit' : 'clientArray' }
이벤트
- 그리드 옵션에서 사용할 수 있으며 셀편집과 관련된 이벤트이다.
- 이벤트 중 상당수는 다음 매개변수를 사용한다.
1) rowid: row의 id
2) cellname: colModel에 등록된 cell의 name
3) value: cell의 값
4) iRow: row의 index (rowid와 같이쓰지 않는다.)
5) iCol: column의 index
1004lucifer
| Event | Parameters | Description |
|---|---|---|
| afterEditCell | rowid, cellname, value, iRow, iCol | 편집가능한 셀에만 적용 편집 후 이벤트가 호출된다.(즉 요소가 DOM에 삽입된 후 이벤트 발생) |
| afterRestoreCell | rowid, value, iRow, iCol | 편집 가능한 셀에만 적용 restoreCell 메소드를 호출 후 발생하거나 사용자가 ESC키를 눌러 변경사항을 남겨둘 때 호출된다. |
| afterSaveCell | rowid, cellname, value, iRow, iCol | 편집 가능한 셀에만 적용 셀이 성공적으로 저장된 후 호출된다. (다른 컨텐츠를 변경하기에 좋다) |
| afterSubmitCell | serverresponse, rowid, cellname, value, iRow, iCol | 편집 가능한 셀에만 적용 셀 및 기타 데이터가 서버에 요청/응답 후 호출된다. [성공여부, 메시지] 형식을 반환해야 한다. [true, ""] 의 경우에는 셀콘텐츠가 저장되었고 성공이라는 뜻이며 [false, "Error message"] 의 경우에는 셀콘텐츠가 저장되지 않았고 에러메시지가 대화상자에 보여진다. serverresponse 는 서버의 응답값이다. serverresponse.responseText 에 서버의 메시지가 포함되어 있다. |
| beforeEditCell | rowid, cellname, value, iRow, iCol | 편집 가능한 셀에만 적용 셀을 편집하게 전에 호출된다. |
| beforeSaveCell | rowid, cellname, value, iRow, iCol | 편집 가능한 셀에만 적용 값의 유효성을 검사하기전에 호출된다. 이 함수는 편집된 값을 대체할 수 있는 새로운 값을 반환한다. beforeSaveCell : function(rowid,celname,value,iRow,iCol) { if( some_condition ){ return “new value”; } } |
| beforeSubmitCell | rowid, cellname, value, iRow, iCol | 편집 가능한 셀에만 적용 cellsubmit: 'remote' 에만 적용됨 셀내용을 서버에 요청보내기전에 호출된다. 서버에 보낼 새로운 배열을 반환할 수 있다. beforeSubmitCell : function(rowid,celname,value,iRow,iCol) { if( some_condition ) { return {name1:value1,name2:value2} } else { return {} } } 반환된 배열을 서버에 보낼 cellurl에 추가한다. |
| errorCell | serverresponse, status | 서버 오류가 있는경우 호출된다. 설정하지 않는경우 모달 대화상자가 나타난다. serverresponse - 서버응답 serverresponse.responseText - 서버 메시지 status - 오류 상태 |
| formatCell | rowid, cellname, value, iRow, iCol | 편집 가능한 셀에만 적용 편집전에 셀내용의 서식(format)을 지정하고 서식이 적용된 값을 리턴한다. |
| onSelectCell | rowid, celname, value, iRow, iCol | 편집할 수 없는 셀에만 적용 셀을 선택하면 호출된다. |
| serializeCellData | postdata | 설정된경우 Ajax요청에 전달할 데이터를 직렬화 할 수 있으며, 이 함수는 직렬화된 데이터를 반환해야 한다. 이 이벤트는 서버에 사용자정의 데이터를 보내야 할때 사용할 수 있다. ex) JSON string, XML string 등등 |
이벤트 호출 스택
- cellSubmit 설정이 remote 또는 clientArray 로 설정된경우 아래와 같은 순서로 이벤트가 호출된다.
remote
1. formatCell: 편집모드에서 사용될 셀값을 변경가능
2. beforeEditCell: 셀이 편집모드로 변경되기 직전에 호출
3. afterEditCell: 입력요소가 생성된 직후에 호출
4. beforeSaveCell: 셀이 저장되기전에 호출, 여기에 값을 저장하여 서버에 전송가능
5. beforeSubmitCell: 값이 서버에 보내지기전에 호출, 배열을 반환하여 Request에 파라메터 추가 할수 있음.
6. afterSubmitCell: 셀 저장이 성공적인경우에 호출, 여기에 오류메시지를 반환하여 메시지가 있는 대화상자 표시 가능
7. afterSaveCell: 셀 값이 저장될 때 호출
8. errorCell: 서버 오류 발생할때 호출
9. onSelectCell: 셀을 편집할 수 없을 때 호출
clientArray
1. formatCell: 편집모드에서 사용될 셀값을 변경가능
2. beforeEditCell: 셀이 편집모드로 변경되기 직전에 호출
3. afterEditCell: 입력요소가 생성된 직후에 호출
4. beforeSaveCell: 사용자가 셀을 저장하기전에 호출
5. beforeSubmitCell: 여기에 값을 저장할 수 있음
6. afterSaveCell: 셀의 값이 beforeSubmitCell에 의해 성공적으로 저장되면 호출
7. onSelectCell: 셀을 편집할 수 없을 때 호출
메소드
- 다음 메소드는 jqGrid 객체에 적용되어야 하며 모두 동일한 객체를 반환한다.
1004lucifer
| Method | Parameters | Description |
|---|---|---|
| editCell | iRow, iCol, edit | iRow, iCol을 이용해 셀을 편집 iRow - row의 index (rowid와 혼합하지 마라) iCol - column의 index edit - false 설정 시 셀이 편집되지 않는다. |
| getChangedCells | method | (기본값: 'all' string) 메소드에 따라 변경된 배열을 반환한다. all - 변경된 모든 row들을 반환한다. dirty - 변경된 셀과 row의 id를 반환한다. |
| restoreCell | iRow, iCol | iRow, iCol을 이용해 셀을 복원 iRow - row의 index (rowid와 혼합하지 마라) iCol - column의 index |
| saveCell | iRow, iCol | iRow, iCol을 이용해 셀을 저장 iRow - row의 index (rowid와 혼합하지 마라) iCol - column의 index |
데이터 구성방법
- 셀이 편집되면서 input element가 생성되면 다음 규칙이 설정된다.
1) 편집 가능한 cell element의 id 는 (row의 index) + (colModel의 name)
주의: row의 index는 rowid와 다르다.
ex) 20_myname: (index=20, colModels name=myname)
2) 편집 가능한 cell element의 name은 colModel배열속성의 name으로 구성된다.
서버에 전달되는 내용
- 데이터가 서버에 전달될 때 다음을 포함하는 객체 {}가 생성된다.
1) name:value - name은 셀에 표시된 input element의 name값
2) id:rowid - rowid는 row의 id값
3) beforeSubmitCell 이벤트에서 반환된 데이터가 있으면 데이터를 확장한다.
참고
- http://www.trirand.com/jqgridwiki/doku.php?id=wiki:cell_editing
댓글
댓글 쓰기