본문 바로가기
Library & Framework/jqGrid

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

by 썸머워즈 2021. 10. 19.
반응형

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


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

setCell이라는 jqGrid 내장 메서드에 대해 알아보도록 하자.

 

이 setCell 메서드는 신기하게도 특정 컬럼 셀의 값을 변경하거나 스타일을 변경 등이 가능하여 자주 사용된다.

하나하나 사용법에 대해 알아보자.


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

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

// jqg14의 id를 가진 row의 mine 컬럼/셀의 값을 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');

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

 

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


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

 

wiki:methods - jqGrid Wiki

 

www.trirand.com

 

반응형


댓글

TOP