JqxGrid ) 해당 id를 가진 row의 색상을 변경해주는것이 아닌 cell하나에 색상을 적용하기.

처음에 해당 id를 가진 row의 색상을 변경해주는방법으로 구현을 했는데 

document.getElementsByClassName(id).style.backgroundColor = '#'+color;

 한줄의 row색상을 바꿔서인지 한 컬럼 head 더블클릭하여 헤드 정렬 시 중복되는 cell의 서로 다른색상이 겹쳐 보이는..에러가 있어서 찾다 찾다가 cell 하나하나 색상을 변경해주는 방법을 선택했다.

방법은 cellclassname 속성에 classname을 주고싶은 대로 나눠서 준 다음 해당 class에 색상을 적용하면 된다.

ex) 그리드 내용 이 아래와 같다면 김미미가 여자니까 첫번째 row는 노랑 , 김철수는 남자니까 두번째 해당 row에는 보라색을 줘보자. 

번호	이름	성별	블라	블라	블라
1	김미미	여	blah	blah	blah
2	김철수	남	blah	blah	blah

 

(1) 그리드 초기화 
function setGrid(){
    
    //cellclassname에 들어갈 class를 정하는 함수 
	var cellclass = function (row, columnfield, value, rowData, some) {
		 	
            // 넘어오는 parameter 값들 확인 
            console.log('row', row);
            console.log('columnfield', columnfield);
            console.log('value', value);
            console.log('rowData',rowData);
            console.log('some', some);

			//상태구분 비교값 초기화
			var gender_desc  = rowData.gender_desc;			// 성별
            var colorclass = gender_desc == "F" ? "femaleColor" : "maleColor"  // 색상class이름 
            
            // class리턴 
            return colorclass; 
         
	}
	       	  
	 
	var table_id = "#cell_color_example_grid";
	var column =  = [
				{label:"key_" , name:"key_"	, width:100,hidden:true, key:true},
				{label:"이름"	 , name:"loan_lib_name"	, width:125	 ,  cellclassname : cellclass },
				{label:"성별"	 , name:"gender_desc" ,  width:120 ,  cellclassname : cellclass },
				];
	var option = {
    		... 기타등등 옵션 
	 		sortEvent:function (){	
            		// sortEvent에 컬러를 주는함수를 한번 더 호출해야 색상이 섞이지 않습니다. 
	 				initColor();
    		}
	}; 
    
    
	$('#current_loan_list_grid').jqxGrid({ sortable: true}); 
    
    
}	

(2) 데이터 받아서 그리드 그리는 함수에 initColor(); 를 호출시켜주세요


(3) 실질적으로 cell에 color를 적용하는 함수 
function initColor(){
		// 저는 colorSetting을 선택 후 저장 -> localStorage에서 꺼내와서 썼지만
        // 예시기 때문에 그냥 color setting을 하는것만 간단하게 적겠습니다!
      	var colorArray = [
        	{color:"FAF4C0", column:"femaleColor"},
            {color:"E8D9FF", column:"maleColor"}      
        ];
		
        colorArray.forEach(function (item) {
        		var myElement = document.querySelectorAll(".grid_"+item.column+"");
	    			myElement.forEach(function(inner){
	    			inner.style.backgroundColor = "#"+item.color;
	   		 });
        })

}