jquery jqgrid 의 모든 것, 사용법, jQuery 추천 그리드

추천 그리드 ▼

Link : https://aljjabaegi.tistory.com/593

[VanilaJS Free Grid library] Aljjabaegi Grid Grand Open

 

jquery jqgrid 의 모든 것, 사용법, jQuery 추천 그리드

 

jqgrid는 개발하기 편하고 빠르며 다양한 옵션을 제공하여 선호하는 분들이 많죠.

이번 포스팅에서는 이에 대한 사용법을 알아보도록 하겠습니다.

 

1. 다운로드

 

Link : jqGrid Download

 

위의 Link로 이동하여 원하는 버젼의 플러그인을 다운로드 받습니다.

 

 

2. 세팅

 

<link rel="stylesheet" type="text/css" href="${ctx }/resource/js/jqgrid/css/ui.jqgrid.css"/>
<script type="text/javascript" src="<c:url value='/resource/js/jqgrid/js/jquery.jqGrid.min.js'/>"></script>

 

js 파일과 css 파일을 페이지에 추가하면 됩니다.

이제 사용할 준비는 다 되었습니다.

 

3. 데이터 출력하기

 

<table id="table1"></table>

 

function makeTable(id, array){
     $("#"+id).jqGrid({
            datatype: "local",
            height: 250, 
            width : 630,
            colNames:['일시','속도', 'RPM', '브레이크','상태'],
            colModel:[
                {name:'fOcurDtmc', align:'right'},
                {name:'spd', align:'right'},
                {name:'rpm', align:'right'},
                {name:'brkYn', align:'right'},
                {name:'status', align:'right'}    
            ],
            caption: "DTG 데이터"
      });

      for(var I in array){
           $("#"+id).jqGrid('addRowData',i+1,array[i]);
      }
}

makeTable('table1', dataArray);

 

보시면 아시겠지만 내용은 어렵지 않습니다.

위의 예는 로컬 파일의 데이터를 읽어 배열을 만들고 해당 배열을 그리드로 출력하는 것입니다.

jqGrid의 데이터 타입은 json, xml, array 가 가능합니다.

 

var jsonString = JSON.stringify(array);
var json = JSON.parse(jsonString);

 

이렇게 json 타입으로 변환을 해주면 확실히 속도가 빨라지게 됩니다.

121개의 로우를 출력하는데 json은 약 0.3초, array는 약 0.6초가 걸리더군요.

(대량의 데이터 출력시 json 타입을 사용하는 것이 좋습니다.)

json에 대해서는 아래의 Link를 참조.

 

Link : JSONObject JSONArray 에 대한 이해 및 사용법

 

 

 

 

데이터 구조는 이렇게 되어있습니다.

 

 

옵션을 보시면,

colModel 의 name값과 데이터의 key가 같으면 해당 컬럼으로 출력이 되는 것을 알수 있습니다.

 

출력화면을 보시면 옵션이 더 이해가 잘 되실 겁니다.

 

datatype은 말그대로 데이터의 타입,

colNames 은 그리드 헤더의 제목 배열,

colModel은 데이터 행의 컬럼 매핑에 필요한 jsonArray

height, width 는 높이 넓이,

sortable은 정렬 여부,

caption 은 그리드의 타이틀 입니다.

 

json일 경우 url옵션의 url로 데이터 재요청.

 

● cell 클릭 시 이벤트

onCellSelect 옵션 추가.

 

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에 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}
],

 

 

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

colModel에 editrules:{edithidden: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}}
],

 

 

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

setSelection 추가 (첫번째 로우는 01 두번째 11 세번째 21...)

rowIndex가 01, 11, 21, 31 ... 이렇게 증가.

간단히 CSS로 수정 ->

 

.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;
     }
}

 

● cannot read property 'msie' of undefined 문제 발생시

아래 코드를 jqgrid js 파일 로드 전에 추가.

 

<script type="text/javascript">
    jQuery.browser = {};
    (function () {
         jQuery.browser.msie = false;
         jQuery.browser.version = 0;
         if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) {
              jQuery.browser.msie = true;
              jQuery.browser.version = RegExp.$1;
         }
    })();
</script>

 

● 그리드 옵션에 autowidth : true 추가시 가로 100% 설정 가능.

 

autowidth : true,
height : "680px"

 

● datatype : "local" 일 경우 해더 정렬 시 리스트 표출 개수가 달라질 경우

rowNum 옵션 갯수로 변하는 것이니, rownum 옵션을 여유롭게 주자.

 

 rowNum : 1000,

 

● 서버로 데이터 넘기는 방법 post_data

 

mType : 'POST'
postData : {  
    pageIndex : 1,
    pageUnit : 10,
    pageSize : 10
} 
//이렇게 하면 Controller 에서 값을 받을 수 있다. (VO로 매핑됌)

 

● page 추가시 Uncaught TypeError: Cannot read property 'integer' of undefined 에러 해결방법

jqGrid를 받았을 때 js 파일안에는 i18n 폴더가 있다. 거기에서 grid.locale-kr.js를 받아 프로젝트에 추가한다.

 

 <script type="text/javascript" src="<c:url value='/resource/js/grid.locale-kr.js'/>"></script>

 

●그리드내 행에 버튼 추가

F는 클릭했을 때 실행 함수

pwReset은 세팅시점의 colModel의 name 이다.

 

이미지의 경우

chgImage = "<img src=\"${ctx}/resource/images/download.png\" onclick=\"javascript:download('d')\" style='width:20px;height:20px;cursor:pointer'>";

 

gridComplete: function(){
    var ids = $("#csrList").jqGrid('getDataIDs');
    for(var i=0;i < ids.length;i++){
        var cl = ids[i];
        chgPw = "<input style='height:22px;width:50px;' type='button' value='RESET' onclick=\"F\"  />"; 
        $("#csrList").jqGrid('setRowData',ids[i],{pwReset:chgPw});
    } 
},

 

● 리스트 페이지부에 수정,추가,삭제,조회 아이콘 추가

아이콘 클릭 시 모달팝업으로 해당 데이터 CRUD 가능 

 

$('#'+리스트id).jqGrid('navGrid', '#'+페이지id,
    {
     edit : true,  // 수정 아이콘
     add : true,  // 추가 아이콘
     del : true,  // 삭제 아이콘
     search : false  //조회 아이콘
    }
);

 

적용했을때

 

 

● jqGrid 페이지 설정 rowNum,  rowList 로직

이전 postData 가 넘어가는 문제 해결

여기서 주의해야 할 점은 setGridParam을 쓰지 않고 getGridParam을 사용하는 부분입니다.

setGridParam을 사용해서 매개변수를 새로 세팅하더라도 이전의 매개변수값이 넘어가는 문제가 있습니다.

그렇기 때문에 현재의 gridParam을 받아 object의 값을 바꿔주는 방법으로 설정하여야 합니다.

 

//그리드 옵션에 jsonReader object 추가
// jsonReader는 서버에서 데이터를 받을 때 매핑하는 옵션입니다. 



    jsonReader : {
     repeatitems : false,
     root : 'row',
//     page : 'currentPage',  //현재 페이지
     total : 'totalPage',   //전체 페이지
     records : 'totalCnt',  //전체 데이터 개수
//     값확인 방법
//     page : function(obj){
//      console.log(obj);
//      console.log(obj.currentPage);
//     },
     id : 'csrId'
    }, 

 
//onPaging 옵션 추가 (실제 페이지 이벤트)

onPaging: function(action){
     var suffix = "csrPage";
     var currentPage = $("#csrList").getGridParam("page");  //현재 페이지
     var lastPage = $("#csrList").getGridParam("lastpage");  //마지막 페이지
     var crn = $('.ui-pg-selbox option:selected').val();         //rowList의 현재값
     var userPage = $('.ui-pg-input').val();
     console.log(action);
     if(action=="next_"+suffix){
      if( currentPage < lastPage){
       jqGridFunc.refreshGrid('csrList', currentPage+1, crn);
      }
     }else if(action=="prev_"+suffix){
      if( currentPage > 0 && currentPage != 1){
       jqGridFunc.refreshGrid('csrList', currentPage-1, crn);
      }
     }else if(action=="first_"+suffix){
      jqGridFunc.refreshGrid('csrList', 1, crn);
     }else if(action=="last_"+suffix){
      jqGridFunc.refreshGrid('csrList', lastPage, crn);
     }else if(action=="user"){
      if (userPage>lastPage || userPage< 1){
       alert('페이지 범위가 올바르지 않습니다.');
       return;
      }
      jqGridFunc.refreshGrid('csrList', userPage, crn);
     }else if(action=="records"){
      if( currentPage <= lastPage){
                         jqGridFunc.refreshGrid('csrList', 1, crn);                    
                     }else{
                         alert('잘못된 페이지를 입력 하였습니다.');
                     } 
     }
    },





//refreshGrid 함수(그리드 새로고침)

  refreshGrid : function(grid, page, unit){
       var newPostData = $('#'+grid).jqGrid("getGridParam", "postData");
       newPostData.pageIndex = page;
       newPostData.pageUnit = unit;
        $('#'+grid).jqGrid().trigger("reloadGrid");
  },

 

적용했을 때

주의)물론 컨트롤러에서도 jsonReader에 있는 값을 리턴 해주어야 합니다.

참고)Controller

 

import egovframework.rte.ptl.mvc.tags.ui.pagination.PaginationInfo;
.
.
.
   paginationInfo.setTotalRecordCount(cnt);
   paginationInfo.setCurrentPageNo(param.getPageIndex());
   paginationInfo.setRecordCountPerPage(param.getPageUnit());
   paginationInfo.setPageSize(param.getPageSize());
   param.setFirstIndex(paginationInfo.getFirstRecordIndex());
   param.setLastIndex(paginationInfo.getLastRecordIndex());
   param.setRecordCountPerPage(paginationInfo.getRecordCountPerPage());
.
.
.

 

● jqGrid 페이징 삭제

 

//옵션에 아래 내용 추가
pgbuttons : false,
pginput : false,
pgtext : '',

 

 

● 그리드 전체 행 개수 구하기

 

$('#gridId').getGridParam("reccount");

 

● 컬럼 글자색 변경

 

//colM에 formatter 사용
{name:'process',align:'center', width:'50px', formatter:chgColor},
function chgColor(cellValue, option, rowObject){
    if(cellValue==1){
    	return '<span style="color:red">'+cellValue+'</span>';
    }else if(cellValue==2){
    	return '<span style="color:red">'+cellValue+'</span>';
    }
}

 

● 리스트 내 데이터 json 으로 얻기

 

var dataList = $('#리스트id').getRowData();
for( var i = 0; i < dataList.length; i++ ){
     console.log(dataList[i]);
}

 

● 스크롤 생겼을 때 선택된 tr 값에 따라 스크롤 이동 (key는 테이블의 키값이 될수 있는 컬럼의 값)

 

function setListFocus(key){
    var dataList = $('#msdHistory').getRowData();
    $('#msdHistory tr').removeClass('on');
 
    for( var i = 0; i < dataList.length; i++ ){
        if(key==dataList[i].msdId){
            if (i==0){
                $('#01').addClass('on');
            }else{
                $('#'+i+"1").addClass('on');
            }
        var position = $(".grid tr:eq("+i+")").position();
        $('.grid').animate({scrollTop : position.top}, 400);
        break;
        }
    }
}

 

 

● dataType json 데이터 조회

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 1부 데이터 조회

 

● dataType json 페이징 설정

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 2부 페이징 설정

 

● 테이블 헤더 클릭 정렬

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 3부 헤더 정렬

● 멀티조건 정렬

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 4부 멀티 조건 조회

 

● dateRangePicker 적용

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 5부 기간 조회 dateRangePicker설정

 

● CUD 기능 구현

Link : jqGrid dataType json CRUD + filterToolbar + dateRangePicker 6부 CUD 기능 구현

 

 

(계속 진행중..)