[jQuery] jqGrid - colModel에 cellattr 옵션을 이용한 Row Style 변경하기 (셀병합,색상,폰트)

[jQuery] jqGrid - colModel에 cellattr 옵션을 이용한 Row Style 변경하기 (Colspan, Color, Font)

 

 

 지난 포스팅에서 사용한 loadComplete 이벤트로 Row의 색상을 변경해봤다.

 

하지만 그걸로는 부족하다. 그리드를 마치 엑셀처럼 만들기 위해서는

특정 Row의 셀 병합은 물론, 특정 Row의 색상이나 폰트 설정까지 할 수 있어야한다.

 

사용빈도가 높지는 않겠으나 퍼포먼스적인 면에서 아주 유용한 이벤트를 소개하겠다.

 

바로 cellattr 옵션이다.

 

이 옵션은 colModel에 속한 옵션으로서 해당 컬럼 데이터를 체크해서 그 데이터가 자신이 원하는

데이터일 때 데이터가 속한 Row의 속성 프로퍼티에 접근해 다양한 css 조작이 가능하다.

색상이나 폰트같은 경우는 지난 포스팅의 loadComplete 이벤트로도 충분히 구현할 수 있다.

 

하지만 이 옵션의 가장 큰 장점은 바로 셀 병합이 가능하다는 것이다.

 

정말 엑셀처럼 Row마다 몇칸을 셀병합할지도 지정할 수 있어서 아주아주 맘에든다.

 

그럼 소스 투척 ! ^^

 

아, 그리고 올린 소스는 되도록이면 메모장 파일로 첨부해 놓겠음

(소스 복사할때 숫자까지 되는지 얼마전에 알았음-_-;;)

 

[jqGrid.jsp]

 

1.  
2. $("#GridId").jqGrid({
3.     url: '/Server URL',
4.     postData: {
5.         ...............Server에 보낼 Data..................
6.     },
7.     mtype: 'POST',
8.     datatype: 'json',
9.     colNames:[
10.            'id',
11.            'Group',
12.            'Code',
13.            'MMT Code',
14.            'Project Code',
15.            'Project Name'
16.     ],
17.     colModel:[  
18.        {name:'id',index:'id',hidden:true},              
19.        {name:'Group',index:'Group', width:"70",search:true,align:"center",resizable:true},               
20.        {name:'Code',index:'Code',hidden:true},
21.            {name:'mmtCode',index:'mmtCode',width:"160",search:true, align:"center",resizable:true},
22.        {name:'ProjectCode',index:'ProjectCode',width:"120",search:true, align:"center",resizable:true},
23.            
24.        // cellattr 옵션을 이용 - 조건에 해당하는 특정 Row 스타일을 변경
25.        {name:'ProjectName',index:'ProjectName',width:"120",search:true, align:"left",resizable:true
26.         ,cellattr: function(rowId, tv, rowObject, cm, rdata) {
27.              // rowObject 변수로 그리드 데이터에 접근
28.              // ProjectCode값이 Momot라면 현재 Column부터 3칸을 셀병합하고 글자 정렬 가운데로 설정
29.              if (rowObject.ProjectCode == 'Momot' ) { return 'colspan=3 , style="text-align:center;"' }
30.        }},
31.  
32.        {name:'mmtName',index:'mmtName',width:"200",search:true, align:"left",  resizable:true}
33.     ],
34.     rowNum: 10,
35.     height: "auto",
36.     autowidth:false,
37.     forceFit: false,
38.     grouping: false,
39.     gridview: true,
40.     sortable: true,
41.  
42. .................................Another jqGrid Options......................................
43.  

중요한 부분은 주석으로 도배된 곳의 옵션이다.

 

물론 소스를 깔끔하게 하기위해서는 cellattr 옵션을 formatter 처럼 외부 function으로 빼는 것이 맞지만 ,

여기서는 굳이 그렇게 하지 않고 colModel에 포함시켜 구현하였다.

 

사용하는 방법도 formatter와 별반 다를 것이 없다.

 

그리고 return 부분에 변경할 css 속성을 적어주면 되고 , 셀 병합을 하기 위해서는

colspan으로 현재 cellattr 옵션이 걸려있는 필드부터 몇칸을 병합할지 값을 넣어주면 OK!

 

본인도 계속 이것 저것 테스트 중이기때문에 이번 포스팅은 요기까지 ! ^ㅡ^

 

[출처] [jQuery] jqGrid - colModel에 cellattr 옵션을 이용한 Row Style 변경하기 (셀병합,색상,폰트)|작성자 Jack