본문 바로가기

프로그래밍/Spring

[jqGrid] jqGrid + Spring + myBatis




Spring + jqGrid





GridTestMapper.xml

1
2
3
4
5
6
7
8
9
10
<select id="getAllBoard" parametertype="map" resulttype="GridTestResultVO">
       <!--[CDATA[
         SELECT *
        FROM(SELECT @NO := @NO + 1 AS RNUM, A.* FROM(SELECT * FROM buyingboard ORDER BY bno DESC) A,
        ( SELECT @NO := 0 )B ) C,
        (SELECT COUNT(*) AS total FROM buyingboard) D
        WHERE C.RNUM BETWEEN #{start} AND #{limit}
        ORDER BY C.RNUM ASC
         ]]-->
    </select>



GridTestVO / GridTestResultVO

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
public class GridTestVO {
 
    private int bno;
    private String title;
    private String content;
    private String writer;
    private String cnt;
    private String regdate;
    private String enabled;
     
    public int getBno() {
        return bno;
    }
    public void setBno(int bno) {
        this.bno = bno;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getContent() {
        return content;
    }
    public void setContent(String content) {
        this.content = content;
    }
    public String getWriter() {
        return writer;
    }
    public void setWriter(String writer) {
        this.writer = writer;
    }
    public String getCnt() {
        return cnt;
    }
    public void setCnt(String cnt) {
        this.cnt = cnt;
    }  
    public String getRegdate() {
        return regdate;
    }
    public void setRegdate(String regdate) {
        this.regdate = regdate;
    }
    public String getEnabled() {
        return enabled;
    }
    public void setEnabled(String enabled) {
        this.enabled = enabled;
    }
}
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
public class GridTestResultVO extends GridTestVO {
 
    private int rnum;
    private int total;
    private int page;
    private int records;
    private List<jsontestvo> rows;
     
    public int getRnum() {
        return rnum;
    }
    public void setRnum(int rnum) {
        this.rnum = rnum;
    }
    public int getTotal() {
        return total;
    }
    public void setTotal(int total) {
        this.total = total;
    }
    public int getPage() {
        return page;
    }
    public void setPage(int page) {
        this.page = page;
    }
    public int getRecords() {
        return records;
    }
    public void setRecords(int records) {
        this.records = records;
    }
    public List<jsontestvo> getRows() {
        return rows;
    }
    public void setRows(List<jsontestvo> rows) {
        this.rows = rows;
    }
}
</jsontestvo></jsontestvo></jsontestvo>



GridTestDAO / GridTestDAOImpl

1
2
3
4
5
public interface GridTestDAO {
 
    public List<gridtestresultvo> getAllBoard(HashMap<string, object=""> hashMap);
}
</string,></gridtestresultvo>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@Repository
public class GridTestDAOImpl implements GridTestDAO {
     
    @Inject
    SqlSession sqlSession;
     
    private static String namespace = "com.kiosk.mapper.articleB";
     
    @Override
    public List<gridtestresultvo> getAllBoard(HashMap<string, object=""> hashMap){
        return sqlSession.selectList(namespace+".getAllBoard", hashMap);
    };
}
</string,></gridtestresultvo>



GridTestService / GridTestServiceImpl

1
2
3
4
5
public interface GridTestService {
 
    public List<gridtestresultvo> getAllBoard(HashMap<string, object=""> hashMap);
}
</string,></gridtestresultvo>
1
2
3
4
5
6
7
8
9
10
11
@Service
public class GridTestServiceImpl {
     
    @Inject
    GridTestDAO GridTestDAO;
     
    public List<gridtestresultvo> getAllBoard(HashMap<string, object=""> hashMap) {       
        return GridTestDAO.getAllBoard(hashMap);
    }
}
</string,></gridtestresultvo>



Controller

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
@Controller
public class GridTestController {
 
    private final Log logger = LogFactory.getLog(getClass());
 
    @Autowired
    GridTestServiceImpl jsonService;
 
    @RequestMapping(value = "/boardList", method = RequestMethod.POST)
    public @ResponseBody Object getUserList(HttpServletRequest request,
            HttpServletResponse response, @RequestParam boolean _search,
            @RequestParam long nd, @RequestParam int rows,
            @RequestParam int page, @RequestParam String sidx,
            @RequestParam String sord) throws JsonGenerationException,
            JsonMappingException, IOException {
 
        logger.debug("search = " + _search + " : nd = " + nd + " : rows = "
                + rows + " : pages = " + page + " : sidx = " + sidx
                + " : sord =" + sord);
 
        HashMap<string, object=""> params = new HashMap<string, object="">();
        int start = ((page - 1) * rows) + 1;
        int limit = (start + rows) - 1;
         
        System.err.println("start = " + start + " : limit =" + limit);
        params.put("start", start);
        params.put("limit", limit);
 
        List<gridtestresultvo> jsonExtList = jsonService.getAllBoard(params);
         
 
        ObjectMapper mapper = new ObjectMapper();
 
        Map<string, object=""> modelMap = new HashMap<string, object="">();
        // total = Total Page
        // record = Total Records
        // rows = list data
        // page = current page
 
        double total = (double) jsonExtList.get(0).getTotal() / rows;
        System.err.println(total);
        modelMap.put("total", (int) Math.ceil(total));
        modelMap.put("records", jsonExtList.get(0).getTotal());
        modelMap.put("rows", jsonExtList);
        modelMap.put("page", page);
        String value = mapper.writeValueAsString(modelMap);
        logger.debug(value);
        System.err.println(value);
        return jsonExtList;
    }
     
 
    @RequestMapping(value = "/boardEdit", method = RequestMethod.POST)
    public String userCreate(JSONtestVO JSONtestVO, @RequestParam String oper) {
 
        logger.debug(oper);
        logger.debug(GridTestVO.getBno() + " : " + GridTestVO.getTitle() + " : "
                + GridTestVO.getContent() + " : " + GridTestVO.getRegDate() + " : " + GridTestVO.getCnt());
 
        int resultValue = 0;
 
        if (oper.equals("edit")) {
            resultValue = jsonService.update(GridTestVO);
        } else if (oper.equals("del")) {
            resultValue = jsonService.deleteUser(GridTestVO);
        } else if (oper.equals("add")) {
            resultValue = jsonService.saveUser(GridTestVO);
        }
 
        return "/boardList";
    }
}
</string,></string,></gridtestresultvo></string,></string,>



JSP부분

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
<link href="${path}/resources/jquery/jquery-ui.css" rel="stylesheet" type="text/css" media="screen">
<link href="${path}/resources/jqgrid/css/ui.jqgrid.css" rel="stylesheet" type="text/css" media="screen">
<script src="${path}/resources/js/jquery-1.8.3.min.js"></script>
<script src="${path}/resources/jqgrid/src/i18n/grid.locale-kr.js"></script>
<script src="${path}/resources/jqgrid/js/jquery.jqGrid.min.js"></script>
<script>
 
    jQuery(document).ready(function() {
         
        jQuery("#gridlist").jqGrid({
            url : '/boardList',
            datatype : 'json',
            mtype : 'POST',
            colNames : ["번호", '제목', '작성자', '내용', '등록일', '조회수', 'total', 'page', 'enabled' ],
            colModel : [                       
                        {name:'bno',    index:'bno', align:"center",    width:100,  editrules:{  required:true,
                          edithidden:true },
                          editable:true,
                          editoptions:{size:"50",maxlength:"50",
                                          dataEvents:[ {
                                                    type: 'blur',
                                                     fn: function(e) {
                                                      var newCodeValue = $(e.target).val();
                                                     }
                                          }]
                           }
                         },
                        {name : 'title',index : 'title', align:"center",width : 100,editrules : {required : true,edithidden : true},
                            editable : true,editoptions : {size : "50",maxlength : "50"}},
                        {name : 'writer',index : 'writer', align:"center",width : 100,editrules : {required : true,edithidden : true},
                            editable : true,editoptions : {size : "50",maxlength : "50"}},
                        {name : 'content',index : 'content', align:"center",width : 200,editrules : {required : true,edithidden : true},
                            editable : true,editoptions : {size : "50",maxlength : "50"}},
                        {name : 'regdate',index : 'regdate', align:"center",width : 150,editrules : {required : true,edithidden : true},
                                editable : true,editoptions : {size : "50",maxlength : "50"}, formatter: "date",
                                   formatoptions: { newformat: " Y-m-d" }},
                        {name : 'cnt',index : 'cnt', align:"center",width : 150,editrules : {required : true,edithidden : true},
                            editable : true,editoptions : {size : "50",maxlength : "50"}},
                        {name : 'total',index : 'total', align:"center", width : 50,editrules : {required : true,edithidden : true},
                            editable : true,editoptions : {size : "50",maxlength : "50"}}, 
                        {name : 'page',index : 'page', align:"center",width : 50,editrules : {required : true,edithidden : true},
                            editable : true,editoptions : {size : "50",maxlength : "50"}},
                        {name : 'enabled',index : 'enabled',width : 50,edittype : "select",formatter : 'select',
                            editoptions : {value : "0:Disable;1:Enable",defaultValue : "Enable"},
                            editrules : {required : true,edithidden : true},
                            editable : true,
                            cellattr : function(rowId, val,rawObject, cm,rdata) {
                                if (val == 'Disable') {
                                    return 'style="background-color:#FF0000"';
                                } else {
                                    return 'style="background-color:#33FFFF"';
                                };
                            }
                        }
                        ],
            pager : jQuery('#gridpager'),
            pagination : true,
//          rowNum : 10,
//          rowList : [ 3, 6, 9 ],
            sortname : 'id',
            viewrecords : true,
            sortorder : "desc",
            caption : "공지리스트",
            autowidth : true,
            height : '100%',
            jsonReader: {
                repeatitems: false,
                id: "bno",
                root: function (obj) { return obj; },
                page: "page",
                total: "total",
                records: "records"
            },
            ondblClickRow : function(id) {
                alert("You double click row with bno: "+ id);
            },
            onSelectRow : function(id) {},
            loadComplete : function(xhr) {},
            gridComplete : function() {},
            loadError : function(xhr, st, err) {alert(err);},
            editurl : "/boardEdit"
        }).navGrid('#gridpager', {
            edit : true,
            add : true,
            del : true,
            search : true
        }
        );
 
        jQuery("#gridlist").jqGrid({
            pager : '#gridpager',
            recordtext : "View {0} - {1} of {2}",
            emptyrecords : "No records to view",
            loadtext : "Loading...",
            pgtext : "Page {0} of {1}"
        });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    $.extend($.jgrid.edit, {
        closeAfterAdd : true,
        recreateForm : true,
        reloadAfterSubmit : false,
        left : 100,
        top : 100,
        dataheight : '100%',
        width : 500,
        addCaption : "추가",
        editCaption : "편집",
        bSubmit : "저장-전송",
        bCancel : "취소",
        bClose : "닫기",
        saveData : "Data has been changed! Save changes?",
        bYes : "Yes",
        bNo : "No",
        bExit : "Cancel"
    });
});
1
2
<table id="gridlist"></table>
<div id="gridpager"></div>