jQgrid 사용하기

Note&pen
전자정부프레임워크
2018. 3. 1. 16:34

jQgrid 란 아래 이미지 처럼 데이터를 그리드형식으로

보여주는 jQuery 플러그인이다. jQgrid 는 관리자페이지

또는 재고관리 등에 매우 유용하게 쓰인다.

먼저 jQgrid를 사용하기 위해서는 아래와같은

설정 파일들이 필요하다 jQgrid 관련 홈페이지 에서

다운받아 사용할수 있다. jQuery가 충돌 나지 않게

잘 확인하고 사용하자.

1
2
3
4
5
6
7
<link rel="stylesheet" type="text/css" href="jqGrid-master/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="jqGrid-master/css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" href="jqGrid-master/css/addons/ui.multiselect.css" />
    
    <script type="text/javascript" src="jqGrid-master/jquery.js"></script>  
    <script type="text/javascript" src="jqGrid-master/js/i18n/grid.locale-kr.js"></script>
    <script type="text/javascript" src="jqGrid-master/js/jquery.jqGrid.min.js"></script>
cs

jQgrid가 들어가는 body 태그를 보자

1
2
3
4
5
6
7
8
<body>
    <div class="row">
        <div>
            <table id="jqGrid"></table>
            <div id="jqGridPager"></div>
        </div>    
    </div>
</body>
cs

테이블과 div 하나를 기본으로 넣자.

그리고 script부분을 채우자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script type="text/javascript">
$(document).ready(function() {
 
   var cnames = ['아이디','이름','전화번호','주소','기타','성별코드'];
 
       $("#jqGrid").jqGrid({
       
           url: "jqgridStartMain.do",
           datatype: "local",
           colNames: cnames,
           colModel:[
         {name:'seq',index:'seq', width:55, key:true, align:"center"},
         {name:'name',index:'name', width:100, align:"center"},
         {name:'phone',index:'phone', width:100},
         {name:'address',index:'address', width:100},
         {name:'etcc',index:'etcc', width:100},
         {name:'gender',index:'gender',     width:100}
   ],
           height: 480,
           rowNum: 10,
           rowList: [10,20,30],
           pager: '#jqGridPager',
           rownumbers  : true,                     
           ondblClickRow : function(rowId, iRow, iCol, e) {
 
   if(iCol == 1) {
 
             alert(rowId+" 째줄 입니다.");
             }
           },
       
           viewrecords : true,
           caption:"실습용 테이블"
       });
   });
</script>
Colored by Color Scripter
cs

4line의 cnames는 배열이다 헤더에 차례대로 입력되는

값을 설정하기 위해 만들었다.

9line datatype은 local로 설정했는데 이벤트가

발생되지 않으면 실행하지 않는다. 즉 url로 바로

이동하지 않는다는 것이다.

10line은 헤더에 배열형식으로 나오는 값을 설정해준다.

4line 에 만든 cnames에 적용시킨다.

11line은 데이터가 들어가는곳으로 배열형태로 받는다.

20line은 row를 몇 줄까지 보여줄건지 설정한다.

rowList는 셀렉트 박스 사용시 보여줄 row의 줄수를 설정한다.

pager는 페이징 기능이다 .

23line 은 true를 넣게 되어 줄 번호를 자동으로 그리드에 써준다.

이제 실행시켜보면

아래와같이 기본적인 틀이 생긴다.

다음 간단하게 하단에 셀렉을 추가 해보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="row">
      <div>
         <select id="selectId">
            <option value="">전체</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
         </select>
            <span><a href="#" onclick="javascript:goSearch();">조회</a></span>
       </div>
       <div>
         <table id="jqGrid"></table>
         <div id="jqGridPager"></div>
       </div>
      </div>
Colored by Color Scripter
cs

다음 10line에서 사용한 goSerarch() 함수를 만들어보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function goSearch() {
   var jsonObj = {};
   
   if($("#selectId").val() != "C") {
      jsonObj.serviceImplYn = $("#selectId").val();
   }
   alert(JSON.stringify(jsonObj));
   
   $("#jqGrid").setGridParam({   //파라미터를 받아 .do로 간다.
        datatype : "json",      //이벤트가 일어나면 컨트롤러단으로 간다. 
        postData : {"param" : JSON.stringify(jsonObj)},   // 키와 밸류를 들고 간다.
        loadComplete: function(data){
              $.each(data, function (i, item) {
                  if(i == "rows") {
                      if(item < 1) {
                          alert("데이터가 없습니다.");
                      }
                  }
              });
          
        },
        gridComplete : function(){
           
        }
     }).trigger("reloadGrid");
}
Colored by Color Scripter
cs

JSON.stringify()는 자바스크립트의 값을

JSON문자열로 형변환 시켜준다

다음 10line 에서 데이터타입을 json을 줬는데

이벤트가 일어나면 json형식으로 데이터를 전송한다.

postData는 ket와 value로 이루어져있다.

jsonObj에 select값이 들어가있는데 이것을 json문자열로

바꾸어 value에 넣는다.

25line trigger은 jqgrid가 데이터를 가져온 후 리로드를 해줘야

그리드에 적용이 되기 때문에 작업이 완료된 후 reload를 해준다.

다음 pom.xml에 gson 의존을 추가하자

gson은 json파일을 java object로 변환할수 있게 해주는

구글이 만든 라이브러리이다. json파일을 쉽게 읽고

만들수 있는 toJson, fromJson을 제공한다

이제 컨트롤러를 만들어주자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@RequestMapping(value = "jqgridStartMain.do")
    public void jqgridStartMain(HttpServletRequest request,
            HttpServletResponse response,
            @ModelAttribute JqgridVO jqgridVO, ModelMap model) throws Exception {
 
        PrintWriter out = null;
        
        response.setCharacterEncoding("UTF-8");
 
        String quotZero = request.getParameter("param");
 
        quotZero = quotZero.replaceAll(""", "\"");
        
        
    }
Colored by Color Scripter
cs

PrintWriter은 ajax 콜에서 데이터를 출력할때 사용된다.

다음 JsoinUtil을 공통폴더에 넣자

(자바폴더의 cmmn)

JsonUtil.java

그리고 VO를 만들어주자

이때 변수명들을 DB에 들어갈 컬럼명과 똑같이 만들어야한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
package egovframework.example.jqgrid.service;
 
public class JqgridVO {
   private String serviceImplYn;
   private String seq;
   private String name;
   private String address;
   private String etcc;
   private String gender;
   private String rows;
   private String param1;
   
   public String getParam1() {
    return param1;
}
 
public void setParam1(String param1) {
    this.param1 = param1;
}
 
private String page;
   
   private String pageNumber;
   private String totalTotCnt;
   
   private String totalPage;
   
   
 
   public String getTotalTotCnt() {
      return totalTotCnt;
   }
 
   public void setTotalTotCnt(String totalTotCnt) {
      this.totalTotCnt = totalTotCnt;
   }
 
   public String getTotalPage() {
      return totalPage;
   }
 
   public void setTotalPage(String totalPage) {
      this.totalPage = totalPage;
   }
 
   public String getPage() {
      return page;
   }
 
   public void setPage(String page) {
      this.page = page;
   }
 
   public String getPageNumber() {
      return pageNumber;
   }
 
   public void setPageNumber(String pageNumber) {
      this.pageNumber = pageNumber;
   }
 
   public String getRows() {
      return rows;
   }
 
   public void setRows(String rows) {
      this.rows = rows;
   }
 
   public String getSeq() {
      return seq;
   }
 
   public void setSeq(String seq) {
      this.seq = seq;
   }
 
   public String getName() {
      return name;
   }
 
   public void setName(String name) {
      this.name = name;
   }
 
   public String getAddress() {
      return address;
   }
 
   public void setAddress(String address) {
      this.address = address;
   }
 
   public String getEtcc() {
      return etcc;
   }
 
   public void setEtcc(String etcc) {
      this.etcc = etcc;
   }
 
   public String getGender() {
      return gender;
   }
 
   public void setGender(String gender) {
      this.gender = gender;
   }
 
   public String getServiceImplYn() {
      return serviceImplYn;
   }
 
   public void setServiceImplYn(String serviceImplYn) {
      this.serviceImplYn = serviceImplYn;
   }
   
   
}
Colored by Color Scripter
cs

다음 컨트롤러의 나머지 부분을 채워주자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
@RequestMapping(value="jqgridStartMain.do")
   public void jqgridStartMain(HttpServletRequest request, HttpServletResponse response, @ModelAttribute JqgridVO jqgridVO, ModelMap model) throws Exception {
      System.out.println("enter");
      PrintWriter out = null;
      response.setCharacterEncoding("UTF-8");
      
      String quotZero = request.getParameter("param");
      System.out.println(quotZero);
      
      quotZero = quotZero.replaceAll(""", "\"");
      System.out.println(quotZero);
      
      Map<String, Object> castMap = new HashMap<String, Object>();
      
      castMap = JsonUtil.JsonToMap(quotZero);
      
      jqgridVO.setServiceImplYn((String) castMap.get("serviceImplYn"));
      
      List<EgovMap> jqGridList = jqgridService.selectJqgridList(jqgridVO);
      
      EgovMap jqGridListCnt = jqgridService.selectJqgridListCnt(jqgridVO);
      
      HashMap<String, Object> resMap = new HashMap<String, Object>();
      
      resMap.put("records", jqGridListCnt.get("totaltotcnt"));
      resMap.put("rows", jqGridList);
      resMap.put("page", request.getParameter("page"));
      resMap.put("total", jqGridListCnt.get("totalPage"));
      
      out = response.getWriter();
      System.out.println(resMap);
      System.out.println(JsonUtil.HashMapToJson(resMap).toString());
      out.write(JsonUtil.HashMapToJson(resMap).toString());
   }
Colored by Color Scripter
cs

15line 의 castMap은 jsp의 goSearch()함수에서

serviceImplYn을 json string으로 받았던것을 맵인

자바객체로 바꿔준다.

19line의 jqGridList는 그리드에 붙을 줄이다.

jqGridListCnt는 그리드의 총갯수를 가져올 것이다.

다음 서비스와 임플 맵퍼를 채워놓자.

이제 SQL.xml을 채우자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<select id="selectJqgridList" parameterType="jqgridVO" resultType="egovMap">
        SELECT  a.*
          FROM  (
            SELECT  a.*,
                    ROWNUM rnum,
                    FLOOR((ROWNUM - 1) /#{rows} + 1) pageNumber
              FROM  (
                    SELECT  seq
                         , name
                         , phone
                         , address
                         , etcc
                         , gender
                      FROM jqgrid_start
                     WHERE 1=1
                     <if test='serviceImplYn != null'>
                         <choose>
                             <when test='serviceImplYn == "A"'>
                                 AND name = 'hanq'
                             </when>
                               <when test='serviceImplYn == "B"'>
                                 AND name = 'shink'
                             </when>
                             <when test='serviceImplYn == "D"'>
                                 AND name = 'rrrr'
                             </when>
                             <otherwise>
                             </otherwise>
                         </choose>
                    </if>
                 ORDER BY seq ASC
                    ) a
                ) a
           WHERE  a.pageNumber = #{page}
        order by a.rnum
    </select>
    
    <select id="selectJqgridListCnt" parameterType="jqgridVO" resultType="egovMap">
        SELECT  count(*) totalTotCnt
              , CEIL(count(*) / #{rows}) totalPage
          FROM  jqgrid_start
         WHERE  1=1
      ORDER BY  seq ASC
    </select>
Colored by Color Scripter
cs

16line의 조건들은 필요에 따라

알아서 채워놓자.

DB에는 seq, name, phone, address, etcc, gender 정도

필요한 데이터만큼 자기가 채워놓자.

저작자표시

'전자정부프레임워크' 카테고리의 다른 글

jQgrid 사용하기(3) (0)	2018.03.01
jQgrid 사용하기(2) (1)	2018.03.01
한글처리 하기 (0)	2018.02.28
Paging 구현하기 (0)	2018.02.28
체크박스 사용해 원하는 값 출력하기 (0)	2018.02.27

Web