JQGrid 전자정부프레임워크에 적용하기

프로그래밍/전자정부프레임워크(eGov)

JQGrid 전자정부프레임워크에 적용하기 - (1)

Jay22 2017. 3. 19. 12:26

Jqgrid란 이처럼 데이터를 그리드형식으로 보여주는 jquery 플러그인이다. 매우 editable하며 개발자 맘대로 기능을 조작할 수 있다. 관리자페이지 또는 재고관리 등에 매우 유용하다고 할 수 있다.

이 jqgrid를 붙이려면 먼저 js파일들이 있어야 한다.

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관련 홈페이지에서 충분히 찾을 수 있다. 간혹 jquery.js 가 충돌이 일어날 수 있으니 잘 확인하고 맞는것을 골라 넣어아 햔다.

그리고 jqgrid가 들어갈 html 부분을 작성하자

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

그냥 단순히 테이블 하나와 div 하나만 넣자.

그리고 제일 중요한 script부분이다. document.ready안에 넣어주자.

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
$(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:"JQGRID TABLE"
        });
    });
Colored by Color Scripter
cs

맨 위에 cnames는 배열이다. 즉, 헤더에 차례대로 입력되는 값을 설정하기 위함이다.

datatype : local 은 이벤트가 발생되지 않으면 실행하지 않는다. 즉 저 위에 url을 바로 태우지 않겠다는 의미이다.

colName : 헤더에 배열형식으로 나오는 값을 설정해주는 것이다. 첫 줄에 cnames라고 배열을 만들었는데 이 배열을 적용하겠다라는 의미이다.

colModel : 이 안에 있는 것은 배열형태로 받을 것이다. 안에 {name:'name',index:'name', width:100, align:"center"} 이런 요소가 들어가 있는데 name은 jsp에서 쓸 변수명을 의미하고 index는 db칼럼(여기서는 mybatis이용할것임)명과 같아야 한다. 꼭 같아야 한다. 안나온다. width는 화면의 길이이다. 요소 처음에 key=true가 있는데 이것은 db테이블안에 pk를 의미하는데 큰 의미는 없다. align은 정렬설정(가운데,왼쪽,오른쪽정렬)이다.

height : 높이이다.

rowNum : row를 몇 줄까지 보이게 할 지 설정한다. 여기서는 10줄로 설정하였다.

rowList : row를 몇 줄 까지 보이게 할지 설정인데 이것은 셀렉박스로 밑으로 내려오는 형태로 나올 것이다. 선택은 10,20,30 3가지로 하게 하였다.

pager : 얘를 안쓰면 페이징이 되지 않는다. 아까 처음에 html작성할때 div아이디를 써준다.

rownumbers : true이면 줄 번호를 자동으로 그리드에 매겨준다.

실행을 해보자.

jqgrid 프레임이 만들어 졌다. 하단에 셀렉으로 10,20,30까지 내려오는 것을 볼 수 있다.

그러면 이제 동작을 하게 해야 한다. 그리드위에 셀렉몇개를 추가해 보자.

1
2
3
4
5
6
7
8
9
10
<div>
 <select id="selectId">
  <option value="">All</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:search();">Search</a></span>
</div>
Colored by Color Scripter
cs

이 후 onclick의 자바스크립트 함수를 정의한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function search() {
    var jsonObj = {};
    
    if($("#selectId").val() != "C") {
        jsonObj.serviceImplYn = $("#selectId").val();
    }
    
    alert(JSON.stringify(jsonObj));
    
    $("#jqGrid").setGridParam({
        datatype : "json",
        postData : {"param" : JSON.stringify(jsonObj)},
        loadComplete : function(data) {
            
        },
        
        gridComplete : function() {
            
        }
    }).trigger("reloadGrid");
}
Colored by Color Scripter
cs

JSON.stringify()는 자바스크립트 값을 JSON문자열로 변환한다. (밑에 stringify에 대한 부연설명을 하겠다)

jqGrid에 setGridParam 이라는 설정을 한다.

datatype : "json"을 설정했는데 이벤트가 일어나면 json형식으로 데이터를 전송하겠다라는 의미이다. 처음에 설정한 url로 갈 것이다.

postData : key와 value로 이루어져 있다. jsonObj에 select값이 들어가 있는데 이것을 json문자열로 바꾼것을 value에 넣는다.

정리하면 json데이터를 보낼건데 param이라는 key에다가 보낼 것이다. 밑에 loadComplete과 gridComplete은 이따 설명하겠다.

마지막으로 trigger인데 이것은 jqgrid가 데이터를 가져온 후 리로드를 해줘야 그리드에 적용이 되기 때문에 작업이 완료된 후 reload를 해주는 것이다.

cf) JSON처리 발췌(Mozilla Developer Network 표준)

JSON.stringify(value[, replacer[, space]])

value: JSON 문자열로 변환할 값
replacer Optional: 문자열화 프로세스의 작동을 변경하는 함수, 혹은 JSON 문자열에 포함될 값 객체의 속성들을 선택하기 위한 화이트리스트(whitelist)로 쓰이는 String 과 Number 객체들의 배열. 이 값이 null 이거나 제공되지 않으면, 객체의 모든 속성들이 JSON 문자열 결과에 포함된다.

space Optional: 가독성을 목적으로 JSON 문자열 출력에 공백을 삽입하는데 사용되는 String 또는 Number 객체. 이것이 Number 라면, 공백으로 사용되는 스페이스(space)의 수를 나타낸다; 이 수가 10 보다 크면 10 으로 제한된다. 1 보다 작은 값은 스페이스가 사용되지 않는 것을 나타낸다. 이것이 String 이라면, 그 문자열(만약 길이가 10 보다 길다면, 첫번째 10 개의 문자)이 공백으로 사용된다. 이 매개 변수가 제공되지 않는다면(또는 null 이면), 공백이 사용되지 않는다.

function replacer(key, value) {
  if (typeof value === "string") {
    return undefined;
  }
  return value;
}

var foo = {foundation: "Mozilla", model: "box", week: 45, transport: "car", month: 7};
var jsonString = JSON.stringify(foo, replacer);

이런식으로 replacer를 등록해서 json 데이터처리까지 할 수 있다.

** 추가사항 GSON 추가

pom.xml에 gson 디펜던시를 추가한다.

<groupId>com.google.code.gson</groupId>

<scope>compile</scope>

</dependency>

gson은 json파일을 java object로 변환할 수 있게 해주는 구글이 만든 라이브러리이다. json파일을 쉽게 읽고 만들 수 있는 toJson(), fromJson()메소드를 제공한다.

그럼 컨트롤러단을 작성해야한다. 아까 url이 jqgridStartMain.do였으므로 이에 해당하는 requestMapping을 해준다.

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

PrintWriter는 ajax콜에서 데이터를 출력할때 사용되는것으로 기억하자.

JqgridVO는 가져올 데이터에 대한 VO인데 이따가 작성해보고 지금은 빈 것으로 놓아둔다.

한글처리를 위해서 utf-8로 인코딩을 해준다.

아까 보낸 postData를 기억하는가? 거기에 key값이 param이었다. request.getParameter로 받아준다.

받은 것을 찍어보면

이런식으로 나온다.

그래서 스트링 replace를 해준다.

이런모양으로 바뀌게 된다.

여기까지 했다면 그리드에서 값을 컨트롤러까지 전달했다.

다음 처리를 위해서 JsonUtil이라는 java파일이 하나 필요하다.

JsonUtil.java

이것은 json데이터 처리를 조금 더 수월하게 해줄수 있게 자주쓰이는 메서드들을 정의해 놓은 것이다. 아까 메이븐에 추가한 gson을 이용한다.

메소드목록

JsonToMap : json을 map자바객체로 변환시킨다.

JsonToList : json을 List자바 객체로 변환시킨다.

JsonToLinkedHashMap : json을 LinkedHashMap 자바 객체로 변환시킨다.

ListToJson : List자바객체를 json string으로 변환시킨다.

OneStringToJson : string을 json으로 변환시킨다.

HashMapToJson : HashMap을 json으로 변환시킨다.

MapToJson : Map을 json으로 변환시킨다.

공통폴더에 넣는것이 적합한 위치일 것이다.

그리고 JqgridVO를 만들어보자.

필드중에 serviceImplYn 은 아까 셀렉박스에서 선택한 알파벳이 들어갈 거고 나머지 변수들은 Mybatis SQL문에서 쓰이는 것과 데이터베이스 테이블 컬럼명이다.

자신의 데이터베이스 컬럼에 맞춰서 만들면 될 것이다. (노란색 부분이 이에 해당한다)

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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
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 phone;
    
    private String rows;
    
    private String page;
    
    private String pageNumber;
    private String totalTotCnt;
    
    private String totalPage;
    
    private String param;
    private String param1;
    
    public String getPhone() {
        return phone;
    }
 
    public void setPhone(String phone) {
        this.phone = phone;
    }
 
    public String getParam() {
        return param;
    }
 
    public void setParam(String param) {
        this.param = param;
    }
 
    public String getParam1() {
        return param1;
    }
 
    public void setParam1(String param1) {
        this.param1 = param1;
    }
 
    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

그리고 아까 컨트롤러에서 quotZero밑으로 부터 코드를 작성하자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Map<String, Object> castMap = new HashMap<String, Object>();
        
castMap = JsonUtil.JsonToMap(quotZero); // quotZero json을 맵으로 변환시킨다.

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("toatalTotCnt"));
resMap.put("rows", jqGridList);
resMap.put("page", request.getParameter("page"));
System.out.println("page from request "+request.getParameter("page"));
resMap.put("total", jqGridListCnt.get("totalpage"));
        
out = response.getWriter();
        
out.write(JsonUtil.HashMapToJson(resMap).toString());
cs

castMap은 아까 serviceImplYn을 json string으로 받았으니 맵인 자바객체로 바꿔준다.

jqGridList는 그리드에 붙을 한줄 한줄이다.

jqGridListCnt는 그리드의 총 갯수를 가져온다.

서비스 컨트롤러 작성은 생략한다. 다음 포스팅을 참고하기 바란다.

http://pjh3749.tistory.com/112

mybatis sql문이 필요하다.

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 = 'dddd'
                             </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

중간에 조건이 들어간 것은 그냥 테스트용이므로 단순히 조회만 해도 된다.

데이터 베이스 테이블이다. 그냥 자신에 맞게 만든 후 쿼리문을 수정하면 되겠다.

실행을 시켜보자. 그러면 화면이 데이터와함께 뜨는 것을 볼 수 있다.

데이터가 없는 셀렉 박스를 눌렀을 때 alert 처리를 하고 싶다면 아까 setGridParam의 loadComplete에

1
2
3
4
5
6
7
8
9
loadComplete : function(data) {
            $.each(data, function(i, item) {
                if(i == "rows") {
                    if(item < 1) {
                        alert("데이터가 없습니다");
                    }
                } 
             });
        },
Colored by Color Scripter
cs

each문을 돌려서 i에 rows가 들어간다면 그리고 그 안의 item이 하나도 없다면 alert을 찍어주면 된다.

다음 포스팅은 jqgrid데이터 조작에 대해서 알아보겠다.

도움이 되셨다면 공감눌러주시고 질문있으시면 남겨주세요

저작자표시

'프로그래밍 > 전자정부프레임워크(eGov)' 카테고리의 다른 글

JQGrid 전자정부프레임워크에 적용하기 - (3) (1)	2017.03.26
JQGrid 전자정부프레임워크에 적용하기 - (2) (0)	2017.03.20
스프링 쿠키의 활용법 (0)	2017.03.13
스프링 게시판 페이징 구현하기 - (1) (0)	2017.03.12
부트스트랩 테이블과 동적 JSTL 조지기 - (2) (0)	2017.03.05

현재글JQGrid 전자정부프레임워크에 적용하기 - (1)

개발, 알고리즘 등 기술 관련 블로그입니다. 추가로 저의 일상, 미국 생활이야기, 여행 관련 글도 씁니다. email: pjh374968@gmail.com

개발, 스프링부트, 우아한테크코스, 자바스크립트, 미국생활, 자바, Spring, 스프링, DB, 인턴, java, 해외인턴, TDD, 알고리즘, springboot, 데이터베이스, 미국인턴, 미국, 우아한형제들, 아마존,

Today :
Yesterday :

Jay의 기술 블로그