[jQuery] jqGrid - loadColplete 옵션을 이용한 특정 Row Color 변경하기

 jqGrid - loadColplete 옵션을 이용한 특정 Row Color 변경하기

 

 

jqGrid에는 loadComplete 옵션이 있다.

 

말 그대로 그리드 로드가 모두 종료된 후에 적용될 이벤트를 등록하는 옵션이다.

 

다양한 이벤트를 등록할 수 있겠지만 ,

 

이번에 소개할 이벤트는 특정 Row의 색상을 변경하는 이벤트이다.

 

 

만약에 데이터 중 몇 Row에만 Background-color를 입히고 싶거나,

폰트를 변경하고 싶을 때 , 이 이벤트를 적용해 특정 Row의 Style을 조작하는 것이다.

백문이 불견이니 소스 투척 !

 

 

[jqGrid.jsp]

 

1.  
2. ....................Another jqGrid Options......................
3.  
4. colModel:[  
5. ....................
6.           {name:'rowName',index:'devProjectName',width:"200"},
7. .....................
8. ],
9.  
10. Grid 로드 완료 후
11. loadComplete : function(data){  
12.    
13.     // Row Color Change Event
14.     var ids = $("#GridId").getDataIDs();
15.     // Grid Data Get!
16.     $.each(
17.         ids,function(idx, rowId){
18.         rowData = $("#GridId").getRowData(rowId);
19.         // 만약 rowName 컬럼의 데이터가 공백이라면 해당 Row의 색상을 변경!           
20.         if (rowData.rowName == '') {
21.             $("#GridId").setRowData(rowId, false, { background:"#F7FAFC" });
22.         }
23.     }
24.     );         
25. },
26.  
27.  
28. ....................Another jqGrid Options......................
29.  
30.  

이미 이렇게 사용하고 있는 개발자가 많이 있는 걸로 알고 있지만 ,  

간단하게 소스를 포스팅하고 나도 공부하고 ^^

 

딱히 별건 없다. 그리드의 Row 데이터를 읽어와서 그 Row가 자신이 원하는 Row인지

체크한 후에 setRowData로 css를 조작하면 끝 !

 

backgroud 부분은 변경하고싶은 css 프로퍼티로 변경하면 된다. ^^

 

그럼 이번 포스팅도 Bye~Bye~ 

[출처] [jQuery] jqGrid - loadColplete 옵션을 이용한 특정 Row Color 변경하기|작성자 Jack