AuiSoft Grid 설치방법 (테이블, 게시판)
들어가기 앞서, 저는 스프링 프레임워크 기반으로 소스를 작성하였습니다.
다운로드 사이트 : http://www.auisoft.net/
데이터시각화, 에이유아이소프트(AUISoft)
HTML5, 자바스크립트 웹 컴포넌트 - AUIGrid, AUIGantt, AUIPivot
www.auisoft.net
위 경로로 가서 다운로드 받아줍니다(다운로드센터 클릭) 현재 에이유아이 트라이얼 버전으로 다운 받습니다.
AUI 다운로드
저기서 접속 도메인에 Grid 를 서비스할 소스의 주소를 입력해줍니다. localhost 라고 입력했을 경우 (또는 자신 컴퓨터의 ip를 입력했을 경우) 해당 컴퓨터에서만 사용이 가능하므로 주의합시다!
압축풀기
소스복사하기
위 파일만 webapp > resources 폴더에 담아줍니다.
기본적인 설명을 하면,
- AUIGrid : 필요한 이미지, css 파일이 있습니다.
- export_server_samples : PDF & Excel Download 를 위해 필요한 소스파일이 들어있습니다. (jsp)
- pdfkit : PDF 다운로드를 위해 필요한 JS 파일
- samples : 샘플로 사용할 DATA가 들어있습니다. 또한 필요한 JS 파일이 들어있습니다.
샘플 데이터와 관련 JS 파일 말고 전부 지우기
ajax.js 는 데이터를 ajax로 요청하기 위해 필요한 라이브러리이고 common은 그냥 Grid 사용을 위해 필요한 보통의 라이브러리 정도로 생각하시면 될 것 같습니다.
저는 이 sample 폴더의 이름을 AUIGridJS 로 변경하였습니다!**************************
샘플자원 매핑 & 소스 매핑
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd
http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd">
<!-- 위 xmlns:mvc 부분은 설정파일 하단의 namespace 부분의 mvc 체크박스를 체크함으로써 쉽게 추가가 가능합니다. -->
<mvc:resources mapping="/resources/**" location="/resources/" />
</beans>
servlet-context.xml에 적던 dispatcher-servlet.xml에 적던 자신이 사용하는 프레임워크에 맞춰 적당한데에 넣어줍니다. (web.xml에 명시된 servlet.xml 파일에 넣으면 됩니다. => 스프링과 전자정부프레임워크의 설정파일 이름이 달라서 그렇지 결국 같은 servlet.xml 파일이니까 잘 참고하셔서 잘 넣어주세요)
위와 같은 명시를 하면 데이터를 하나의 폴더에 체계적으로 관리 할 수 있게 됩니다.
엑셀 & PDF Download 기능 구현을 위해 jsp 파일을 적당한 위치로 옮기기
저는 views에 export라는 폴더를 만들어 넣었습니다. 만약에 자신이 php 언어 기반의 서버를 사용중이면 export.php 를 사용하시면 됩니다.
이제부터 소스입니다.
HomeController
package com.myapp.myapp;
import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
/**
* Handles requests for the application home page.
*/
@Controller
public class HomeController {
private static final Logger logger = LoggerFactory.getLogger(HomeController.class);
/**
* Simply selects the home view to render by returning its name.
*/
@RequestMapping(value = "/", method = RequestMethod.GET)
public String home(Locale locale, Model model) {
logger.info("Welcome home! The client locale is {}.", locale);
Date date = new Date();
DateFormat dateFormat = DateFormat.getDateTimeInstance(DateFormat.LONG, DateFormat.LONG, locale);
String formattedDate = dateFormat.format(date);
model.addAttribute("serverTime", formattedDate );
return "home";
}
@RequestMapping(value = "/auiPDF", method = RequestMethod.POST)
public String PDF(Locale locale, Model model) {
return "export/export"; //export.jsp의 위치
}
@RequestMapping(value = "/auiEXCEL", method = RequestMethod.POST)
public String EXCEL(Locale locale, Model model) {
return "export/export"; //export.jsp의 위치
}
}
컨트롤러만 긁어다가 쓰셔도 되고 편하게 커스텀해서 사용하시면 됩니다.
home.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page session="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>Home</title>
<!-- AUI Grid 사용을 위해 필요한 소스를 불러옵니다.-->
<script type="text/javascript" src="/resources/AUIGrid/AUIGridLicense.js" ></script>
<script type="text/javascript" src="/resources/AUIGrid/AUIGrid.js" ></script>
<script type="text/javascript" src="/resources/AUIGridJS/ajax.js" ></script>
<!-- AUIGrid PDF 다운로드를 위한 라이브러리 -->
<script type="text/javascript" src="/resources/pdfkit/AUIGrid.pdfkit.js"></script>
<!-- 스타일 시트 로드 -->
<link href="/resources/AUIGrid/AUIGrid_style.css" rel="stylesheet"/>
<script type="text/javascript">
var columnLayout =
[ {
dataField : "id", //데이터를 매핑해줄 때 사용할 이름. 예를 들어 {"id" : "test"} 라는 데이터를 받으면 test라는 데이터는 이 컬럼 안에 위치하게 됩니다.
headerText : "아이디", //사용자에게 보여줄 이름
width : 140, //컬럼의 너비
renderer : { // HTML 템플릿 렌더러 사용
type : "TemplateRenderer"
}, //a 태그같이 문자그대로가 아닌 html 코드로 인식 시켜야 할 때 필요한 설정
labelFunction : function (rowIndex, columnIndex, value, headerText, item ) { // HTML 템플릿 작성
//순서대로 줄, 컬럼, (받은)값, 헤더문구.. 순서입니다.
if(!value) return "";
var template = '<div class="my_div">';
template += '<a href="/board/boardView.do?seq=' + value + '">' + value + '</a>';
template += '</div>';
return template; // HTML 템플릿 반환..그대도 innerHTML 속성값으로 처리됨
},
dataType : "String"
}, {
dataField : "date",
headerText : "날짜",
width : 120
}, {
dataField : "name",
headerText : "이름",
width: 120
}, {
dataField : "country",
headerText : "나라"
}, {
dataField : "product",
headerText : "제품",
dataType : "String"
}];
//설정을 통해 컬럼의 포멧을 변환하는 등, 자세한 설정이 가능합니다. 해당 설정은 홈페이지를 참고합니다.
//페이지가 로드 될 때 ajax 요청을 통해 데이터를 로드
window.onload = function() {
// 실제로 #grid_wrap 에 그리드 생성
myGridID = AUIGrid.create("#grid_wrap", columnLayout);
ajaxRequest();
};
function ajaxRequest() {
// ajax 요청 전 그리드에 로더 표시
AUIGrid.showAjaxLoader(myGridID);
// ajax (XMLHttpRequest) 로 그리드 데이터 요청
ajax( {
url : "/resources/AUIGridJS/normal_100.json", //샘플데이터 요청
onSuccess : function(data) {
if(!data) {
return;
}
//debug
console.log(data);
// 그리드 데이터
var gridData = data;
// 로더 제거
AUIGrid.removeAjaxLoader(myGridID);
// 그리드에 데이터 세팅
AUIGrid.setGridData(myGridID, gridData);
},
onError : function(status, e) {
alert("데이터 요청에 실패하였습니다.\r status : " + status);
}
});
}
</script>
</head>
<body>
<div id="" class="wrap">
<div class="form-wrap">
<div id="grid_wrap" style="width:800px;height:480px;"></div>
<br />
<div>
<input type="button" id="excelDownload" value="EXCEL Download" onclick="exportToLocal()"/>
<input type="button" id="pdflDownload" value="PDF Download" onclick="exportPdfClick()"/>
</div>
</div>
</div>
<script type="text/javascript">
// PDF 내보내
function exportPdfClick() {
// 완전한 HTML5 를 지원하는 브라우저에서만 PDF 저장 가능( IE=10부터 가능 )
if(!AUIGrid.isAvailabePdf(myGridID)) {
alert("PDF 저장은 HTML5를 지원하는 최신 브라우저에서 가능합니다.");
return;
}
// 그리드가 작성한 엑셀, CSV 등의 데이터를 다운로드 처리할 서버 URL을 지시합니다.
// 서버 사이드 스크립트가 JSP 이라면 ./export/export.jsp 로 변환해 주십시오.
// 스프링 또는 MVC 프레임워크로 프로젝트가 구축된 경우 해당 폴더의 export.jsp 파일을 참고하여 작성하십시오.
AUIGrid.setProperty(myGridID, "exportURL", "/auiPDF");
// 내보내기 실행
AUIGrid.exportToPdf(myGridID, {
// 폰트 경로 지정 (필수)
fontPath : "/resources/pdfkit/jejugothic-regular.ttf"
});
};
// APACHE의 POI 라이브러리를 이용해서 다운로드 할 경우 추가합니다. 제 블로그를 참고하시면 방법이 나옵니다.
function exportToExcelFromServer() {
var form = document.createElement("form");
form.setAttribute("charset", "UTF-8");
form.setAttribute("method", "Post"); //Post 방식
form.setAttribute("action", "요청을 보낼 주소"); //요청 보낼 주소
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "page");
hiddenField.setAttribute("value", "다운로드할 때 데이터 선정을 위해 필요한 데이터를 같이 보낼 수 있습니다.");
form.appendChild(hiddenField);
/*
search KeyWord 등의 검색 조건을 필요로 하는 경우 추가한다.
hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "mEmail");
hiddenField.setAttribute("value", mEmail);
form.appendChild(hiddenField);
*/
document.body.appendChild(form);
form.submit();
}
/* 구현하기 */
function exportToLocal() {
// 로컬 다운로드 가능 여부
if(AUIGrid.isAvailableLocalDownload(myGridID)) {
// 로컬에서 바로 내보내기 실행
AUIGrid.exportToXlsx(myGridID);
} else {
// HTML5를 완전히 지원하지 않는 브라우저는 서버로 전송하여, 다운로드 처리
//exportToServer();
exportToServer();
}
};
function exportToServer() {
// 그리드가 작성한 엑셀, CSV 등의 데이터를 다운로드 처리할 서버 URL을 지시합니다.
// 정품 및 평가판 압축 해제 후, export_server_samples 폴더 안에 PHP, JSP, ASP, ASP.NET 용 소스가 존재함
AUIGrid.setProp(myGridID, "exportURL", "/auiEXCEL");
// 내보내기 실행
AUIGrid.exportToXlsx(myGridID, {
// 지정된 exportURL (./server_script/export.php) 로 내보내기 합니다.
// postToServer 를 true 설정하지 않은 경우, 기본적으로 로컬 다운로딩 처리됩니다.
"postToServer" : true
});
};
</script>
</body>
</html>
pom.xml
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.9</version>
</dependency>보니까 Excel & PDF 다운로드 기능을 사용할 때 export.jsp 파일에서
org.apache.commons.codec.binary.Base64 라이브러리를 필요로 하더라구요. 그래서 pom.xml 에 해당 라이브러리를 추가 해줬습니다. 직접 다운로드 하셔서 추가해주셔도 됩니다.
구현 된 모습
위와 같이 설정을 마쳤는데도 Excel & PDF 다운로드 기능이 안된다면 자원들이 제대로 import 되는지 확인해보세요.
개발자 도구를 열면 Excel Download & PDF Download 버튼을 누를 때 필요한 자원이 import 되는지 안되는지 확인이 가능합니다. (빨간 줄로 404 뜨면 import 안되고 있다는 뜻.
이때는
<mvc:resources mapping="/resources/**" location="/resources/" >
을 제대로 입력했는지, "/resources/pdfkit/jejugothic-regular.ttf" 파일은 제대로 있는지 등등을 확인합니다.
설명
소스를 보면 index.html 과 설치 실행 방법이라는 파일이 있는데, 해당 파일에 설명을 참고하면 조금 더 쉽습니다.
소스참고하기
소스 참고할 할 사이트 : http://www.auisoft.net/demo/auigrid/default_demo.html?ex1_1&theme=default&s=0
HTML5 자바스크립트 그리드 AUIGrid
HTML5 자바스크립트 그리드(javascript grid) - AUIGrid
www.auisoft.net
위 사이트에 들어가면 사용을 위한 소스 샘플이 구현 되어 있습니다.
사이트에 들어가서 Crtl + Shift + C 를 누르면 개발자 모드로 들어가는데, 해당 그리드를 작성하기 위해 어떤 소스를 사용하였는지 확인이 가능합니다. 마찬가지로 엑셀 다운로드 등등도 다 구현이 되어있습니다.
Base64
https://mvnrepository.com/artifact/commons-codec/commons-codec/1.9
'개발 > JavaScript' 카테고리의 다른 글
| 자바스크립트(Javascript) 배열을 초기화 하는 방법 (0) | 2021.05.10 |
|---|---|
| Array 내부의 값 중, 최소날짜 최대날짜 구하기 (2) | 2020.12.31 |
| Javascript Json key와 value 가져오기 (0) | 2020.10.07 |
| 자바스크립트 json 배열 만들기 (0) | 2020.09.03 |
| 자바스크립트(javaScript) undefined, null, '' 체크하기 && 함수나 변수 존재 여부 확인 (0) | 2020.08.13 |