🧩jqGrid - cell - editable(style)

🧩jqGrid - cell - editable(style)🧩

 

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’ 클래스를 주입하여 편집 방지를 걸어둔 것이다.

 

2. setCell을 사용한 특정 컬럼의 값, 클래스, 스타일 등 속성 변경하기 

jqGrid에는 특정한 컬럼의 셀을 수정하는데에 사용되는 다용도의 메서드가 존재한다.

🔥 setCell 메서드는 특정 컬럼 셀의 값을 변경하거나 스타일 변경 등이 가능하다.

 

특정 컬럼의 값 변경하기(ft. 빈값으로 만들기)

// 기본 사용법
$('#mainGrid').jqGrid('setCell', rowid, cellname, data);

// jqg14의 id를 가진 row의 main 컬럼/셀의 값을 record로 변경한다.
$('#mainGrid').jqGrid('setCell', 'jqg14', 'mine', 'record');

// jqg14의 id를 가진 row의 mine 컬럼/셀의 값을 비운다.
$('#mainGrid').jqGrid('setCell', 'jqg14', 'mine');

→ 특정 컬럼의 값을 비우기 위해 data 매개변수 부분을 빈 쿼터(’’)로 넣어주면 에러는 나지 않지만 아무 일도 일어나ㅣ 않는다.

 

특정 컬럼의 스타일 추가/변경하기 (ft. 배경색 주기)

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

// mine 컬럼의 배경 색상을 변경한다.
$("#mainGrid").jqGrid('setCell', 'jqg14', 'mine', '', {'background':'#fcfdfd'});

// mine 컬럼의 배경 색상과 글자 색을 변경한다.
$("#mainGrid"=).jqGrid('setCell', 'jqg14', 'mine', '', {'background':'#fcfdfd', 'color':'red'});

 

특정 컬럼의 클래스 추가하기

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

// mine 컬럼에 it 클래스를 추가한다.
$("#mainGrid").jqGrid('setCell', 'jqg14', 'mine', '', 'it');

// mine 컬럼에 record 클래스를 추가한다.
$("#mainGrid").jqGrid('setCell', 'jqg14', 'mine', '', 'record'); 

cf. 클래스 예제를 보면 의아하게도 스타일을 추가해줄 때 사용한 위치에 그대로 클래스명을 주어 사용한다. 아마 받는 매개변수 타임이 달라서 가능한 것 같다.

그리고, 클래스를 추가했으면 삭제를 해줘야하는데, 이는 표준 메서드에는 존재하지 않고 직접적으로 접근해서 지워줘야하는 번거로움이 존재한다.

---

참고

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

 

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