Translate

2019년 5월 5일 일요일

[jqGrid] Form 편집 설명







실습 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" 이렇게 사용하지 마라)


생성된 폼을 호출 시 다음과 같이 보여진다.
1004lucifer
PropertyDescriptionDefault
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
recreateFormtrue 설정 시 colModel의 새옵션으로 대화상자가 활성화 될때마다 form이 다시 생성된다.false
jqModaltrue로 설정하면 jqModal(플러그인이 있는경우)을 사용하여 대화상자를 생성한다.
플러그인이 없는경우 jqGrid 내부함수를 사용하여 대화상자 생성됨
true
addedrowrow를 추가할 위치를 지정
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
closeOnEscapetrue 설정 시 사용자가 ESC키를 이용해 모달창을 닫을 수 있다.false
ajaxEditOptions이 옵션은 서버에 저장할 때 form 편집에 대한 ajax의 전역셋팅을 설정할 수 있다.
이 옵션을 사용하면 complete 이벤트를 포함하여 현재 ajax셋팅을 겹쳐쓸 수 있다.
empty object
viewPagerButtonsform의 이전,다음 버튼(pager 버튼)의 활성화 옵션true
zIndex대화상자의 z-index 값.
다른 요소 아래에 대화상자가 보여지길 원하는경우 기본값인 950보다는 높아야 하며, 대부분의 경우 jQuery UI 대화상자의 기본값인 1000 보다 높아야 한다.
950


EventDescription
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 이렇게 사용 가능하다.
afterShowFormform이 보여진 직후 호출된다.
생성된 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
PropertyDescriptionDefault
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
jqModaltrue로 설정하면 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]
closeOnEscapetrue 설정 시 사용자가 ESC키를 이용해 모달창을 닫을 수 있다.false
labelswidth테이블 요소로 뷰를 구성하기 때문에 이경우에 레이블의 필요한 너비가 얼마인지 계산하기가 어렵다.
필요에 따라 늘리거나 줄일 수 있다.
30%
viewPagerButtonsform의 이전,다음 버튼(pager 버튼)의 활성화 옵션true
zIndex대화상자의 z-index 값.
다른 요소 아래에 대화상자가 보여지길 원하는경우 기본값인 950보다는 높아야 하며, 대부분의 경우 jQuery UI 대화상자의 기본값인 1000 보다 높아야 한다.
950
recreateFormtrue 설정 시 colModel의 새옵션으로 대화상자가 활성화 될때마다 form이 다시 생성된다.false

1004lucifer
EventDescription
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" 이렇게 사용하지 마라)


PropertyDescriptionDefault
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
delDataan array used to add content to the data posted to the serverempty
jqModaltrue로 설정하면 jqModal(플러그인이 있는경우)을 사용하여 대화상자를 생성한다.
플러그인이 없는경우 jqGrid 내부함수를 사용하여 대화상자 생성됨
true
delicon배열값.
삭제 버튼의 아이콘을 정의한다.
기본값 - [true,“left”,“ui-icon-delete”]
첫번째 - 아이콘 사용여부
두번째 - 아이콘이 텍스트의 left or right 위치결정
세번째 - 테마규칙에 따른 유효한 ui 아이콘
cancelicon배열값.
취소 버튼의 아이콘을 정의한다.
기본값 - [true,“left”,“ui-icon-cancel”]
delicon 설명을 참조
reloadAfterSubmit서버 Ajax 후 그리드 데이터 다시 로드true
closeOnEscapetrue 설정 시 사용자가 ESC키를 이용해 모달창을 닫을 수 있다.false
ajaxDelOptions이 옵션은 서버에 삭제할 때 form 편집에 대한 ajax의 전역셋팅을 설정할 수 있다.
이 옵션을 사용하면 complete 이벤트를 포함하여 현재 ajax셋팅을 겹쳐쓸 수 있다.
empty object
zIndex대화상자의 z-index 값.
다른 요소 아래에 대화상자가 보여지길 원하는경우 기본값인 950보다는 높아야 하며, 대부분의 경우 jQuery UI 대화상자의 기본값인 1000 보다 높아야 한다.
950

1004lucifer
EventDescription
afterComplete모든 액션과 이벤트가 완료되고, 그리드의 row가 추가 또는 업데이트 되었을 때 호출된다.
afterComplete : function (response, postdata, formid) {…}
response - 서버응답
postdata - 서버에 전송한 배열데이터
formid - form jQuery 객체, formid[0].id 이렇게 사용 가능하다.
afterShowFormform이 보여진 직후 호출된다.
생성된 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

댓글 없음 :

댓글 쓰기