jqgrid editcell 중 cell을 doubleclick 할 경우 input박스가 저장될경우 해결방안

1.afterEditCell

업무를 하다보면 jqgrid를 사용할경우가 생기는데, 이때 cell 편집기능을 사용하여 편집된 내용을 서버에 전송하는 경우가 빈번히 있다.

 

jqgrid에서 edit을 한뒤 그대로 getRowData()를 사용하여 데이터를 뽑으면 닫혀지지 않은 cell때문에, input값이 RowData로 뽑히는 경우가 있다.

 

그때는 이전에 설명한 blur나 foucsout을 통해서 input박스를 벗어났을때 saveCell을하여 jqgrid input을 닫아주는 효과를 줄수있다. 아래와 같이.

 

  $("#" + rowid + "_" + cellname).blur(function(e){		    	
			        $("#"+id).jqGrid("saveCell",iRow,iCol);
			    });

 

하지만, 위와같은 상황일때 cell을 한번 클릭하였을때는 정상적으로 동작하지만 edit된 cell을 doubleclick 하면 input값이 그대로 남아 saveCell을 하게되면 그대로 html input 값이 저장되어 버리는 불상사가 생겨버린다.

 

이러한 불상사를 없애기위해 이미 edit중인 박스를 클릭할 경우를 따로 처리해주어야한다.

 

jqgrid afterEditCell함수는 edit후에 발생하는 함수로써 이안에 아래와 같은 함수를 적어준다.

 

 $("#" + rowid + "_" + cellname).click(function(e){	
 					 window.cache_click=0;
					 window.cache_click++;
					 if(window.cache_click==1){
						$("#"+id).jqGrid("restoreCell",iRow,iCol,true);
						$("#"+id).jqGrid("saveCell",iRow,iCol);
					    $("#"+id).jqGrid("resetSelection");
					    window.cache_click=0
					 }
					 
					 
				    });

 

afterEditCell은 edit할때 한번 발동하는 이벤트이므로, editmode로 진입할떄 해당 input html에 click 이벤트를 걸어주어

해당 input html이 2번이상 click될경우 cell을 되돌리고 savecell을 통해 저장한다.