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

 

추천 그리드 ▼

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

[VanilaJS Free Grid library] Aljjabaegi Grid Grand Open

 

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

 

 

jqGrid에 filterToolbar와 dateRangePicker를 적용한 화면 입니다.

 

[구현된 기능]

● 그리드 헤더 클릭 시 오름/내림차순 정렬

● 첫번째 로우의 input text에 값 입력 후 Enter를 치면 조회 (멀티조회 가능) - filterToolbar

● 페이징 처리(그리드에 보여질 리스트 갯수 수정가능) RowNum, RowList

● 날짜 데이터 위 input text 클릭 시 기간 조회(dateRangePicker적용)

● 마지막 컬럼에 버튼 추가

● CRUD 아이콘 및 기능 추가 (pager 좌측 default)

 

jqGrid 관련 포스팅은 대략 4-5부가 될 것 같네요. 차근차근 진행하겠습니다.

이번 포스팅에서는 jqGrid의 json dataType 의 조회기능 구현에 대해 알아보겠습니다.

 

이전에 포스팅한 local dataType 과는 약간의 차이가 있습니다.

local 타입에 대해선 아래의 Link를 참고하세요.

 

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

 

위의 기능을 모두 구현하기 위해선 아래의 파일들이 필요합니다.

참고로 jqGrid 는 jquery-ui 를 참고하여 디자인 됩니다.

 

/** jqGrid 관련 js 파일 **/
<script type="text/javascript" src="<c:url value='/resource/js/aljjabaegi/jquery.jqGrid.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resource/js/aljjabaegi/grid.locale-kr.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resource/js/aljjabaegi/jqGridFunc.js'/>"></script>
 
/** dateRangePicker 관련 js 파일 **/
<script type="text/javascript" src="<c:url value='/resource/js/aljjabaegi/moment.min.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resource/js/aljjabaegi/jquery.daterangepicker.min.js'/>"></script>
 
/** 관련 CSS **/
<link rel="stylesheet" type="text/css" href="${ctx }/resource/js/jqgrid/css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css" href="${ctx }/resource/css/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="${ctx }/resource/css/daterangepicker.min.css"/> 

 

위 파일은 아래의 Link 들에서 다운로드 하시면 됩니다.

Link1 : http://www.trirand.com/blog/?page_id=6
Link2 : https://momentjs.com/

Link3 : https://github.com/sensortower/daterangepicker

 

CDN도 제공을 하니 다운 받지 않으실 분들은 하지 않으셔도 되요.

 

그럼 jqGrid를 활용해 조회를 하기 위한 script 소스를 보도록 하겠습니다.

 

[jqGridTest.jsp]

function setGrid(){
    var html = '<table id="csrList"></table>';
    $('#listTable').html(html);
    var gridOption = {
        id : 'csrList',
        url : '${ctx}/getCsrList.do',
        mType : 'POST',
        dataType : 'json',
        postData : {
        },
        colN : ['테넌트명','ID','이름','내선번호','연락처','등록일자','최근 로그인', 'PW 초기화'],
        colM : [
            {name:'csrTenant',align:'center',width:'50px'},
            {name:'csrId', align:'center',width:'50px'},
            {name:'csrName', align:'center',width:'50px'},
            {name:'csrDn', align:'center',width:'40px'},
            {name:'csrPhone', align:'center',width:'50px'},
            {name:'regDtm', align:'center',sorttype: 'date'},
            {name:'recentLoginTime', align:'center'},
            {name:'pwReset', align:'center', width:'25px'},
        ],
        rowNum : 10,
    };
    jqGridFunc.setGrid(gridOption);
}

 

페이지가 로드될 때 setGrid라는 함수를 호출 하고 있죠.

setGrid라는 함수는 jqGrid를 생성하는데 필요한 옵션들을 저장하는 Object 입니다.

 

(listTable 이라는 div에 table을 추가해 매핑하는 방식입니다..)

 

이러한 옵션들이 들어있는 object를 파라메터로 jqGridFunc의 setGrid 함수를 호출 합니다.

 

[jqGridFunc - setGrid Function]

setGrid : function(gridOption){
    var grid = $('#'+gridOption.id);
            
    grid.jqGrid({
        url : gridOption.url,
        mtype : gridOption.mType,
        datatype : gridOption.dataType,
        postData : gridOption.postData,
        colNames : gridOption.colN,
        colModel : gridOption.colM,
        rowNum : gridOption.rowNum,
        jsonReader : {
            repeatitems : false,
            root : 'row',
        },
        viewrecord : true,
        loadonce : false,
        loadui : "enable",
        loadtext:'데이터를 가져오는 중...',
        height : "680px",
        autowidth:true,
        shrinkToFit : true,
        refresh : true,
        loadError:function(xhr, status, error) {
            alert(error); 
        },
    });
},

 

jqGrid의 옵션들에 대한 설명은 아래의 Link를 참고하세요.

 

Link : JqGrid options

 

 

 

 

간단히 중요한 부분만 설명드리면,

post데이터가 서버로 보낼 파라메터, jsonReader가 받아온 데이터의 매핑 부분이라고 보시면 됩니다.

loadonce 설정도 사람들이 제일 많이 실수 하는 옵션인데요. true로 설정할 경우 데이터를 한번만 불러오기 때문에

기타 변경된 옵션에 대한 설정이 제대로 적용되지 않음에 주의하셔야 합니다.

 

그럼 Controller를 보도록 하죠.

 

    @RequestMapping(value="/getCsrList.do", method = RequestMethod.POST, produces="text/plain;Charset=UTF-8")
    @ResponseBody
    public String getCsrList(SearchVO param){
        Gson gson = new Gson();
        CsrSet set = new CsrSet();
        List<CsrVO> data = null;
        try {
            int cnt = mainService.getCsrListCnt(param);
            if (cnt>0){
                data = mainService.getCsrList(param);
                set.setTotalCnt(cnt);
                set.setRow(data);
                set.setResultCode(Define.SUCCESS_CODE);
            }else{
                set.setResultCode(Define.NO_DATA_CODE);
            }
        } catch (Exception e) {
            set.setResultCode(Define.FAIL_CODE);
            e.printStackTrace();
        }
        return gson.toJson(set);
    }

 

VO로 바로 파라메터를 받고 조회된 데이터를 gson을 활용하여 jSon String으로 변환해 return 하고 있습니다.

12행에 setRow 보이시죠. 이 부분이 가져온 데이터를 row에 매핑하고

jqGrid는 jsonReader에서 이 row를 받아 root에 매핑해 표출 하게 됩니다.

 

이제 페이지를 실행하게 되면 아래와 같이 jqGrid가 나오는 것을 보실 수 있습니다.

 

 

다음 2부에서는 navGrid를 추가해 페이지 설정을 하는 방법에 대해 알아보도록 하겠습니다.

 

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