실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트
Form 편집
- grid.common.js, grid.formedit.js, jqModal.js, jqDnR.js 모듈이 로딩되어야 사용가능
- jqGrid는 즉석에서 그리드 데이터를 보기, 추가, 편집, 삭제, 검색을 지원하며, 레코드 추가 Form에 대한 모습은 아래와 같다.
프로그램에서 모달상자와 Inline편집을 같이 사용할 수 있지만 Inline편집은 기존row를 수정만 할수있고 검색,삭제,추가가 되지 않는다.
모달상자와 Inline편집을 같이 사용할경우 같은 row를 선택했을 때 서로 다른 row를 방해한다. (편집할 row를 선택한 다음 모달편집을 클릭하면 셀의 실제 내용 대신에 셀의 ID 이름을 가져온다)
메소드
- 메소드는 상위 그리드의 하위집합 form편집을 사용한다. (아래에서 추가설명)
- 메소드의 모든 프로퍼티와 이벤트는 jqGrid의 일부는 아니지만 옵션의 일부는 메소드에 매개변수로 전달이 된다.
searchGrid
- 자세한 내용은 단일검색 및 고급검색을 참조해라
editGridRow
- 이 메소드는 그리드의 특정row 편집을 위해 모달대화상자를 생성한다.
- 이 메소드는 jqGrid의 editurl옵션과 colModel의 공통편집속성을 사용한다.
1004lucifer
호출방법
- old API
jQuery ( "#grid_id" ) . editGridRow ( rowid , properties ) ;- new API
jQuery ( "#grid_id" ) . jqGrid ( 'editGridRow' , rowid , properties ) ;grid_id: 부모그리드의 id
rowid: 편집하는 row의 id
properties: properties or event를 포함하는 name:value 쌍 배열
이 메소드는 언어파일의 다음 속성을 사용한다.
$.jgrid = { ... edit : { addCaption: "Add Record", editCaption: "Edit Record", bSubmit: "Submit", bCancel: "Cancel", bClose: "Close", saveData: "Data has been changed! Save changes?", bYes : "Yes", bNo : "No", bExit : "Cancel", ... }, ... }이 옵션은 메소드에 옵션으로 전달해서 겹쳐쓸 수 있으며, 메소드에 전달할때는 bSubmit:"Submit" 이렇게 사용을 한다. ($.jgrid.edit.bSubmit:"Submit" 이렇게 사용하지 마라)
생성된 폼을 호출 시 다음과 같이 보여진다.
| Property | Description | Default |
|---|---|---|
| top | 모달대화상자의 초기 top 위치값. 기본값은 0 이며 그리드의 왼쪽위에 배치된다. jqModal플러그인이 있고 jqModal옵션이 true라면 기본값 0은 윈도우의 왼쪽 위에 배치된다. | 0 |
| left | 모달대화상자의 초기 left 위치값. 기본값은 0 이며 그리드의 왼쪽위에 배치된다. jqModal플러그인이 있고 jqModal옵션이 true라면 기본값 0은 윈도우의 왼쪽 위에 배치된다. | 0 |
| width | 대화상자의 width 값 | 300 |
| height | 대화상자의 height 값 | auto |
| dataheight | 모달 header와 footer의 사이에 대해서 스크롤을 지정할 수 있는 콘텐츠 높이 | auto |
| modal | 대화상자가 모달인지 여부를 결정. jqModal 플러그인이 있는 경우에만 작동함 | false |
| drag | 대화상자 드래그 여부. jqDnR플러그인이 있거나 jQuery UI에서 드래그 가능한 위젯이 있는 경우에만 작동함. | true |
| resize | 대화상자의 resize 여부. jqDnR플러그인이 있거나 jQuery UI에서 resize 가능한 위젯이 있는 경우에만 작동함. | true |
| url | 서버에 요청보낼 URL이며 설정 시 editurl 을 대체한다. | null |
| mtype | 서버에 데이터를 보낼 때 요청 메소드를 지정 ex) POST or GET | POST |
| editData | 서버에 보낼 데이터에 내용을 추가하는데 사용하는 배열 | empty |
| recreateForm | true 설정 시 colModel의 새옵션으로 대화상자가 활성화 될때마다 form이 다시 생성된다. | false |
| jqModal | true로 설정하면 jqModal(플러그인이 있는경우)을 사용하여 대화상자를 생성한다. 플러그인이 없는경우 jqGrid 내부함수를 사용하여 대화상자 생성됨 | true |
| addedrow | row를 추가할 위치를 지정 first - 그리드의 가장위 last - 그리드의 마지막 새로운 row가 원래의 정렬순서대로 정렬하려면 reloadAfterSubmit를 true로 설정하면 된다. | first |
| topinfo | 이 정보가 설정되면 row를 추가할때 모달 헤더 바로다음에 배치된다. | empty string |
| bottominfo | 이 정보가 설정되면 row를 추가할때 form의 마지막 바로다음에 배치된다. | empty string |
| saveicon | 배열값. 전송(submit) 버튼의 아이콘을 정의한다. 기본값 - [true,“left”,“ui-icon-disk”] 첫번째 - 아이콘 사용여부 두번째 - 아이콘이 텍스트의 left or right 위치결정 세번째 - 테마규칙에 따른 유효한 ui 아이콘 | |
| closeicon | 배열값. 취소 버튼의 아이콘을 정의한다. 기본값 - [true,“left”,“ui-icon-close”] saveicon 설명을 참조 | |
| savekey | 배열값. 특정 키를 눌러 form의 저장 여부를 지정한다. 첫번째 - 키를 눌렀을 때 저장여부 두번째 - 사용될 키 코드값 (기본값: Enter) 이 바인딩은 row의 추가/수정 모두 사용이 된다 | [false,13] |
| navkeys | 배열값, 편집모드에서만 동작함. (기본상태: 비활성화) 키보드 탐색기능을 추가하여 form 편집중 특정키를 눌렀을 때 레코드를 탐색할 수 있다. 첫번째 - 탐색 사용여부 두번째 - 레코드 up (기본적으로 up키의 코드) 세번째 - 레코드 down (기본적으로 down키의 코드) | [false,38,40] |
| checkOnSubmit | 편집모드에서만 동작 true 설정 시 전송(submit)버튼을 클릭했을 때 form의 데이터가 변경되었을 경우에 동작한다. 데이터가 변경되었을 경우 사용자에게 변경or취소 대화상자가 보여진다. 취소 버튼 클릭 시 form으로 돌아가지만 값은 원래대로 돌아가지 않는다. | false |
| checkOnUpdate | 추가 및 편집모드에서 동작 true 설정 시 다음과 같이 동작한다. form에서 항목이 변경되고 사용자가 취소,탐색,닫기버튼을 클릭하거나 (사용가능시)오버레이 또는 (설정시)ESC키를 눌렀을 때 모든 변경사항에 대해서 저장하거나 저장하지 않을지 메시지박스가 나타난다. (모달 form이 닫힌다.) | false |
| closeAfterAdd | 추가모드 시 레코드를 추가하고 대화상자 닫기 | false |
| clearAfterAdd | 추가모드 시 데이터를 추가 후 데이터 지우기 | true |
| closeAfterEdit | 편집모드 시 편집 후 대화상자 닫기 | false |
| reloadAfterSubmit | 서버 Ajax 후 그리드 데이터 다시 로드 | true |
| closeOnEscape | true 설정 시 사용자가 ESC키를 이용해 모달창을 닫을 수 있다. | false |
| ajaxEditOptions | 이 옵션은 서버에 저장할 때 form 편집에 대한 ajax의 전역셋팅을 설정할 수 있다. 이 옵션을 사용하면 complete 이벤트를 포함하여 현재 ajax셋팅을 겹쳐쓸 수 있다. | empty object |
| viewPagerButtons | form의 이전,다음 버튼(pager 버튼)의 활성화 옵션 | true |
| zIndex | 대화상자의 z-index 값. 다른 요소 아래에 대화상자가 보여지길 원하는경우 기본값인 950보다는 높아야 하며, 대부분의 경우 jQuery UI 대화상자의 기본값인 1000 보다 높아야 한다. | 950 |
| Event | Description |
|---|---|
| afterclickPgButtons | 편집모드에 있고 탐색(navigator)버튼이 활성화 되어있는 경우에 사용할 수 있다. 그리드에서 새로운 row가 로드된 경우, 또는 데이터의 변경이 허용된 경우, 또는 form이 다시 보여지는 경우의 상황 이후 호출이 된다. afterclickPgButtons : function(whichbutton, formid, rowid) {…} whichbutton - 'prev' or 'next' formid - form jQuery 객체, formid[0].id 이렇게 사용 가능하다. rowid - 현재 row의 id |
| afterComplete | 모든 액션과 이벤트가 완료되고, 그리드의 row가 추가 또는 업데이트 되었을 때 호출된다. afterComplete : function (response, postdata, formid) {…} response - 서버응답 postdata - 서버에 전송한 배열데이터 formid - form jQuery 객체, formid[0].id 이렇게 사용 가능하다. |
| afterShowForm | form이 보여진 직후 호출된다. 생성된 form의 id가 매개변수로 전달된다. afterShowForm : function (formid) {…} |
| afterSubmit | 서버로부터 응답을 받은직후 호출된다. 일반적으로 서버의 (성공적으로 저장여부)상태를 보여줄 때 사용한다. 서버의 응답과 id=value1,value2 형식의 배열을 매개변수로 받는다. 이 이벤트를 사용하면 [success, message, new_id] 항목의 배열을 반환해야 한다. success - true인경우 프로세스가 진행되고 false인경우 오류메시지가 보여지며 모든 프로세스가 중단된다. new_id - 추가모드 시 신규row id를 설정할 수 있다. afterSubmit : function(response, postdata) { … return [success,message,new_id] } |
| beforeCheckValues | (colModel을 통해 editrules옵션이 정의된경우)값을 확인하기전에 호출된다. 아래 2개의 매개변수가 전달된다. posdata - name:value 형식의 배열값 (name은 colModel의 name) formid - form jQuery 객체 mode - 현재 모드 (add or edit) 서버에 전송할 name:value 형식의 객체를 반환해야 한다. |
| beforeInitData | 신규 form 데이터를 초기화 하기전에 호출된다. form의 jQuery객체를 매개변수로 전달받는다. true 또는 false를 반환해야 하며 false 반환 시 작업은 끝나지 않고 form은 동작하지 않는다. beforeInitData : function(formid) {…} |
| beforeShowForm | 신규 데이터로 form을 보여주기전에 호출된다. form의 객체가 매개변수로 전달된다. beforeShowForm : function(formid) {…} |
| beforeSubmit | 데이터를 서버에 전송하기전에 호출된다. 전송할 데이터와 form객체가 매개변수로 전달된다. beforeSubmit : function(postdata, formid) { … return[success,message]; } 배열값을 반환해야 한다. success - 계속 진행되어야 하는지(true), 오류메시지가 나타나야 하는지(false) 여부 |
| onclickPgButtons | 편집모드에서만 사용가능 네비게이션의 이전/다음 버튼을 클릭한 직후 호출도니다. 현재 row를 떠나기전에 로드된 form에 데이터를 저장할 수 있다. onclickPgButtons : function (whichbutton, formid, rowid) {…} whichbutton - 'prev' or 'next' formid - form의 jQuery객체 (formid[0].id 이렇게 사용가능) rowid - 현재 row의 id |
| onclickSubmit | 전송(submit)버튼을 클릭하고 서버에 보낼 데이터가 만들어지면 호출된다. 메소드의 옵션배열값과 서버에 보낼 데이터가 매개변수로 전달된다. 서버에 전달할 데이터를 확장한 {}형식의 배열값을 반환해야 한다. onclickSubmit : function(params, posdata) { … return {add_data} } |
| onInitializeForm | 편집 또는 추가 시 데이터가 만들어질때 한번만 호출된다. form의 객체가 매개변수로 전달된다. onInitializeForm : function(formid) {…} |
| onClose | 닫기/취소버튼 또는 ESC키, 오버레이를 클릭하여 form이 종료될 때 이벤트가 호출된다. (선택사항) true 또는 false를 반환할 수 있으며, true반환 시 form이 종료되고 false반환 시 form이 종료되지 않는다. |
| errorTextFormat | 서버 Ajax호출에서 오류가 발생하면 이벤트가 호출되며, 에러메시지를 좋게 포멧팅해서 사용할 수 있다. 서버의 응답이 매개변수로 전달되며, 사용자에게 보여줄 (배열이 아닌)단일 메시지를 반환해야 한다. |
| serializeEditData | 설정된경우 Ajax요청에 전달할 데이터를 직렬화 할 수 있으며, 이 함수는 직렬화된 데이터를 반환해야 한다. 이 이벤트는 서버에 사용자정의 데이터를 보내야 할때 사용할 수 있다. ex) JSON string, XML string 등등 이 이벤트에는 서버에 보내질 데이터가 매개변수로 전달된다. |
[ form 구성 ]
- form이 생성될 때 아래의 규칙이 적용된다.
1) form의 숨겨진 필드는 row의 속성에 display:none이 적용된다.
2) 편집가능한 element의 id와 name은 colModel의 name 속성으로 설정된다.
3) form편집에서 element를 쉽게 조작하기위해 테이블의 모든 row에 'tr_' + (colModel의 name) 형식으로 id속성이 부여된다.
<form ....> <table> <tr id='tr_myfield'> <td> Caption</td> <td>edited element named, in colModel, as "myfield"</td> </tr> ... </table> </form>이렇게하면 beforeShowForm 이벤트를 사용하여 조건에 따라 테이블의 일부row를 쉽게 표시하거나 숨길 수 있다.
[ 서버에 보내는 데이터 ]
- 편집모드에서 서버에 데이터를 보내기위해 다음을 포함하는 객체 {}이다.
1) name:value 쌍 - name은 form의 element에 지정된 name (모든 input element에 대한)
2) 추가적으로 id:rowid 쌍이 추가된다. (rowid는 편집된 row의 id)
3) 추가적으로 oper:edit 쌍이 추가된다. (편집모드를 나타내는 edit)
4) onclickSubmit 이벤트에서 반환된 객체가 비어있지 않으면 서버에 보낼 데이터에 추가 확장한다.
Adding Row
- editGridRow 메소드는 'new'를 rowid로 전달해서 서버에 데이터를 추가하는데에도 사용되며 이 메소드는 jqGrid의 editurl옵션과 colModel의 공통편집속성을 사용한다.
호출방법
- old API
jQuery("#grid_id").editGridRow( "new", properties );- new API
jQuery("#grid_id").jqGrid('editGridRow', "new", properties );grid_id: 부모그리드의 id
properties: properties or event를 포함하는 name:value 쌍 배열
이 메소드는 언어파일의 다음 속성을 사용한다.
$.jgrid = { ... edit : { addCaption: "Add Record", editCaption: "Edit Record", bSubmit: "Submit", bCancel: "Cancel", bClose: "Close", saveData: "Data has been changed! Save changes?", bYes : "Yes", bNo : "No", bExit : "Cancel", ... }, ... }이 옵션은 메소드에 옵션으로 전달해서 겹쳐쓸 수 있으며, 메소드에 전달할때는 bSubmit:"Submit" 이렇게 사용을 한다. ($.jgrid.edit.bSubmit:"Submit" 이렇게 사용하지 마라)
* 옵션(properties, event)은 editGridRow 항목과 동일하다 (위 참조)
[ form 구성 ]
- form이 생성될 때 아래의 규칙이 적용된다.
1) form의 숨겨진 필드는 row의 속성에 display:none이 적용된다.
2) 편집가능한 element의 id와 name은 colModel의 name 속성으로 설정된다.
3) form편집에서 element를 쉽게 조작하기위해 테이블의 모든 row에 'tr_' + (colModel의 name) 형식으로 id속성이 부여된다.
<form ....> <table> <tr id='tr_myfield'> <td> Caption</td> <td>edited element named, in colModel, as "myfield"</td> </tr> ... </table> </form>이렇게하면 beforeShowForm 이벤트를 사용하여 조건에 따라 테이블의 일부row를 쉽게 표시하거나 숨길 수 있다.
[ 서버에 보내는 데이터 ]
- 편집모드에서 서버에 데이터를 보내기위해 다음을 포함하는 객체 {}이다.
1) name:value 쌍 - name은 form의 element에 지정된 name (모든 input element에 대한)
2) 추가적으로 id:_empty 쌍이 추가된다. (_empty는 신규row가 삽입됨을 나타낸다.)
3) 추가적으로 oper:add 쌍이 추가된다. (편집모드를 나타내는 add)
4) editData 객체가 비어있지 않으면 서버에 보낼 데이터에 추가확장한다.
5) onclickSubmit 이벤트에서 반환된 객체가 비어있지 않으면 서버에 보낼 데이터에 추가 확장한다.
viewGridRow
- 이 메소드는 editGridRow 메소드와 유사하지만 필드를 편집할 수 없고 form에 이벤트가 없다는점이 다르다.
호출방법
- old API
jQuery("#grid_id").viewGridRow( rowid, properties );- new API
jQuery("#grid_id").jqGrid('viewGridRow', rowid, properties );grid_id: 부모그리드의 id
rowid: 편집하는 row의 id
properties: properties or event를 포함하는 name:value 쌍 배열
이 메소드는 언어파일의 다음 속성을 사용한다.
$.jgrid = { ... view : { caption: "View Record", bClose: "Close" }, ...
1004lucifer
| Property | Description | Default |
|---|---|---|
| top | 모달대화상자의 초기 top 위치값. 기본값은 0 이며 그리드의 왼쪽위에 배치된다. jqModal플러그인이 있고 jqModal옵션이 true라면 기본값 0은 윈도우의 왼쪽 위에 배치된다. | 0 |
| left | 모달대화상자의 초기 left 위치값. 기본값은 0 이며 그리드의 왼쪽위에 배치된다. jqModal플러그인이 있고 jqModal옵션이 true라면 기본값 0은 윈도우의 왼쪽 위에 배치된다. | 0 |
| width | 대화상자의 width 값 | 300 |
| height | 대화상자의 height 값 | auto |
| dataheight | 모달 header와 footer의 사이에 대해서 스크롤을 지정할 수 있는 콘텐츠 높이 | auto |
| modal | 대화상자가 모달인지 여부를 결정. jqModal 플러그인이 있는 경우에만 작동함 | false |
| drag | 대화상자 드래그 여부. jqDnR플러그인이 있거나 jQuery UI에서 드래그 가능한 위젯이 있는 경우에만 작동함. | true |
| resize | 대화상자의 resize 여부. jqDnR플러그인이 있거나 jQuery UI에서 resize 가능한 위젯이 있는 경우에만 작동함. | true |
| jqModal | true로 설정하면 jqModal(플러그인이 있는경우)을 사용하여 대화상자를 생성한다. 플러그인이 없는경우 jqGrid 내부함수를 사용하여 대화상자 생성됨 | true |
| topinfo | 이 정보가 설정되면 row를 추가할때 모달 헤더 바로다음에 배치된다. | empty string |
| bottominfo | 이 정보가 설정되면 row를 추가할때 form의 마지막 바로다음에 배치된다. | empty string |
| closeicon | 배열값. 취소 버튼의 아이콘을 정의한다. 기본값 - [true,“left”,“ui-icon-close”] saveicon 설명을 참조 | |
| navkeys | 배열값, 편집모드에서만 동작함. (기본상태: 비활성화) 키보드 탐색기능을 추가하여 form 편집중 특정키를 눌렀을 때 레코드를 탐색할 수 있다. 첫번째 - 탐색 사용여부 두번째 - 레코드 up (기본적으로 up키의 코드) 세번째 - 레코드 down (기본적으로 down키의 코드) | [false,38,40] |
| closeOnEscape | true 설정 시 사용자가 ESC키를 이용해 모달창을 닫을 수 있다. | false |
| labelswidth | 테이블 요소로 뷰를 구성하기 때문에 이경우에 레이블의 필요한 너비가 얼마인지 계산하기가 어렵다. 필요에 따라 늘리거나 줄일 수 있다. | 30% |
| viewPagerButtons | form의 이전,다음 버튼(pager 버튼)의 활성화 옵션 | true |
| zIndex | 대화상자의 z-index 값. 다른 요소 아래에 대화상자가 보여지길 원하는경우 기본값인 950보다는 높아야 하며, 대부분의 경우 jQuery UI 대화상자의 기본값인 1000 보다 높아야 한다. | 950 |
| recreateForm | true 설정 시 colModel의 새옵션으로 대화상자가 활성화 될때마다 form이 다시 생성된다. | false |
1004lucifer
| Event | Description |
|---|---|
| onClose | 닫기/취소버튼 또는 ESC키, 오버레이를 클릭하여 form이 종료될 때 이벤트가 호출된다. (선택사항) true 또는 false를 반환할 수 있으며, true반환 시 form이 종료되고 false반환 시 form이 종료되지 않는다. |
| beforeShowForm | 신규 데이터로 form을 보여주기전에 호출된다. form의 객체가 매개변수로 전달된다. beforeShowForm : function(formid) {…} |
[ form 구성 ]
- form이 생성될 때 아래의 규칙이 적용된다.
1) 입력요소(input Element)가 생성되지 않는다.
2) form의 숨겨진 필드는 row의 속성에 display:none이 적용된다.
2) 보이는 element의 id는 'v_' + (colModel의 name 속성)으로 설정된다.
3) form편집에서 element를 쉽게 조작하기위해 테이블의 모든 row에 'trv_' + (colModel의 name) 형식으로 id속성이 부여된다.
<form ....> <table> <tr id='trv_myfield'> <td> Caption</td> <td>content of "myfield"</td> </tr> ... </table> </form>
delGridRow
- 이 메소드를 사용하면 서버측에서 삭제 작업을 수행할 수 있다.
- 이 메소드는 jqGrid의 editurl옵션과 colModel을 사용한다.
호출방법
- old API
jQuery("#grid_id").delGridRow( row_id_s, options );- new API
jQuery("#grid_id").jqGrid('delGridRow', row_id_s, options );grid_id: 부모그리드의 id
row_id_s: 삭제할 row의 id. 쉼표로 구분된 단일값 또는 id리스트일 수 있다.
options: properties or event를 포함하는 name:value 쌍 배열
이 메소드는 언어파일의 다음 속성을 사용한다.
$.jgrid = { ... del : { caption: "Delete", msg: "Delete selected record(s)?", bSubmit: "Delete", bCancel: "Cancel" }, ...이 옵션은 메소드에 옵션으로 전달해서 겹쳐쓸 수 있으며, 메소드에 전달할때는 bSubmit:"Delete" 이렇게 사용을 한다. ($.jgrid.edit.bSubmit:"Delete" 이렇게 사용하지 마라)
| Property | Description | Default |
|---|---|---|
| top | 모달대화상자의 초기 top 위치값. 기본값은 0 이며 그리드의 왼쪽위에 배치된다. jqModal플러그인이 있고 jqModal옵션이 true라면 기본값 0은 윈도우의 왼쪽 위에 배치된다. | 0 |
| left | 모달대화상자의 초기 left 위치값. 기본값은 0 이며 그리드의 왼쪽위에 배치된다. jqModal플러그인이 있고 jqModal옵션이 true라면 기본값 0은 윈도우의 왼쪽 위에 배치된다. | 0 |
| width | 대화상자의 width 값 | 300 |
| height | 대화상자의 height 값 | auto |
| dataheight | 모달 header와 footer의 사이에 대해서 스크롤을 지정할 수 있는 콘텐츠 높이 | auto |
| modal | 대화상자가 모달인지 여부를 결정. jqModal 플러그인이 있는 경우에만 작동함 | false |
| drag | 대화상자 드래그 여부. jqDnR플러그인이 있거나 jQuery UI에서 드래그 가능한 위젯이 있는 경우에만 작동함. | true |
| resize | 대화상자의 resize 여부. jqDnR플러그인이 있거나 jQuery UI에서 resize 가능한 위젯이 있는 경우에만 작동함. | true |
| url | 서버에 요청보낼 URL이며 설정 시 editurl 을 대체한다. | null |
| mtype | 서버에 데이터를 보낼 때 요청 메소드를 지정 ex) POST or GET | POST |
| delData | an array used to add content to the data posted to the server | empty |
| jqModal | true로 설정하면 jqModal(플러그인이 있는경우)을 사용하여 대화상자를 생성한다. 플러그인이 없는경우 jqGrid 내부함수를 사용하여 대화상자 생성됨 | true |
| delicon | 배열값. 삭제 버튼의 아이콘을 정의한다. 기본값 - [true,“left”,“ui-icon-delete”] 첫번째 - 아이콘 사용여부 두번째 - 아이콘이 텍스트의 left or right 위치결정 세번째 - 테마규칙에 따른 유효한 ui 아이콘 | |
| cancelicon | 배열값. 취소 버튼의 아이콘을 정의한다. 기본값 - [true,“left”,“ui-icon-cancel”] delicon 설명을 참조 | |
| reloadAfterSubmit | 서버 Ajax 후 그리드 데이터 다시 로드 | true |
| closeOnEscape | true 설정 시 사용자가 ESC키를 이용해 모달창을 닫을 수 있다. | false |
| ajaxDelOptions | 이 옵션은 서버에 삭제할 때 form 편집에 대한 ajax의 전역셋팅을 설정할 수 있다. 이 옵션을 사용하면 complete 이벤트를 포함하여 현재 ajax셋팅을 겹쳐쓸 수 있다. | empty object |
| zIndex | 대화상자의 z-index 값. 다른 요소 아래에 대화상자가 보여지길 원하는경우 기본값인 950보다는 높아야 하며, 대부분의 경우 jQuery UI 대화상자의 기본값인 1000 보다 높아야 한다. | 950 |
1004lucifer
| Event | Description |
|---|---|
| afterComplete | 모든 액션과 이벤트가 완료되고, 그리드의 row가 추가 또는 업데이트 되었을 때 호출된다. afterComplete : function (response, postdata, formid) {…} response - 서버응답 postdata - 서버에 전송한 배열데이터 formid - form jQuery 객체, formid[0].id 이렇게 사용 가능하다. |
| afterShowForm | form이 보여진 직후 호출된다. 생성된 form의 id가 매개변수로 전달된다. afterShowForm : function (formid) {…} |
| afterSubmit | 서버로부터 응답을 받은직후 호출된다. 일반적으로 서버의 (성공적으로 저장여부)상태를 보여줄 때 사용한다. 서버의 응답과 id=value1,value2 형식의 배열을 매개변수로 받는다. 이 이벤트를 사용하면 [success, message, new_id] 항목의 배열을 반환해야 한다. success - true인경우 프로세스가 진행되고 false인경우 오류메시지가 보여지며 모든 프로세스가 중단된다. new_id - 추가모드 시 신규row id를 설정할 수 있다. afterSubmit : function(response, postdata) { … return [success,message,new_id] } |
| beforeShowForm | 신규 데이터로 form을 보여주기전에 호출된다. form의 객체가 매개변수로 전달된다. beforeShowForm : function(formid) {…} |
| beforeSubmit | 데이터를 서버에 전송하기전에 호출된다. 전송할 데이터와 form객체가 매개변수로 전달된다. beforeSubmit : function(postdata, formid) { … return[success,message]; } 배열값을 반환해야 한다. success - 계속 진행되어야 하는지(true), 오류메시지가 나타나야 하는지(false) 여부 |
| onclickSubmit | 전송(submit)버튼을 클릭하고 서버에 보낼 데이터가 만들어지면 호출된다. 메소드의 옵션배열값과 서버에 보낼 데이터가 매개변수로 전달된다. 서버에 전달할 데이터를 확장한 {}형식의 배열값을 반환해야 한다. onclickSubmit : function(params, posdata) { … return {add_data} } |
| onClose | 닫기/취소버튼 또는 ESC키, 오버레이를 클릭하여 form이 종료될 때 이벤트가 호출된다. (선택사항) true 또는 false를 반환할 수 있으며, true반환 시 form이 종료되고 false반환 시 form이 종료되지 않는다. |
| errorTextFormat | 서버 Ajax호출에서 오류가 발생하면 이벤트가 호출되며, 에러메시지를 좋게 포멧팅해서 사용할 수 있다. 서버의 응답이 매개변수로 전달되며, 사용자에게 보여줄 (배열이 아닌)단일 메시지를 반환해야 한다. |
| serializeDelData | 설정된경우 Ajax요청에 전달할 데이터를 직렬화 할 수 있으며, 이 함수는 직렬화된 데이터를 반환해야 한다. 이 이벤트는 서버에 사용자정의 데이터를 보내야 할때 사용할 수 있다. ex) JSON string, XML string 등등 이 이벤트에는 서버에 보내질 데이터가 매개변수로 전달된다. |
[ 서버에 보내는 데이터 ]
- 삭제모드에서 서버에 데이터를 보내기위해 다음을 포함하는 객체 {}이다.
1) id:rowids 쌍 - 여기서 rowid는 단일값일 수 있으며 다중선택의 경우 쉼표로 분리된 문자열값
2) 추가적으로 oper:del 쌍이 추가된다. (편집모드를 나타내는 del)
3) delData 객체가 비어있지 않으면 서버에 보낼 데이터에 추가확장한다.
4) onclickSubmit 이벤트에서 반환된 객체가 비어있지 않으면 서버에 보낼 데이터에 추가 확장한다.
GridToForm
- 이 메소드는 사용자와 상호작용하지 않는다.
호출방법
- old API
jQuery("#grid_id").GridToForm( rowid, formid );- new API
jQuery("#grid_id").jqGrid('GridToForm', rowid, formid );grid_id: 부모그리드의 id
rowid: row의 id
formid: form의 jQuery객체 (formid[0].id 이렇게 사용가능)
* 이 메소드를 호출하면 그리드의 id=rowid 를 사용하여 데이터를 읽을 수 있고 전달한 form에 그리드의 데이터를 배치할 수 있다.
form element의 name이 colModel의 값과 동일한경우 값이 form에 배치된다.
FormToGrid
- 이 메소드는 사용자와 상호작용하지 않는다.
호출방법
- old API
jQuery("#grid_id").FormToGrid( rowid, formid, mode, position );- new API
jQuery("#grid_id").jqGrid('FormToGrid', rowid, formid, mode, position );grid_id: 부모그리드의 id
rowid: row의 id
formid: form의 jQuery객체 (formid[0].id 이렇게 사용가능)
mode: 모드를 결정한다.(set or add, 기본값:set) set으로 설정되면 form의 신규값이 그리드의 레코드에 업데이트 되며, add로 설정되면 그리드에 레코드가 추가된다.
position: mode값이 add인 경우에만 작동함. (first or last)
* 이 메소드를 호출하면 GridtoForm메소드와 반대되는 동작을 하며 name이 일치하는경우 그리드의 form데이터에 배치된다.
참조
- http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing
댓글
댓글 쓰기