[jQuery] jqGrid 셀 수정

#. 그리드 내에서 셀을 수정하고 수정 값을 DB에 저장하는 기능을 추가한 내용에 대해 포스팅해보도록 하겠습니다.

#. 간략한 기능으론 수정할 셀을 클릭하면 멀티셀렉트가 처리되지 않게 하였습니다.

#. 셀을 수정하면 배경색을 변경하였고, 기존 값과 동일할 시 다시 배경색을 제거하였습니다.

#. 수정 시 적용이 아닌 멀티셀렉트를 이용해 수정한 셀을 지정하여 일괄 수정할 수 있도록 하였습니다.

---

• 우선 jqGrid를 작성하도록 하겠습니다.
  
  
• 필요한 옵션에 대한 설명은 아래 작성토록 하겠습니다.

$('#grid').jqGrid({
	url: 'test.do'
	,datatype: 'local'
	,colNames: [
			'수정'
		   ]
	,colModel: [{name:'test', editable:true, 
    		    editrules:{number:true, custom:true, custom_func:function(value, colname) {
			if(isNaN(value || value < 0)) {
				return [false, '해당 셀은 0 또는 양수만 입력 가능합니다.']
			}
			return [true,'']
		    }}]
	, cellEdit: true
	, cellsubmit: 'clientArray'
	, afterSaveCell: function(rowId, cellName, value, iRow, iCol) {
		var initValue = initValues[rowId][cellName];
		if(value !== initValue) {
			$('#' + rowId + ' td:eq(' + iCol + ')').addClass('edited-cell')
		} else {
			$('#' + rowId + ' td:eq(' + iCol + ')').removeClass('edited-cell')		
		}
	}
	,onCellSelect: function(rowid, iCol, cellcontent, e) {
			var grid = $(this);
		        var cm = grid.jqGrid('getGridParam', 'colModel');
		        var colName = cm[iCol].name;
		        var checkEditableCell = cm[iCol].editable === true;
		        
		        grid.jqGrid('setSelection', rowid)
		        
		        if(!checkEditableCell) {
		        	return;
		        }
		        if(colName === 'test') {
			    	grid.jqGrid('setSelection', rowid);
			    	return
		        }
			}
})

 

#. 위 내용을 살펴보면 아래와 같습니다.

• editable
  - true 설정 시 수정 기능을 가능하게 합니다.

• editrules
  - 기본적으로 제공하는 룰을 적용할 수 있습니다.
  - 또한 커스텀 기능이 있어 사용자가 알맞게 처리 가능합니다.
  
  
• cellEdit
  - jqGrid 옵션으로 true로 설정하여 수정가능토록 해야합니다.
  
  
• cellsubmit
  - 셀 수정 후 처리 방법을 선택할 수 있습니다.
  
  
• clientArray
  - 데이터를 서버로 즉시 전송하지 않고 로컬에서 업데이트만 처리한 뒤 별도로 서버에 보내주는 방법을 구현하여 전송하는 방식으로 일괄처리할 때 사용합니다.
  
  #. remote
  - 셀 변경 시 즉시 서버에 전송하는 방식으로 cellurl 옵션을 추가하여 uri를 작성해 해당 메서드로 데이터를 AJAX요청으로 보내 처리하는 방법입니다.
  
  #. afterSaveCell
  - 셀을 수정한 뒤 실행하는 이벤트 옵션으로 초기값을 initValue에 저장하고 이 값이 수정한 값과 다르면 css를 적용한 edited-cell을 추가하고 아니면 제거하도록 하였습니다.

• onCellSelect
  - 셀을 선택했을 때의 이벤트입니다.
  - 이 부분에선 수정가능한 셀을 클릭했을 땐 선택되지 않고 나머지 셀을 클릭해야만 선택되도록 하였습니다.

728x90

---

#. 셀 수정은 생각보다 간단했습니다.

 

#. 한 건 씩 바로바로 처리해야하는 경우엔 clientArray 대신 remote를 사용하고 editurl을 작성하여 즉시 통신하도록 하면 됩니다.

 

======================================
틀린 내용이 있거나 이견 있으시면 언제든 가감 없이 말씀 부탁드립니다!

======================================