Translate

[jqGrid] Inline 편집 설명







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



Inline 편집

 - 인라인 편집은 아래와 같이 그리드행에서 직접 변경하여 데이터베이스 정보를 빠르게 업데이트 하는 방법이다.
 - inline편집모듈, common 모듈 로드가 되어야 사용가능하다.






메소드

 - 인라인편집을 위해 아래의 그리드API 5가지 추가 메소드를 사용할 수 있다.
 1) editRow
 2) saveRow
 3) restoreRow
 4) addRow
 5) inlineNav
1004lucifer
* 위 메소드는 이미 생성된 그리드, 버튼클릭, 그리드자체의 이벤트에서만 호출 가능


ex)
jQuery("#grid_id").jqGrid({
...
   onSelectRow: function(id){
     if(id && id!==lastSel){ 
        jQuery('#grid_id').restoreRow(lastSel); 
        lastSel=id; 
     }
     jQuery('#grid_id').editRow(id, true); 
   },
...
});
위 예제에서 다른 row가 편집중이며 아직 저장되지 않은경우 현재 선택된 row를 열기전에 원래 데이터가 복원되고 row가 닫힌다.



editRow
 - old API
jQuery("#grid_id").editRow(rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
 - new API
jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);

grid_id: 이미 구성된 그리드
rowid: 편집하는 row의 id
keys: true 로 설정 시 Enter를 사용하여 저장하고 ESC를 사용하여 취소가능
oneditfunc: 입력필드에 대한 사용자 접근을 허용하기전에 편집을 위해 row에 접근이 된 후 호출된다. 함수의 매개변수로 row의 id가 전달된다.

succesfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc 함수는 아래의 saveRow 섹션에서 설명한다.


 - colModel에서 일부 필드의 편집가능 항목을 true로 설정할 수 있는 대신, class값에 'not-editable-cell' 이 있는경우 해당셀을 편집할 수 없다.

 - editRow에서 설정할 때 oneditfunc 파라메터는 따옴표로 묶거나 괄호() 를 입력하면 안되고, 함수의 이름만 표시해야 한다.

 - jqGrid v4 부터 메소드에 전달된 파라메터는 아래와 같이 객체참조가 가능하다.


객체 매개변수를 사용하여 호출
jQuery("#grid_id").jqGrid('editRow',rowid, 
{ 
    keys : true, 
    oneditfunc: function() {
        alert ("edited"); 
    }
});
1004lucifer
기본 객체 매개변수는 아래와 같다.
editparameters = {
 "keys" : false,
 "oneditfunc" : null,
 "successfunc" : null,
 "url" : null,
        "extraparam" : {},
 "aftersavefunc" : null,
 "errorfunc": null,
 "afterrestorefunc" : null,
 "restoreAfterError" : true,
 "mtype" : "POST"
}
 
jQuery("#grid_id").jqGrid('editRow',rowid,  parameters);
 - keys가 true이면 나머지 설정 successfunc, url, extraparam, aftersavefunc, errorfunc, afterrestorefunc 함수는 Enter키가 눌려지면 saveRow 메서드에 매개변수로 전달이 된다. (saveRow는 jqGrid에 정의하지 않더라도 자동으로 호출된다.)
 - 이 메소드가 특정 행에서 호출되면 jqGrid는 편집가능한 필드에 대한 데이터를 읽고 edittype 및 editoptions에 정의된 해당 요소를 구성한다.



saveRow
 - 편집된 row를 저장한다.

호출방법
 - old API
jQuery("#grid_id").saveRow(rowid, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
 - new API
jQuery("#grid_id").jqGrid('saveRow',rowid, successfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);
1004lucifer
객체 매개변수를 사용하여 호출
jQuery("#grid_id").jqGrid('saveRow',rowid, 
{ 
    successfunc: function( response ) {
        return true; 
    }
});
기본 객체 매개변수는 아래와 같다.
saveparameters = {
 "successfunc" : null,
 "url" : null,
        "extraparam" : {},
 "aftersavefunc" : null,
 "errorfunc": null,
 "afterrestorefunc" : null,
 "restoreAfterError" : true,
 "mtype" : "POST"
}
 
jQuery("#grid_id").jqGrid('saveRow',rowid,  saveparameters);
rowid: 저장할 row의 id
succesfunc: request가 성공한 직후 바로 호출되며, 서버에서 받은 데이터를 매개변수로 전달한다. true 또는 false를 반환해야 한다.
url: 정의된경우 options 배열의 editurl을 대체하며, 'clientArray'로 설정하면 데이터는 서버에 요청을 보내지 않고 나중에 수동저장을 위해 그리드에만 저장된다.
extraparam: name:value 형식의 배열, 설정시 다른값과 같이 서버에 전송된다.
aftersaveFunc: 데이터사 서버에 저장된 후 호출되며, 함수에 서버응답과 rowid가 매개변수로 전달된다. url이 clientArray로 설정되면 이벤트도 호출된다.
errorfunc: 서버에러 발생시 호출됨
afterrestorefunc: 정의된 경우 row를 복원한 후 restoreRow(행이 저장되지 않은경우)메소드에서 호출되며 rowid를 매개변수로 전달해준다.



url (또는 editurl)이 clientArray인 경우를 제외하고 메소드가 호출되면 특정 row의 데이터가 name:value 형식으로 서버에 전송된다. (name은 colModel의 name값이고, value는 새로변경된 값)
jqGrid는 id:rowid 쌍의 데이터를 추가해서 서버에 전송한다.

ex)
 - old API
데이터를 그리드와 서버에 저장할 때
jQuery("#grid_id").saveRow("rowid", false);
서버에 Ajax 호출 없이 그리드에만 저장
jQuery("#grid_id").saveRow("rowid", false, 'clientArray');

 - new API
jQuery("#grid_id").jqGrid('saveRow',"rowid", false);
jQuery("#grid_id").jqGrid('saveRow',"rowid", false, 'clientArray');

object 매개변수를 사용하려면 다음과 같이 하면 된다.
jQuery("#grid_id").jqGrid('saveRow',"rowid", { url : 'clientArray' });
1004lucifer
이 외에도 아래의 그리드옵션에서 설정가능한 두가지 옵션이 있다.
PropertyTypeDescriptionDefault
ajaxRowOptionsobject이 옵션은 row편집을 서버에 저장할 때 ajax의 전역셋팅을 설정할 수 있다.
이 옵션을 사용하면 complete 이벤트를 포함하여 현재 ajax셋팅을 겹쳐쓸 수 있다.
empty object
serializeRowDatapostdata설정된경우 Ajax요청에 전달할 데이터를 직렬화 할 수 있으며, 이 함수는 직렬화된 데이터를 반환해야 한다.
이 이벤트는 서버에 사용자정의 데이터를 보내야 할때 사용할 수 있다.
ex) JSON string, XML string 등등
null



restoreRow
 - 이 메소드는 row를 편집하기전의 원래 데이터로 복원한다.

호출방법
 - old API
jQuery("#grid_id").restoreRow(rowid, afterrestorefunc);
 - new API
jQuery("#grid_id").jqGrid('restoreRow',rowid, afterrestorefunc);

객체 매개변수를 사용하여 호출방법
jQuery("#grid_id").jqGrid('restoreRow',rowid, 
{ 
    "afterrestorefunc" : function( response ) {
        // code here 
    }
});
기본객체 매개변수는 다음과 같다.
restoreparameters = {
 "afterrestorefunc" : null
}
 
jQuery("#grid_id").jqGrid('restoreRow',rowid,  restoreparameters);
rowid: 복원할 row
afterstorefunc: 정의된경우 row가 복원된 후 호출, rowid가 매개변수로 전달된다.



addRow
 - 이 메소드는 inline편집을 위해 행을 추가한다.
1004lucifer
호출방법
 - old API
jQuery("#grid_id").addRow(rowid, parameters);
 - new API
jQuery("#grid_id").jqGrid('addRow',parameters);
parameter는 객체이며 아래와 같은 기본값을 가진다.
parameters =
{
    rowID : "new_row",
    initdata : {},
    position :"first",
    useDefValues : false,
    useFormatter : false,
    addRowParams : {extraparam:{}}
}
rowID (string): 추가된 새로운 row의 id
initdata (object): name:value 쌍의 객체 (name은 colModel의 name)
position (string): 그리드에 추가될 새로운 row의 위치를 결정하며 기본값은 'first'이다. 'last' 설정 시 마지막위치에 추가된다.
useDefValues (boolean): true 설정 시 colModel의 eidtoptions의 defaultValue 속성을 사용한다.
useFormatter (boolean): true 설정 시 formatter액션으로부터 파라메터를 동기화 시킨다.
addRowParams (object): addRow에 전달되는 객체 매개변수 (editRow와 동일하다)


* 실제로 이 메소드는 이미 구성된 두개의 메소드를 사용하며, 첫번째로 로컬row를 추가하는 addRowData 메소드를 호출하고 그다음 row를 편집하는 editRow를 호출한다.
 keys 파라메터가 true로 설정 시 사용자가 ESC 키를 누르면 row가 자동으로 삭제된다.



inlineNav
 - 인라인 메소드 addRow, editRow, saveRow, restoreRow에 해당하는 navigator 버튼을 추가한다. 이 메소드를 사용하려면 이 메소드를 호출하기전에 navGrid 메소드를 우선적으로 호출해야 한다.

호출방법
 - old API
jQuery("#grid_id").navGrid(pagerid, {...});
jQuery("#grid_id").inlineNav(pagerid, parameters);
 - new API
jQuery("#grid_id").jqGrid('navGrid',pagerid, {...});
jQuery("#grid_id").jqGrid('inlineNav',pagerid, parameters);
parameter는 아래 기본값이 있는 객체이다.
parameters = { 
   edit: true,
   editicon: "ui-icon-pencil",
   add: true,
   addicon:"ui-icon-plus",
   save: true,
   saveicon:"ui-icon-disk",
   cancel: true,
   cancelicon:"ui-icon-cancel",
   addParams : {useFormatter : false},
   editParams : {}
}
1004lucifer
PropertyTypeDescriptionDefault
addbooleanNavigator의 추가버튼의 활성화/비활성화 여부
버튼을 클릭 시 addParams를 매개변수로 addRow가 실행된다.
true
addiconstring추가버튼 활성 시 버튼에 보여질 아이콘 설정
현재 UI테마 이미지의 아이콘만 추가 가능
ui-icon-plus
addtextstring추가버튼의 텍스트를 설정한다.empty
addtitlestring추가버튼 활성화 경우, 마우스 over 시 보여질 타이틀을 설정한다.Add new row
editbooleanNavigator에서 편집버튼의 활성화/비활성화 여부
버튼 클릭 시 editParams를 매개변수로 editRow가 실행된다.
true
editiconstring편집버튼의 보여질 아이콘을 설정
현재 UI테마 이미지의 아이콘만 추가 가능
ui-icon-pencil
edittextstring편집버튼의 텍스트를 설정한다.empty
edittitlestring추가버튼 활성화 경우, 마우스 over 시 보여질 타이틀을 설정한다.Edit selected row
positionstringPager에서 Navigator 버튼의 위치를 결정한다.
ex) left | center | right
left
saveboolean저장버튼의 활성화/비활성화 여부
버튼 클릭 시 editPrams를 매개변수로 saveRow가 실행된다.
true
saveiconstring저장버튼에 보여질 아이콘을 설정
현재 UI테마 이미지의 아이콘만 추가 가능
ui-icon-disk
savetextstring저장버튼에 보여질 텍스트를 설정한다.empty
savetitlestring저장버튼 활성화 경우, 마우스 over 시 보여질 타이틀을 설정한다.Save row
cancelboolean취소(복구)버튼의 활성화/비활성화 여부
버튼 클릭 시 editParams를 매개변수로 restoreRow가 실행된다.
true
canceliconstring취소버튼에 보여질 아이콘을 설정
현재 UI테마 이미지의 아이콘만 추가 가능
ui-icon-cancel
canceltextstring취소버튼에 보여질 텍스트 설정empty
canceltitlestring취소버튼 활성화 경우, 마우스 over 시 보여질 타이틀을 설정한다.Cancel trow editiong
addParamsobjectaddRow에 전달할 수 있는 파라메터이며 자세한 정보는 addRow매개변수 참조.{useFormatter : false}
editParamsobjecteditRow, saveRow, restoreRow 메소드에 전달할 파라메터. 자세한 정보는 관련 메소드 참고{}



 데이터 구성방법
  - row를 편집하고 input element를 만들 때 다음 규칙을 따른다.
  1) table row는 editable="1" 로 셋팅된다.
  2) 그리드옵션의 savedRow는 편집전에 (name:value 배열과 추가로 id:rowid)로 모두 채워진다.
  3) 숨겨진 필드는 포함되지 않는다.
  4) 편집가능한 element의 id는 (rowid)_(colModel의 name) 으로 구성된다. ex) 10_myname: (rowid:10, colModel의 name: myname)
  5) 편집가능한 element의 name은 colModel의 name 으로 구성된다.
  6) row가 저장되거나 복원되면 editable 속성은 0으로 셋팅되며 (id=rowid)savedRow 아이템은 삭제된다.

 서버에 전달되는 내용
  - 데이터가 서버에 전달될 때 아래의 내용을 포함하는 객체 {}가 생성된다.
  1) name:value 쌍의 값 (모든 input element에 해당하며 element의 name이 쌍의 name이 된다.)
  2) id:rowid 쌍이 추가되며 rowid는 row의 id이다.
  3) extraparam이 비어있지 않으면 전달할 데이터에 포함된다.



ex)
...
<head>
<script type="text/javascript">
jQuery(document).ready(function(){ 
  var lastsel2
  jQuery("#rowed5").jqGrid({        
    datatype: "local",
    height: 250,
    colNames:['ID Number','Name', 'Stock', 'Ship via','Notes'],
    colModel:[
      {name:'id',index:'id', width:90, sorttype:"int", editable: true},
      {name:'name',index:'name', width:150,editable: true, editoptions:{size:"20",maxlength:"30"}},
      {name:'stock',index:'stock', width:60, editable: true, edittype:"checkbox",editoptions: {value:"Yes:No"}},
      {name:'ship',index:'ship', width:90, editable: true, edittype:"select",formatter:'select', editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},                       
      {name:'note',index:'note', width:200, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"10"}}                      
              ],
    onSelectRow: function(id){
      if(id && id!==lastsel2){
        jQuery('#rowed5').restoreRow(lastsel2);
        jQuery('#rowed5').editRow(id,true);
          lastsel2=id;
      }
    },
    editurl: "server.php",
    caption: "Input Types"
  });
  var mydata2 = [
    {id:"12345",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FE"},
    {id:"23456",name:"Laptop",note:"Long text ",stock:"Yes",ship:"IN"},
    {id:"34567",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TN"},
    {id:"45678",name:"Speakers",note:"note",stock:"No",ship:"AR"},
    {id:"56789",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FE"},
    {id:"67890",name:"Play Station",note:"note3",stock:"No", ship:"FE"},
    {id:"76543",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"AR"},
    {id:"87654",name:"Server",note:"note2",stock:"Yes",ship:"TN"},
    {id:"98765",name:"Matrix Printer",note:"note3",stock:"No", ship:"FE"}
    ];
  for(var i=0;i<mydata2.length;i++)
    jQuery("#rowed5").addRowData(mydata2[i].id,mydata2[i]);
});
</script>
</head>
<body>
<table id="rowed5" class="scroll"></table>
</body>
</html>
아래와 같이 보여진다.





참고
 - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing

댓글