[jqGrid] 특정 셀 편집(editable) 유무 설정하기 (ft. editable-cell, not-editable-cell)

- 특정 셀 편집(editable) 유무 설정하기 -

---

jqGrid를 사용하다보면 cellEdit 옵션을 통해 편집모드를 사용하여 셀을 편집하게 되는 경우가 있는데,

이때 "editable-cell", "not-editable-cell" 이라는 클래스 속성을 통해 편집 유무를 설정할 수 있다.

 

예제를 통해 몇가지 방법에 대해 배워보자.

---

▷ 1. cellattr 옵션을 통한 편집 유무 설정하기 (ft. 편집 방지)

cellattr : function(rowid, value, rawObject, cm, rdata){
  //필요에 따라서 if 조건문을 걸어 조건에 맞는 cell만 편집 방지
  return "class='not-editable-cell'";
},

cellattr 옵션은  jqgrid에서 사용되는 colmodel 옵션중에 하나인데,

 

사실 편집 유무 뿐만 아니라 다양한 작업을 할때 자주 사용되는 옵션이여서 알아두면 좋다.

cell마다 반복되며 해당 함수가 실행되기 때문에 cell 속성을 주입할 수 있어 cell마다 'not-editable-cell' 클래스를 주입하여 편집 방지를 걸어둔 것이다.

 

참고 : http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options 

wiki:colmodel_options - jqGrid Wiki

 

▷ 2. setCell method를 활용한 편집 유무 클래스 주입

// 기본 사용법 (클래스를 줄때는 data 부분을 빈 쿼터로 넘겨준다.)
$('#mainGrid').jqGrid('setCell', rowid, cellname, data, class);

// mine 컬럼에 editable-cell 클래스를 추가하여 수정이 가능하도록 변경한다.
$('#mainGrid').jqGrid('setCell', 'jqg14', 'mine', '', 'editable-cell');

// mine 컬럼에 not-editable-cell 클래스를 추가하여 수정이 불가능하도록 변경한다.
$('#mainGrid').jqGrid('setCell', 'jqg14', 'mine', '', 'not-editable-cell');

jqGrid를 사용하게되면 가장 많이 사용하는것중 하나인 내 setCell이다. 

이 내장 method를 활용하여 클래스를 주입해 편집 유무를 설정하는 것이다.

 

참고 : https://mine-it-record.tistory.com/450

[JavaScript] jqGrid - 특정 컬럼/셀(Cell)의 값, 클래스, 스타일 등 변경하기 (ft. setCell)