jQgrid 자주사용하는 모음들 정리 afterEditCell,afterSaveCell 응용

*광고 클릭은 제게 큰 힘이됩니다!

 

1.afterEditCell

jQGrid를 사용하다보면 Edit관련된 작업을 많이 할것이다.

 

하지만, Jqgrid는 오픈소스에 걸맞게 Edit버그도 많고 사용하기도 어렵다

 

그중에 afterEditCell 은 cell을 수정하고나서 발생하는 이벤트이다.

 

여러가지 용도로 많이 사용하지만, cell이 edit모드 즉, 열려있는 상태에서 저장을하거나 getRowData() 를 하면 로우에 input태그가 들어가는 경우가 있다. 이유는 jqgrid는 edit을할때 그요소부문이 input으로 변환되고 그 input이 닫히지 않았기에 input태그내용이 들어가는것이다.

 

그래서 이러한 애로사항을 제거하기위해 

 

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

},

 

위처럼 blur를 사용하여 cell을 닫아준다. blur는 해당 element에서 포커스를 벗어나면 발생시키는 이벤트이며, saveCell을 통해 cell을 저장한다.

 

 

2.afterSaveCell

 

afeerSaveCell은 저장후에 발동하는 이벤트이다. jqgrid는 셀이 변경되면 getChangedCells 로 변경된 cell을 알수지만.

 

local데이터를 사용하면 여러가지 이슈등에 의해 getChangedCells로 정확하게 변경된  cell을 알아내기 어려울수 있다.

 

그럴때 사용하는 방법은 afterSaveCell을 이용하는것으로 아래와 같이

 

afterSaveCell: function (rowid, name, val, iRow, iCol) {
		if ($("#"+id).jqGrid('getRowData', rowid, "statusV") !== "U" && $("#"+id).getRowData(rowid).statusV!=="I" ) {
			$("#"+id).jqGrid('setRowData', rowid, { statusV: "U" });
						
		}
},

rowData를 가져와 미리 row에 statusV라는 컬럼을 넣어 edit이 이루어지면 statusV를 "U" 로 변경시켜

 

나중에 서버에 db에 update할때 statusV가 "U"인것만 가져와서 저장해주면 쉽게 update를 구현할수있다.