본문 바로가기
프로그래밍 언어/js

jQgrid의 지정한 칼럼, 지정한 열을 다른색으로 지정하기

by hs_seo 2013. 4. 12.

사용자에게 해당칼럼이나 열의 정보를 강조하기 위해서 테이블의 배경색을 바꾸고 싶을 때는 다음처럼 처리한다. 

// 배경색상 css 선언
var cssGreen = {'background-color':'#6DFF6D'};
   
// 그리드 데이터의 ID 가져오기
var ids = $('#requestList').jqGrid('getDataIDs');
   
// 그리드 데이터 가져오기
var gridData = $("#requestList").jqGrid('getRowData');

// 데이터 확인후 색상 변경
for (var i = 0; i < gridData.length; i++) {
   
	// 데이터의 is_test 확인
	if (gridData[i].is_test == 'Y') {
	   
		// 열의 색상을 변경하고 싶을 때(css는 미리 선언)
		$('#requestList tr[id=' + ids[i] + ']').addClass('grid-test');
	   
		// 칼럼의 색생을 변경하고 싶을 때
		$('#requestList').jqGrid('setCell', ids[i], 'document_status_text', '', cssGreen);
   }
}


이상과 같이 처리하면 칼럼이나 열의 색상 변경이 가능하다. 

* loadComplete 시점에 처리하면 된다. 



다른 방법으로는 afterInsertRow 이벤트를 이용하는 방법도 있다. 


// grid setting
		$('#statusList').jqGrid({
			
		    afterInsertRow: function(rowid, rowdata , rowelem){
		    	
				if (rowdata.job_type == "소계"){                					
					 $("#"+rowid).css("background", "#e0ffff");
				} 
				
			}        
		    
		});
반응형