cellEdit 사용

그리드에 에디터를 사용해서 데이터를 수정해야하는 경우가 있다.

그럴때에는 옵션으로

cellEdit: true

cellsubmit: 'clientArray'

추가해주면 된다. 

※cellsubmit 옵션

 셀 수정후 어떤 곳으로 전송을 할것인지를 결정해준다.

 현재 local로 저장하고 있는 경우에는 특정 url 대신에 clientArray 로 지정해준다.

var table_id      = '#regCode_and_userClasCode_grid';
 
        //서명,발행자,isbn,저자,발행년 을 던져야 함.
        var column=col;
        
        $(table_id).jqGrid({
            datatype: "local",
            data:data,
            colModel:column,
            width: getScreenSize(),
            height: 550,
            rowNum: 30,
            shrinkToFit:false,
            styleUI : 'Bootstrap',
            cellEdit: true,
           cellsubmit: 'clientArray',
            onCellSelect: function (id) {
                
            },
            ondblClickRow: function(rowid,iRow,iCol){
                
            }
 
        });
 

에디터를 사용하고 싶은 컬럼에만 editable :true 을 주고

에디터 종류에 따라edittype 옵션을 준다. 

                {label:'성인자료대출여부'        ,name:"USEOBJCODE"    ,width:103 ,align:"center",editable :true,edittype:"select",editoptions:{value:{"Y":"Y","N":"N"}}},
 

※ edittype  옵션

일반 text로 수정하고 싶을때는 특별히 주지 않아도 되고

select박스같은 경우에는 

edittype:"select" 주고 select 박스 안에 그려질 데이터와 value 는

editoptions:{value:{"Y":"Y","N":"N"}} 을 이용해서 그려준다.

editoptions:{value:{"value":"text","value":"text"}}

셀 안에 특정 데이터만 입력하고싶게 하거나 알럿창을 띄우는 등에 이벤트를 주려면은 

{label:'대출기간' ,name:"LOAN_PERIOD",width:65,align:"right",editable :true ,editoptions:{ dataInit: function(element) {userClassCode_number(element);}}},
                                                                                         //숫자만 입력하게 하고싶을때
 
//숫자만 입력 가능하게
 function userClassCode_number(element){
     $(element).keyup(function(){
         var val1 = element.value;
         var num = new Number(val1);
         if(isNaN(num)){
          element.value = '';
         }
        });
 }
 
 

- 에디터 사용시 다른 cell을 클릭해야만 수정한 cell이 저장되고 cellEdit가 닫힌다. 

 그리드 밖에 포커스를 두었을때 cellEdit를 닫고싶으면

afterEditCell 옵션을 사용하면 된다. 

$(table_id).jqGrid({
        datatype: "local",
        data:data,
        colModel:column,
        width: getScreenSize(),
        height: 550,
        rowNum: 30,
        shrinkToFit:false,
        styleUI : 'Bootstrap',
        cellEdit: true,
        cellsubmit: 'clientArray',
        onCellSelect: function (id) {
        },
        ondblClickRow: function(rowid,iRow,iCol){
        },
        afterEditCell:function(rowid, cellname, value, iRow, iCol){
            //qGrid에서 CellEdit 모드 일 때 마우스가 Input에서 focus를 벗어 났을 때 Cell Save
 
            $("#"+rowid+"_"+cellname).blur(function(){
                $(table_id).jqGrid("saveCell",iRow,iCol);
            });
        }
 
    });

==> 총정리

 
function userClassCode_gridPrint(data,col){
    
    var table_id      = '#userClassCode_grid';
    
    var column=col;
//    var column=[
//                {label:'직급'                ,name:"DESCRIPTION"    ,width:66 ,align:"left" },// ,sorttype: "int"
//                {label:'성인자료대출여부'        ,name:"USEOBJCODE"    ,width:103 ,align:"center",editable :true,edittype:"select",editoptions:{value:{"Y":"Y","N":"N"}}},
//                {label:'대출기간'            ,name:"LOAN_PERIOD",width:65,align:"right",editable :true ,editoptions:{ dataInit: function(element) {userClassCode_number(element);}}},
//                {label:'반납연기일수'        ,name:"POSTPONEMENT_PERIOD",width:75,align:"right",editable :true,editoptions:{ dataInit: function(element) {userClassCode_number(element);}}},
 
//                
//                ];
    
    
 
    
    $(table_id).jqGrid({
        datatype: "local",
        data:data,
        colModel:column,
        width: getScreenSize(),
        height: 550,
        rowNum: 30,
        shrinkToFit:false,
        styleUI : 'Bootstrap',
        cellEdit: true,
        cellsubmit: 'clientArray',
        onCellSelect: function (id) {
        },
        ondblClickRow: function(rowid,iRow,iCol){
        },
        afterEditCell:function(rowid, cellname, value, iRow, iCol){
            //qGrid에서 CellEdit 모드 일 때 마우스가 Input에서 focus를 벗어 났을 때 Cell Save
 
            $("#"+rowid+"_"+cellname).blur(function(){
                $(table_id).jqGrid("saveCell",iRow,iCol);
            });
        }
 
    });
}
 
 
 
//숫자만 입력 가능하게
 function userClassCode_number(element){
     $(element).keyup(function(){
         var val1 = element.value;
         var num = new Number(val1);
         if(isNaN(num)){
          element.value = '';
         }
        });
 }