IT세무민의 코딩일기: JQuery Grid가 안입혀질때 처음으로 돌아가보자 ㅠㅠ
인턴을 하면서 기존에 웹페이지 방식을 응용프로그램 형식으로 단순화 작업을 해야 한다고.... 그래서 결국에 모든 코드를 수정해아하는 대참사... 그래도 이왕 하는거 재대로 해보자는 생각에 B
sg-moomin.tistory.com
전에 작성했었던 Grid에 대해서 좀 더 다뤄보도록 하자.
인턴을 하면서 사실 Table -> Grid -> Ajax Table을 만들면서
Grid가 확실하게 편리하고 기본적으로 Open Api로 구성된 Grid를 이용하는건
정말로 편리하다.
참고 사이트 : www.guriddo.net/demo/bootstrap/
Guriddo jqGrid - jQuery based grid HTML5 component for Javascript
Edit form with custom template New Cache dataUrl New Dialogs: edit Controls (datepicker, autocomplete, dropdown, checkbox, custom, etc) Dialogs: Edit, Add, Delete Dialogs: Custom Layout Dialogs: Linked / Dependent dropdowns Dialogs: Validation - client-sid
www.guriddo.net
위의 사이트에서 제공해주는 파일들을 이용해서 제작했는데
도중에 JS파일을 수정하면서 사용하기도 했다.
그렇지만 Open API를 사용하기 위해서는 코드 분석이 필수라는 것을 느꼈다.
JSP
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html lang="en">
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author"
content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Jekyll v4.1.1">
<%@ include file="/views/bootstrap/gridFooter.jsp"%>
<%@ include file="/views/common.jsp"%>
</head>
<body>
<div style="margin-left: 20px">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
<div></div>
<script>
var test = new Array();
var size = new String();
size = parseInt(${testcount});
test = ${test};
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url : "Wealth/wealthList.do",
data : test,
mtype: "GET",
datatype: "local",
colNames:[
'일련번호','구매관리부서','재물위치','물품관리구분','물품취득재원','물품명',
'구입일','취득금액','내용연수','제조사','물품모델명','물품시리얼번호','크기(가로)',
'크기(세로)','크기(높이)','물품등록자_부서','물품등록자','현관리자_직급','현관리자_성명',
'재물상태','등록일','이미지 확인'],
colModel:[
{label:'일련번호',name:'WealthDno', align:'left'},
{label:'구매관리부서',name:'PurchaseMangeDepartMent', align:'left'},
{label:'재물위치',name:'WealthLocation', align:'left'},
{label:'물품관리구분',name:'ItemManageType', align:'left'},
{label:'물품취득재원',name:'ItemAcquisition', align:'left'},
{label:'물품명',name:'ItemName', align:'left'},
{label:'구입일',name:'PurcahseDate', align:'left'},
{label:'취득금액',name:'AcquisitionAmount', align:'left'},
{label:'내용연수',name:'ContentYear', align:'left'},
{label:'제조사',name:'ManuFacture', align:'left'},
{label:'물품모델명',name:'ItemModel', align:'left'},
{label:'물품시리얼번호',name:'ItemSerialNumber', align:'left'},
{label:'크기(가로)',name:'HorizontalSize', align:'left'},
{label:'크기(세로)',name:'VerticalSize', align:'left'},
{label:'크기(높이)',name:'HeightSize', align:'left'},
{label:'물품등록자_부서',name:'ItemRegisterDepartment', align:'left'},
{label:'물품등록자',name:'ItemRegisterName', align:'left'},
{label:'현관리자_직급',name:'CurrentManagerRank', align:'left'},
{label:'현관리자_성명',name:'CurrentManagerName', align:'left'},
{label:'재물상태',name:'WealthState', align:'left'},
{label:'등록일',name:'ItemRegisterDate', align:'left'},
{label:'이미지 확인', index: 'Img', width: 100, align: 'center', formatter: imageFormatter}
],
height: "90%",
rowNum: 20,
rownumbers: true,
// viewrecords: true,
pager: "#jqGridPager"
});
$('#jqGrid').navGrid('#jqGridPager',
{
edit: false,
add: false,
del: false,
search: true,
refresh: true,
view: true,
position: "left",
cloneToTop: true
});
});
for(var I in test){
$("#jqGrid").jqGrid('addRowData',i+1,test[i]);
}
function imageFormatter(cellvalue, options, rowObject)
{
console.log(rowObject);
if(rowObject.imgUrl == null){
return;
}
checkResult = "<img src='${pageContext.request.contextPath}/img/" + rowObject.imgUrl + "/>";
return checkResult;
}
</script>
<%@ include file="/views/footer.jsp"%>
</body>
</html>위의 JSP파일은 직접 제작한 파일이다.
JSP파일에서 Grid를 사용하기 전에는 기본적으로 Table 형식으로 데이터를 받아왔고
모든 데이터를 출력해주는 페이지였다.
즉! All LIst를 출력해주는 페이지라고 생각하면 편리하다.
<!-- 검색 코드 -->
<form action="selectDepartWealthList.do">
<select name="selects">
<option value="wealthDno">등록번호</option>
<option value="itemName">물품명</option>
<option value="itemSerialNumber">시리얼번호</option>
<option value="itemRegisterName">등록자</option>
</select> <input type="text" size="20" name="selectDList" />
<input type="submit" value="검색" />
</form>
<!--페이징 코드 -->
<div align="center">
<ul class="pagination justify-content-center">
<li class="page-item" value="${startEnd.start}"><a
class="page-link" href="pageFrist.do?pageid=${startEnd.start}"><</a></li>
<c:forEach var="page" items="${pagelist}" varStatus="sts"
begin="${startEnd.start}" end="${startEnd.end}">
<li class="page-item"><a class="page-link"
href="pagelist.do?pageid=${page.paginNo}">${page.count}</a></li>
</c:forEach>
<li class="page-item" value="${startEnd.end}"><a
class="page-link" href="pagelast.do?pageid=${startEnd.end}">></a></li>
</ul>
</div>
All List 페이지에서 위에 코드처럼 기본적으로 들어가있는 Paging과 Search도 기본적으로 구현했었다.
그렇지만 Table보다 Grid가 편리하다고 앞에서 말했던 이유는
위의 API에서는 코딩하지 않고도 기본적으로 제공해준다 ㄷㄷ
그래서 Search 부분과 Paging 부분을 지우고
Grid에다가 해당 값들을 표현할 수 있도록 구현한 코드이다.
$("#jqGrid").jqGrid 부분을 보면
URL은 Controller에서 데이터를 호출해오는 경로를 표현하고
Data는 내가 Grid에 표현하기 위한 값들을 정해주는데
나는 Controller에서 Object -> Json 형태로 받아왔고
그래서 위에 test = ${test}; 처럼 Jsp 값을 JavaScript 변수에 넣어서 사용했다.
data : ${test}로 사용했을 때 개발자 페이지에서 null값으로 표현됬는데 이유를 추후에 분석해보도록 하자
무튼 Grid를 이용하여 JSP에서는 데이터를 출력해준다.
ColNames은 행에서 가장 첫번째 값!
Table로 구성했을 때 Thead와 같은 값이라고 생각하면 된다!
ColModel은 테이블 내부에 들어가는 값을 표현한다.
Json으로 객체 데이터를 받으면
{
index : 1,
Name : 세무민,
Who : 초보개발자,
Age : 26,
~~~~~
}대략 이런 느낌으로 데이터가 JSP로 전송된다.
Json은 Key : Value로 구성되어 있다는 점을 알고 있다면 ColModel에 값을 채우는건 쉽다.
ColModel에 결국에는 Json으로 넘어오는 Value값을 Name값에서 받으면 되기 때문에 그부분을 작성해줬다.
그리고 rowNum은 Grid에서 표현할 행의 개수!
Rownumber가 앞에서 언급했던 페이징 기능을 가지고 있다.
그리고 Search를 해주던 코드를 대신하는 부분은 $('#jqGrid').navGrid 부분이다.
아래에서 필요한 값을 true로 변경해주면 끝인데
Open Api에서 제공하는 값과 자신이 생각하는 값이 다르다면
JS 및 CSS 파일을 변경해주는것도 괜찮다.
그렇게 Grid를 만들어준 후 Jsp에서 출력해주면 끝!
imageFormatter 함수는 이미지를 출력하기 위해서 작성해줬다.
Controller
@RequestMapping("wealthList.do")
public String WelathList(HttpSession session, HttpServletRequest request, Model model, HttpServletResponse response) throws IOException {
ArrayList<WealthDevelop> check = new ArrayList<WealthDevelop>();
ArrayList<WealthDevelop> wDevelop = new ArrayList<WealthDevelop>();
ArrayList<WealthDevelop> Wlist = new ArrayList<WealthDevelop>();
Wlist = Wservice.allSelect();
int WlistSize = Wlist.size();
Gson gson = new Gson();
model.addAttribute("wealthclass", wDevelop);
model.addAttribute("test", gson.toJson(Wlist));
model.addAttribute("testcount", WlistSize);
return "wealthList/allList/wealthList";
컨트롤러에 코드를 보기 위해서는 우선 MVC 구조를 알고 있어야 한다.
MVC구조는 쉽게 모델과 뷰 그리고 컨트롤러로 구성된 것을 말하는데
JSP에서 기존에 Java를 거치지 않구 <%=%>를 이용하여 java코드를 작성해줬던 걸
분리 시켜서 구현하는 거라고 생각하면 편리하다
즉! Jsp -> Controller -> Service -> Store 구조!
여기서 Jsp -> Controller로 넘어갈 때 Dispatcher-servlet과 Web.xml을 수정해줘야 하는데
이 부분은 추후에 포스팅 할 예정이다.
무튼 Controller에서는 Store에게 필요한 데이터를 요청하고 받아서 Jsp로 보내주는 역할을 하기 때문에
위에서 보이는 코드처럼 ArrayList<객체> 변수를 생성해서 Store에서 넘겨준 값을 받은 후
Json으로 변환해서 Model에 담아주면 끝!
담아준 후 Model을 Jsp로 넘겨주면 된다.
위의 코드에서는 그런 역할과 작업들을 진행한다.
위의 사진처럼 Grid를 완성할 수 있다.
우선적으로 보안상 위험한 데이터들이 존재해서 그런 부분은 지워서 등록한 상태이다.
무튼 위처럼 Grid를 제작하는 방법이 아니더라도 다양한 방법으로 Grid를 제작할 수 있는데
확실한 건 Table -> Grid가 엄청 좋다는 점!
오늘의 포스팅은 여기까지입니다.
다음에는 더 알찬 포스팅으로 찾아오겠습니다.
'Programing > Java & Spring' 카테고리의 다른 글
| IT세무민의 코딩일기 : 바코드 제작하기 [바코드를 제작하지 않고 QR코드를 제작한 이유] (0) | 2021.01.05 |
|---|---|
| IT세무민의 코딩일기 : QR코드 제작하기 (2) | 2021.01.04 |
| 웹 페이지 프로젝트 일기 : Ajax 부시다가 내가 털렸당...ㅎㅎ (Ajax - Json - Table) (0) | 2020.12.14 |
| 코딩 일기 : grid나 js파일이 정상 작동을 하지 않는다...(이론) (0) | 2020.12.03 |
| 자투리 시간에 만드는 개인 포토폴리오 프로젝트! vo1 : 무료 Boot 다운받아서 파일 로드와 파일 설정하기! (0) | 2020.11.20 |