회사에서 프로젝트를 하는데,
jqGrid 내용을 excel로 다운로드 받게 해달라는 요건이 있었다.
금융쪽 SI 프로젝트라서 아무래도 개발환경이 구버전이었따!!
jdk 1.5환경에다가, 이번에 고도화하는 시스템을 15년이상 사용해왔다고 하니 말 다 했지...
jqGrid도 3.xx버전을 사용해서 그런지 table2Excel 도 잘안되는 거 같아서 하다가 포기하고 ㅠㅠ
복잡한 Jakarta POI ?? 이런 것은 사용하지 않았다...
오로지 JSP로만ㅎㅎ;
무튼 본론으로 들어가서!!
1. jqGrid 하단에 엑셀저장 버튼 추가
아래 예제에서는 jqGrid 내에 있는 모든 컬럼들 ( 보이지 않는 컬럼들 포함 ) 을 그대로 엑셀 출력됩니다. (물론 커스터마이징 가능)
$("#jqgridname").jqGrid('navButtonAdd', div_id, {
id : 'pager_excel'
, caption : ''
, title : '엑셀 저장'
, onClickButton : function(e) {
exportExcel($("#jqgridname"), "test.xls");
}
, buttonicon : 'ui-icon-disk'
});
이렇게 해도 버튼이 보이지 않는다면,
아래와 같이 jqGrid navigator 속성을 설정해주세요^^
$("#jqgridname").jqGrid("navGrid", "#pager-jqgridname", {
add : false //추가버튼
, edit : false //수정버튼
, del : false //삭제버튼
, search : false //검색버튼
, refresh : false //갱신버튼
});
이렇게 설정하면 jqGrid의 왼쪽 아래에 디스크모양으로
엑셀버튼이 추가가 될겁니다.
2. export_excel.jsp
<script type="text/javascript">
//excel로 출력
function exportExcel ( pGridObj, pFileName ) {
var mya = pGridObj.getDataIDs();
var data = pGridObj.getRowData(mya[0]);
var colNames=new Array();
var ii=0;
for (var d in data){ colNames[ii++] = d; }
//컬럼 헤더 가져오기
var columnHeader = pGridObj.jqGrid('getGridParam','colNames') + '';
var arrHeader = columnHeader.split(',');
var html="<table border=1><tr>";
for ( var y = 1; y < arrHeader.length; y++ ) {
html = html + "<td><b>" + encodeURIComponent(arrHeader[y]) + "</b></td>";
}
html = html + "</tr>";
//값 불러오기
for(var i=0;i< mya.length;i++) {
/**
* 서브 그리드 사용하시는 분들은 이쪽 커스터마이징 해주시면 되겠죠!??
*/
var datac= pGridObj.getRowData(mya[i]);
html = html +"<tr>";
for(var j=0; j< colNames.length;j++) html=html + '<td>' + encodeURIComponent(datac[colNames[j]])+"</td>";
html = html+"</tr>";
}
html=html+"</table>"; // end of line at the end
document.EXCEL_.csvBuffer.value = html;
document.EXCEL_.fileName.value = encodeURIComponent(pFileName);
document.EXCEL_.target='_new';
document.EXCEL_.submit();
}
</script>
<body>
<form id="EXCEL_" name="EXCEL_" action="down_excel.jsp" method="post">
<input type="hidden" name="csvBuffer" id="csvBuffer" value="">
<input type="hidden" name="fileName" id="fileName" value="">
</form>
</body>
코드를 대충 보면 이해되겠지만,
jqGrid 옵션을 통해 colNames와 값들을 불러와
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<table>
요런 식으로 만들어 줍니다.
이 값들을 form에 셋팅하여 post방식으로 전송!
근데 404 not found 가 뜰 수 있어요^^
경로가 잘못되어서 그런거니 당황하지마시고, form태그의 action을 수정해주세요.
3. down_excel.jsp
<%@ page import="java.net.URLDecoder, java.net.URLEncoder" %>
<%
try {
String docName = "";
String data = request.getParameter("csvBuffer");
String fileName = request.getParameter("fileName");
//헤더 선택
String header = request.getHeader("User-Agent");
if (header.contains("MSIE")) { header = "MSIE"; }
else if(header.contains("Chrome")) { header = "Chrome"; }
else if(header.contains("Opera")) { header = "Opera"; }
if (data != null && fileName != null ) {
data = URLDecoder.decode(data, "UTF-8");
fileName = URLDecoder.decode(fileName, "UTF-8");
response.setContentType("application/vnd.ms-excel");
if (header.contains("MSIE")) {
docName = URLEncoder.encode(fileName,"UTF-8").replaceAll("\\+", "%20");
response.setHeader("Content-Disposition", "attachment;filename=" + docName + ".xls;");
} else if (header.contains("Firefox")) {
docName = new String(fileName.getBytes("UTF-8"), "ISO-8859-1");
response.setHeader("Content-Disposition", "attachment; filename=\"" + docName + ".xls\"");
} else if (header.contains("Opera")) {
docName = new String(fileName.getBytes("UTF-8"), "ISO-8859-1");
response.setHeader("Content-Disposition", "attachment; filename=\"" + docName + ".xls\"");
} else if (header.contains("Chrome")) {
docName = new String(fileName.getBytes("UTF-8"), "ISO-8859-1");
response.setHeader("Content-Disposition", "attachment; filename=\"" + docName + ".xls\"");
}
response.setHeader("Pragma", "no-cache;");
response.setHeader("Expires", "-1;");
out.println(data);
}//end of if
} catch ( Exception e ) {
e.printStackTrace();
out.println(e.toString());
}
%>
브라우져 마다 옵션이 다르기 때문에, response의 헤더만 변경해주고
엑셀파일 출력을 처리해주시면 됩니다.
\다음 ""주의하세요 ㅋㅋㅋ
+ Opera나 Firefox 사용안할 거 같으면 요령껏 빼주시면 되요!!
전 서브 그리드를 사용해서 커스터마이징을 해줘야합니다...ㅠㅠㅎㅎ
childGridIdList를 넘겨받아서, parentGrid랑 똑같은 방식으로 구현하면 되겠죠!?
[출처] https://letter20.tistory.com/34
'Programming > Javascript' 카테고리의 다른 글
| [JavaScript] 템플릿 리터럴(백틱) - 반복문 + IF문 + 변수매핑 방법 (0) | 2024.08.23 |
|---|---|
| [jqGrid] cell style 변경하기(setCell) (0) | 2020.02.09 |
| [jqGrid] userdata 사용하기 (+ jsonReader) (0) | 2020.02.06 |