JqGrid ) 그리드 cell에 input text, combobox 구현 & 수정시 그리드에 값 적용시키기

1) 적용할 컬럼에 editable: true, edittype: 'text', 'select' 정의하기. 

combobox 형태로 구현을 하려면 옵션들을 객체 const obj = {} 형식으로 가져와야 value 형태로 사용할수있다.

const city_obj = {};

// 서비스에서 받아온 option value가 array 형태라면 
value_array.forEach(function(item) {
    // option 으로 나와야하는 item.desc를 객체에 저장한다. 여기는 각자 서비스에 맞게..
	city_obj[item.code] = city_obj[item.desc]
});

var column = [

{ label: '국가' , name: 'country' ,width:73, editable :true, edittype:'text' }, 

{ label: '도시' , name: 'city'      ,width:73, editable :true, edittype:'select', editoptions:{value: city_obj} } 

] 

 

2. 그리드 cell에 값 입력 후 그리드 바깥 부분 클릭했을때 focusout 적용시키기.

focusout을 적용시키지 않고 afterEditCell(cell 수정후 발생시키는 이벤트), afterSaveCell(cell 저장 후 발생시키는 이벤트) 가 실행되어도 실행되지않는다. 

$(document).on('focusout', '[role="gridcell"] *', function() {
		    $(table_id).jqGrid('editCell', 0, 0, false);
});

 

3. 그리드 cell edit이 됐어도 cell에 그 값이 저장이 안되면 말짱 도루묵이니 ..(아 너무 옛날사람같다 ㅋㅋ ㅠ 말짱도루묵이 가장 표현하기좋은데 ..암튼..) afterEditCell을 발생시켜서 cell을 저장한다.

$(tableid).jqGrid({
	datatype : "local"
			... 등 옵션은 개인적으로 알아서 
    afterEditCell:function(rowid, cellname, value, iRow, iCol){
 		   // 수정한 cell 저장 
 		   $("#"+rowid+"_"+cellname).blur(function(){
 		        $(tableid).jqGrid("saveCell",iRow,iCol);
 		    });
 	}	                  
});

 

4. afterEditCell을 통해 저장시켰으니 이제 저장 후 이벤트를 발생시키는 afterSaveCell을 호출한다. (만약 저장시키고 해야할일이 없다면 여기는 패스해도 된다.)

$(tableid).jqGrid({
	datatype : "local"
			... 등 옵션은 개인적으로 알아서 
    afterEditCell:function(rowid, cellname, value, iRow, iCol){
 		   // 수정한 cell 저장 
 		   $("#"+rowid+"_"+cellname).blur(function(){
 		        $(tableid).jqGrid("saveCell",iRow,iCol);
 		    });
 	},
    afterSaveCell: function(rowid, cellname, value, iRow, iCol){
 			// 셀 저장 후 호출 
            
            //  grid의 모든 데이터를 가져온다 
  			var rowAllData = $(table_id).jqGrid("getGridParam","data");
  			var rowdata = (rowAllData != undefined && rowAllData != null) ? rowAllData : null;
  			
        	// 저장된 데이터를 포함한 그리드 모든 데이터를 가져와서 바로 반영해야하는 
            // 화면이 있었기에 모든 데이터를 가져와서 afterChangeCell 함수를 실행시킨다. 
  			afterChangeCell(rowdata); 			
 	}
});