jquery - jqGrid

리스트 표출을 구현하는 작업이 있었는데 다 만들고 내 코드를 보는데 정말 지저분했다...
화면 랜더 시 표출 리스트, 필터 및 검색 조건에 따른 표출 리스트, 페이징에 따른 표출 리스트 등등 너무 보기 힘들었다...근데 직장 동료가 이거 jqGrid 쓰면 편한데? 라면서 힌트를 툭 던져주었다. 그렇게 나는 jqGrid란걸 알게 되었고, 내 코드줄은 반 이상 정리가 되면서 많은 기능을 구현할 수 있었다. 이제부터 그 jqGrid에 대해서 정리를 해보려고 한다.

jqGrid란?

jqGrid는 jQuery라이브러리를 이용한 Grid Plugin 이다. 웹에서 테이블 형식의 데이터를 표시하고 조작을 위한 Ajax기반 자바스크립트 컨트롤러 기능을 한다.
jqGrid의 대표적인 장점은 페이징, 정렬과 같은 기능을 제공해준다는 점이다. 정해준 형식에 맞춰 사용해야 하지만 익숙해지기만 한다면 굉장히 편리하다.
그리고 디자인 같은 경우 jQuery-UI에서 제공하는 CSS로 자기 입맛에 맞는 디자인을 할 수 있다고 한다.

Option

url : 데이터를 가지고 올 수 있는 주소를 입력합니다.
mtype : 요청방식을 설정합니다. GET/POST
datatype : 가지고 오는 데이터의 타입을 설정합니다. 보통 xml, json,local 이렇게 세 가지를 자주 사용합니다.
colNames : 그리드 각각의 컬럼에 출력되는 이름입니다. 배열로 설정합니다.
colModel : 각 컬럼에 대한 상세 정보입니다. 서버로부터 받아온 데이터를 매핑해서 출력합니다.
jsonReader/xmlReader : 데이터 타입이 json/xml일 경우 reader를 통해서 데이터를 어떻게 읽어드릴지 설정할 수 있습니다.
rowNum : 초기에 출력할 데이터의 개수를 설정합니다.
pager : 그리드의 대표기능인 페이저를 설정합니다. 그리드 테이블 밑에 div를 넣어주고 그 div의 id값을 써주면 됩니다.
multiselect : row마다 selectbox가 생깁니다.
postData : 서버에 파라미터로 넘길 데이터를 설정합니다. 배열의 형태로 설정 가능합니다.

Event

● cell 클릭 시 이벤트

onCellSelect : function(rowid, index, contents, event){
         var cm = $(this).jqGrid('getGridParam', 'colModel');
         console.log(cm);
         if (cm[index].name=='name'){
          alert($(this).jqGrid('getCell', rowid, 'name')); 
         }
}

● 컬럼 숨기기

colModel:[
    {name:'index', align:'center',sortable:false,width:'17px'},
    {name:'name', align:'left',sortable:false,width:'120px'},
    {name:'model', align:'left',sortable:false},
    {name:'file', align:'left',sortable:false,hidden:true}
],

● 숨긴 컬럼 수정/추가 시 나오게 하기

colModel:[
    {name:'index', align:'center',sortable:false,width:'17px'},
    {name:'name', align:'left',sortable:false,width:'120px'},
    {name:'model', align:'left',sortable:false},
    {name:'file', align:'left',sortable:false,hidden:true,, editrules: {edithidden: true}}
],

● 로우에 포커스 및 색상변경

.ui-jqgrid .ui-state-highlight { 
     background: #FAED7D !important;
}
var dataList = $('#msdHistory').getRowData();
 for( var i = 0; i < dataList.length; i++ ){
 if(key==dataList[i].msdId){
     if (i==0){
         $("#msdHistory").jqGrid("setSelection", "01", false);
     }else{
         $("#msdHistory").jqGrid("setSelection", Number(i-"1"), false);
     }
     $('#msdHistory tr:eq('+Number(i+1)+')').focus();
     break;
     }
}