jqGrid

wjheo 2016. 6. 18. 03:27

1. 그리드가 뿌려질 jsp를 호출하는 url에 매핑 되는 컨트롤러

2. jqgrid 소스가 있는 jsp페이지

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<link rel="stylesheet" href="resources/css/ui.jqgrid.css" type="text/css">
    
    <link rel="stylesheet" href="resources/jquery-ui-1.11.4.custom/jquery-ui.css" type="text/css">
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    
    <script src="resources/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>

<script src="resources/js/i18n/grid.locale-kr.js"></script>
    <script src="resources/js/jquery.jqGrid.min.js"></script>
	<script type="text/javascript">
		
	$(function(){
		$('#pagination').html('<p>안녕<p>');
		
		
		$("#list2").jqGrid({
		    url : '/gtest',
		    datatype : "json",
		    colNames : ['Inv No', 'Date', 'Client', 'Amount', 'Tax'],
		    colModel:[
		           {name:'id', index:'id', width:55},
		           {name:'invdate', index:'invdate', width:90},
		           {name:'name', index:'name asc, invdate', width:100},
		           {name:'amount', index:'amount', width:80, align:"right"},
		           {name:'txt', index:'tax', width:80, align:"right"}
		    ],
		    rowNum:10,
		    rowList:[10,20,30],
		    pager:'#pager2',
		    sortname:'id',
		    viewrecords: true,
		    sortorder:"desc",
		    caption:"JSON Example",
		    jsonReader: {
		         repeatitems:false
		    }
		});
		
		$("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
		
		
		
		
	});//function()
	
	
	
	
	
	
	</script>

</head>

jqgrid, jqgrid-ui 관련 폴더 resource폴더 내에 복사해놓음

- Guriddo_jqGrid_JS_5.1.1 : jqgrid

- jquery-ui-1.11.4.custom : jquery-ui-1.11.4.custom

Guriddo_jqGrid_JS_5.1.1.zip

jquery-ui-1.11.4.custom.zip

3. jqgrid에서 url을 통해 서버에 데이터를 요청한다. 이 url에 매핑되는 컨트롤러

// jqgrid에서 url에서 요청을 하면 파라미터로 page, rows, sidx, sord를 함께 넘겨준다( 페이징 처리 관련한 정보이기 때문 )
	@ResponseBody
	@RequestMapping("/gtest")
	public JsonObj test(
			@RequestParam(value = "page", required=false) String page,//page : 몇번째 페이지를 요청했는지
			@RequestParam(value = "rows", required=false) String rows,//rows : 페이지 당 몇개의 행이 보여질건지
			@RequestParam(value = "sidx", required=false) String sidx,//sidx : 소팅하는 기준이 되는 인덱스
			@RequestParam(value = "sord", required=false) String sord) {//sord : 내림차순 또는 오름차순
	    	
		System.out.println("여기에 들어오긴함?");
		// 그리드에 뿌려주려는 데이터를 DB에서나 어디에서 가져온다.
		JsonObj obj = new JsonObj();
		
		
		// 그 데이터를 JsonObj에 setter로 세팅해준다.
		// 이때 jqgrid가 알아먹을 수 있는 형태의 json으로 보내주어야 한다.
		/* 그 형태가 아래 형태이다.
		 *   {
      			"total":10, 
      			"page":10, 
      			"records":10, 
      			"rows": [
          					{"id":1, "cell":["1", "히히히"]},
          					{"id":2, "cell":["2", "호호호"]},
      					]
			}
			그런데 rows에 반드시 행 순서대로 보내야하는데다가 리스트도 또 들어있고 복잡하니깐...
			좀 간편하게 보내려면 jqgrid객체의 옵션에 다음을 추가해야 한다. 
			jsonReader: {
         					repeatitems:false
    		}
    		
    		그러면  jqGrid는 아래와 같은 JSON형식을 받아주고 뿌려준다.
    		
    		{
      			"total":10, 
      			"page":10, 
      			"records":10, 
      			"rows": [
         					{"컬럼명1:value1, 컬럼명2:value2},
          					{"컬럼명1:value1, 컬럼명2:value2},
      			]
			}
			
		 * 
		 * **/
		
		//
		// 하나의 맵에 쫘라락 컬럼에 해당하는 값들 다 넣어주고, 그거를 리스트에 한번 넣고,
		// 또 맵에 쫘라락 넣어주고 리스트에 넣고 
		
		List<Map<String,Object>> list = new ArrayList<Map<String,Object>>();

int int_page = Integer.parseInt(page);// 1 2 3
		int perPageNum = (int)Double.parseDouble(rows);
		
		
		// db에서 가져온 데이터의 갯수가 10개라고 가정하고 임의로 수행한다. 그럼 이 키값들을 멤버로 하는 클래스를 가지고 있어야 할 것같다..
		for(int i= (int_page-1)*perPageNum+1 ; i<(int_page*perPageNum) ; i++){
			Map<String, Object> map = new HashMap<String, Object>();
			
			map.put("id", new String(""+i));
			map.put("invdate", new String("날짜"+i));
			map.put("name", new String("이름"+i));
			map.put("amount", new String("양"+i));
			map.put("txt", new String("텍스트"+i));
			
			list.add(map);
		}
		
		
		
		
		
		// 그리고 이 JsonObj를 리턴해주면 @ResponseBody 애노테이션 그리고 Jackson라이브러리에 의해
		// json타입으로 페이지에 데이터가 뿌려지게 된다.
	       
	    obj.setRows(list);  // list<map>형태의 받아온 데이터를 가공해서 셋( 그리드에 뿌려줄 행 데이터들 )
	    	    
	    //page : 현재 페이지
	    obj.setPage(int_page);// 현재 페이지를 매개변수로 넘어온 page로 지정해준다. 
		
	    //records : 보여지는 데이터 개수
	    obj.setRecords(list.size());//?
		
	    //total : rows에 의한 총 페이지수
		// 총 페이지 갯수는 데이터 갯수 / 한페이지에 보여줄 갯수 이런 식
		int totalPage = (int)Math.ceil(list.size()/Double.parseDouble(rows));
		obj.setTotal( totalPage ); // 총 페이지 수 (마지막 페이지 번호)

return obj;
	}

}

4. 서버(컨트롤러)에서 jsp페이지로 json데이터 뿌려주기위해 필요한 VO 클래스