이번에는 jqGrid 는 jQuery UI 테마랑 연동이 되는거 같다.. 하지만 소개이니 간단히
설명과 샘플링을 해보도록 하겠음..
그리트 형태는 약간 엑셀? 이랑 비슷하다. 언뜻보면 FLEX의 그리드처럼 만들어 놓았다.
무료 그리드중에서는 jqGrid가 유명한거 같기도 하고...
어쨋든! jqGrid 다운로드부터 세팅까지 진행을 해보자~
jqGrid 다운로드
http://www.trirand.com/blog/?page_id=6
해당 URL에서 다음 그림과 같이 본인이 그리드에서 사용하고자 하는 기능? 들을 체크후
다운로드 버튼 클릭!
본인은 그냥 기본적으로 모두 체크 되있는데 다운받았다
jqGrid API 문서겸 데모페이지
http://trirand.com/blog/jqgrid/jqgrid.html
제공 기능들이 엄청나다 샘플링으로 jqGrid에서 데모와 소스를 제공한다.
화면을 보면서 필요한 샘플링을 응용해서 쓰도록 하자
지원하는 기능을 보니까 전에 소개한 tablednd.js 로 그리드 순서를 바꾸는 플러그인도
적용되있는거 같다 +_+
본인은 이번에 심플하게 그리드에 리스트만 뿌리도록 해보겠다!!
아! 여기서 빠져있는것이 그리드 UI에 테마를 적용해줘야 테두리나 이쁜 색들이 나오니까
jQueryUI 사이트에서 테마를 다운받자!
jQueryUI 테마다운로드 페이지
http://jqueryui.com/themeroller/
위 사이트에 들어가면 다음 이미지 처럼 화면이 나온텐데
좌측 Roll your own인가 탭의 Download버튼 클릭
클릭을 하게되면 여러개의 다양한 테마를 다운받을 수 있는데 테마 종류는 Gallery 탭을 보면 달력들이 각각의 테마의 화면으로 표출되고 하단에 테마종류가 나온다
거기서 확인하고 받고싶은 테마를 Roll Your Own탭의 Download theme 버튼 클릭후 다음 페이지에서 설정해서 받도록 한다.
모든 준비는 끝
우선 프로젝트에 플러그인 import를 하도록 하자
1. jQueryUI 세팅
다운받은 테마 압축파일을 해제하면 /css/테마이름 디렉토리 내에 "images" 폴더랑
jquery-ui-xxxx.css 가 2가지가 있을 것이다.
min.css 버전은 저용량 버전이긴 하지만 나중에 우리가 수정하거나 보기 쉽게 하기 위해서
는 min.css 보다는 그냥 .css 파일을 복사하자
즉 해당 jQueryUI 폴더내에서 필요한거는 images 폴더 + min.css가아닌 그냥 .css 파일
2. jqGrid 세팅
지원하는 기능들을 추가로 쓰고 싶으면 plugins 폴더까지 필요하지만 심플하게 리스트만
출력할 예정이므로 본인은 "css" 디렉토리와 "js" 디렉토리만 복사하였다.
프로젝트 include구조는 다음과 같다.
버전이 업데이트 되면서 jquery.jqGrid.src.js 파일이 없어진듯 하다.
만약 jquery.jqGrid.js 파일을 include하게된다면 jquery.jqGrid.js와 같은 경로로 jqgrid의 js디렉토리 내에 있는 모든 경로를 넣어주거나 jquery.jqGrid.js 파일의 path변수를 좀 변경해주어야 할거이다.
jquery는 어짜피 cdn 연동할꺼라 따로 include하지 않았다 필요하신분은 include
DEMO페이지 기준으로 샘플링 하는것이므로 영문은 한글로, 여러개의 컬럼은 2개정도로
해서 소스를 작성해보았다.
구조를 대략 보니 extJS 의 GRID PANEL과 비슷한 구조인듯 -_-ㅋ
html페이지에 그리드 출력에 필요한 스크립트와 css파일을 import 해보자
<link rel="stylesheet" href="/grid/css/jquery-ui-1.9.2.custom.css" /> <link rel="stylesheet" href="/grid/css/ui.jqgrid.css" /> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script> <script type="text/javascript" src="/grid/js/jquery.jqGrid.src.js"></script>
다음에는 그리드를 표출시킬 html의 테이블 껍데기를 만들어보자
<table id="list"></table>
샘플링 첫번째 table 빈껍데이터 그리드 껍데기만 만들어 보기!!
데이터 리스트는 존재 하지않는 상태에서 실행하는 코드입니다.
배열 코드는 화면 보시고 작성하시죠
$(function(){ $("#list").jqGrid({ datatype: "local", height: 250, colNames:['컬럼1','컬럼2'], colModel:[ {name:'col1',index:'col1'}, {name:'col2',index:'col2'}, ], caption: "그리드 배열 데이터 샘플링" }); })
실행화면입니다
오 깔끌하네요 +_+ ㅋㅋㅋ
다음은 데이터를 한번 넣어보자고요~
추가로 넣어주셔야 할 스크립트 코드입니다.
//그리드에 들어갈 데이터 var mydata = [ {col1:"내용1",col2:"내용1"}, {col1:"내용2",col2:"내용2"}, ]; //배열을 반복문으로 돌려서 그리드에 add 시킨다 for(var i=0;i<=mydata.length;i++) { $("#list").jqGrid('addRowData',i+1,mydata[i]); }
자 한번 실행 ㄱㄱ???
오홋 잘 나오네요 ㅎㅎ
jqgrid의 데모사이트를 응용하셔서 드래드기능, ajax로 데이터 뽑아오는기능 , 페이징 기능등잘 응용하시면 되실거 같습니다~
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[jQuery ajax fileupload] ajax 파일업로드 (9) | 2014.06.26 |
---|---|
[jQuery prettyDate] 페이스북처럼 등록일 조금더 보기좋게 꾸미기 (0) | 2014.06.18 |
[jQuery validation] alert으로 validation 체크하는거 지겨우신가요? (0) | 2014.06.13 |
[jQuery treeview] 트리메뉴를 만들어보자! (0) | 2014.06.11 |
jQuery tableDnD을 이용하여 드래그앤드롭으로 테이블 목록 순서바꿔보기 (1) | 2014.06.11 |
오늘 소개할 플러그인은 jQuery validation 체크하는 플러그인이다!
회원가입이나 글쓰기등일때 submit 날려주기전,
if(test == ""){
alert("입력하세요!");
retrun;
}
이런 식으로 대부분 검증을 한다.
하지만 본인은 이번에 소개하는 플러그인으로 validation 체크를 하는 로직을 짜볼까 한다.
단순 alert을 text형식으로 보여주는 예제만 설명하도록 하겠음.
규칙은 엄청 다양하다. 비밀번호 검증, 이메일검증, 체크여부등등... 해당
jquery validation 다운로드
jquery validation api document
http://jqueryvalidation.org/documentation/
다운받은 파일을 압축해제하여
/dist/jquery.validate.js 와 /demo/css, /demo/images 를 프로젝트 경로에
validation이라는 폴더를 생성하여 가져다 봍였다.
/dist/additional-methods.js라는 파일이 있는데 이놈은 사용자가 개별적으로 정의한
validation기능을 추가로 적용시켜주게 도와주는놈이다.
validation플러그인을 사용시 기본적으로 적용되는 범위는
form태그내에 정의된 태그들을 검증하는거고, 일반 button이 아닌 submit버튼을 이용하는것이 기본적으로 제공되어있음.
평상시와 똑같이 js/css 파일들을 include해봅시다.
<link rel="stylesheet" href="/validation/css/screen.css" /> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script> <script type="text/javascript" src="/validation/jquery.validate.js"></script>
그다음으로는 검증을 해보고자 하기위한 HTML 태그!!
<form action="dddd.jsp" id="memberForm"> <table style="width: 800px;"> <tr> <td> 아이디 </td> <td> <input type="text" name="id" id="id" /> </td> </tr> <tr> <td> 이름 </td> <td> <input type="text" id="name" name="name" /> </td> </tr> <tr> <td colspan="2"><input class="submit" type="submit" value="Submit"/></td> </tr> </table> </form>
그럼 이제 위 태그에 대한 validation을 하기 위한 스크립트를 짜보자.
$(function(){ //memberForm form태그에 대한 validation 시작 $("#memberForm").validate({ rules: { // id , name 은 폼태그내에 존재하는 name명이다. id : { //해당 옵션을 주면 필수체크! required : true }, name : { required : true } }, messages: { // id , name 은 폼태그내에 존재하는 name명이다. // alert에 들어가는 문자내용 // 하지만 text로만 화면에 보여진다는 것! id: { required: "아이디를 입력하세요" }, name: { required: "이름을 입력하세요" } }, //검증이 끝난후에 작업할 부분 (submit??) submitHandler: function() { alert("전송!!"); } }) })
ui적으로도 깔끔하고 사용자가 alert화면의 확인버튼을 클릭을 할 필요가 없다!!
응용을 해서 한번 프로젝트에 적용해보자!
추 . 천 !!!!
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[jQuery prettyDate] 페이스북처럼 등록일 조금더 보기좋게 꾸미기 (0) | 2014.06.18 |
---|---|
[jQuery jqGrid] 데이터 목록을 그리드로 좀더 깔끔하게 사용하기 (0) | 2014.06.13 |
[jQuery treeview] 트리메뉴를 만들어보자! (0) | 2014.06.11 |
jQuery tableDnD을 이용하여 드래그앤드롭으로 테이블 목록 순서바꿔보기 (1) | 2014.06.11 |
[jQuery jqPlot] 화면에 그래프(차트)를 출력해보자 (0) | 2014.06.11 |
IE 11은 한글깨짐 현상이 있어서 제어문에서 추가함
몇년전에 파일다운로드 할 일이 생겨서 브라우저 체크는 어떤분 블로그에서 정보를 얻었는데..
어디였는지 기억이 안남 ㅠㅠ
본인은 스프링과 연동을 해서 쓰고 있는 중이라 바이트로 파일을 쓰지 않고,
스프링내에서 지원하는 copy 유틸을 사용해서 다운로드 처리를 하였음.
jsp 또는 다른 프레임워크를 쓰시는 분들은
FileCopyUtils.copy() <<<< 이부분을 변경해주셔야 할듯...
- 다운로드 유틸코드 -
package com.util; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.io.OutputStream; import java.io.UnsupportedEncodingException; import java.net.URLEncoder; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.util.FileCopyUtils; public class FileUtil { public void filDown(HttpServletRequest request, HttpServletResponse response, String filePath, String realFilNm, String viewFileNm) throws IOException { String dftFilePath = request.getSession().getServletContext().getRealPath("/"); File file = new File(dftFilePath + filePath.substring(1) + realFilNm); if (file.exists() && file.isFile()) { response.setContentType("application/octet-stream; charset=utf-8"); response.setContentLength((int) file.length()); String browser = getBrowser(request); String disposition = getDisposition(realFilNm, browser); response.setHeader("Content-Disposition", disposition); response.setHeader("Content-Transfer-Encoding", "binary"); OutputStream out = response.getOutputStream(); FileInputStream fis = null; fis = new FileInputStream(file); FileCopyUtils.copy(fis, out); if (fis != null) fis.close(); out.flush(); out.close(); } } private String getBrowser(HttpServletRequest request) { String header = request.getHeader("User-Agent"); if (header.indexOf("MSIE") > -1 || header.indexOf("Trident") > -1) return "MSIE"; else if (header.indexOf("Chrome") > -1) return "Chrome"; else if (header.indexOf("Opera") > -1) return "Opera"; return "Firefox"; } private String getDisposition(String filename, String browser) throws UnsupportedEncodingException { String dispositionPrefix = "attachment;filename="; String encodedFilename = null; if (browser.equals("MSIE")) { encodedFilename = URLEncoder.encode(filename, "UTF-8").replaceAll("\\+", "%20"); } else if (browser.equals("Firefox")) { encodedFilename = "\"" + new String(filename.getBytes("UTF-8"), "8859_1") + "\""; } else if (browser.equals("Opera")) { encodedFilename = "\"" + new String(filename.getBytes("UTF-8"), "8859_1") + "\""; } else if (browser.equals("Chrome")) { StringBuffer sb = new StringBuffer(); for (int i = 0; i < filename.length(); i++) { char c = filename.charAt(i); if (c > '~') { sb.append(URLEncoder.encode("" + c, "UTF-8")); } else { sb.append(c); } } encodedFilename = sb.toString(); } return dispositionPrefix + encodedFilename; } }
사용법은 다음과 같다.
FileUtil fileUtil = new FileUtil(); fileUtil.filDown("/upload/dir1/dir2/","실제파일명+확장자","화면에보여줄파일명+확장자");
해당 샘플은 다운로드 파일들이 WebContent 하단에 해당되는 폴더+파일이라고 가정한다.
그리고 1번째 파라미터인 디렉토리 경로는 webcontent/upload/dir1/dir2/ 형식으로 존재한다고 가정하는거다.
만약 경로앞에 슬러시가 빠진다면 fileDown 메서드에서 filePath.substring(1) 을 filePath로 변경하고 적용해주도록 하자
POI 라이브러리를 이용하여 엑셀파일(XLSX) 만들기 - 6만건 이상일 경우 추천 (0) | 2014.07.14 |
---|---|
json-simple 라이브러리를 이용한 ObjecToString 과 StringToObject 코드구현 (2) | 2014.07.04 |
엑셀다운 POI 라이브러리 - 엑셀파일에서 내용 읽기 (0) | 2014.06.10 |
게시물 번호 구하기 샘플소스 (0) | 2014.06.09 |
자바 썸네일 이미지 생성 (0) | 2014.06.09 |
이번에 소개할 플러그인은 jQuery 트리에 관련된 jquery treeview plugin입니다.
jQuery기반으로 만들어진 트리가 몇가지 더있긴 하지만, 본인은 이 플러그인이 편하다.
플러그인 개발자 사이트 + 트리뷰 다운로드 페이지
http://bassistance.de/jquery-plugins/jquery-plugin-treeview/
이 개발자는 트리 플러그인 말고도 여러가지 플러그인을 개발했는데 본인이 트리 플러그인
이후에 소개할 플러그인은 해당 개발자가 만든 prettydate , validation 플러그인 정도
추가로 글을 올릴 예정이다.
위의 URL에 접속하여 어김없이 Download 링크를 클릭하여 플러그인을 다운받자.
압축을 해제하면 내부 폴더에 demo 페이지가 있어서 해당 소스를 분석하고 응용을 하면
되겠지만, 플러그인 소개하는 만큼 심플하게 샘플링을 해보도록 하겠다!!
심플한 구조의 트리를 할것이므로 import할 파일은 몇가지 되지 않는다
ajax로 sync걸어서 트리를 정의하거나 페이지가 refresh 되어도 트리의 포커스를
유지시키려면 cookie 등... 아니면 추가버튼으로 트리생성등등!!!
여러가지가 있으니 해당 부분은 개발자 사이트와 demo 소스를 보고 충분히 분석하셔서
적용하시길~
본인은 위에 이미지처럼 images폴더와 css / js 파일 하나씩 import하도록 하겠다.
jquery는 CDN으로 .... 긔차니즘;;;;
① 시작은 ul로 시작하는거 같음. ul이 기준이고 트리 UI는 class에 지정을 해주어야 기초 완성
② li 태그가 각각의 트리수만큼 나타내는 것인대
li 밑에 span을주고 클래스명을 folder 또는 file로 준다.
값을 해당 트리메뉴에 해당하는 텍스트다.
③ 만약 span 다음에 자식 노드를 추가하고자 한다면 span 태그 하단에 ul - li 태그를
넣어준다
이런식의 같은구조로 depth가 늘어나는 형태이다.
기본 샘플링에 대한 코드를 첨부합니다.
import 파일
<link rel="stylesheet" href="/tree/jquery.treeview.css" /> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script> <script src="/tree/jquery.treeview.js" type="text/javascript"></script>
이어서 스크립트 부분이다
$(function(){ // 해당 함수를 호출안할시, 트리기능이 동작을 안함 $("#browser").treeview({}); });
마지막으로 html 태그 부분
<div id="main"> <ul id="browser" class="filetree"> <li> <span class="folder">폴더</span> <ul> <li> <span class="file">폴더 - 파일</span> </li> </ul> </li> <li> <span class="file">파일</span> </li> </ul> </div>
이상!!!!
도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!
[jQuery prettyDate] 페이스북처럼 등록일 조금더 보기좋게 꾸미기 (0) | 2014.06.18 |
---|---|
[jQuery jqGrid] 데이터 목록을 그리드로 좀더 깔끔하게 사용하기 (0) | 2014.06.13 |
[jQuery validation] alert으로 validation 체크하는거 지겨우신가요? (0) | 2014.06.13 |
jQuery tableDnD을 이용하여 드래그앤드롭으로 테이블 목록 순서바꿔보기 (1) | 2014.06.11 |
[jQuery jqPlot] 화면에 그래프(차트)를 출력해보자 (0) | 2014.06.11 |
tableDnD는 참 유용한 플러그인 중 하나이다
테이블 드래그앤드롭 플러그인 개발자 블로그
http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
드래그앤드롭 플러그인 다운로드
https://github.com/isocra/TableDnD
다운로드 페이지에서 우측에 Download Zip버튼을 클릭하여 다운로드 받도록 하자
압축 해제 후, stable폴도 밑에 있는 jquery.tablednd.js 파일을 프로젝트에 넣어놓자
2013년12월말일날 최종업데이트 버전인거 같다..
jquery와 다운받은 jquery.tablednd.js를 import 시켜보자
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script> <script type="text/javascript" src="/tablednd/jquery.tablednd.js"></script>
스크립트 소스는 다음과 같다
$(function(){ //tableDnD(이안에 여러 옵션들을 지정해 줄 수 있다.) /* example : tableDnD( { //드래그 기능이 동작하는 동안 특정 CLASS를 드래그하는 TR에 적용해준다. onDragStyle : 'css제어', onDropStyle : '드롭기능시 스타일', onDragClass: '클래스지정', //드래그한 후 드롭이벤트가 일어날 경우의 이벤트 onDrop: function(table, row) { console.log("드롭!!"); }, onDragStart: function(table, row) { console.log("드래그 시작!"); } } ); */ $("#tableId").tableDnD(); })
마지막으로 샘플용 테이블 html 태그이다
<table id="tableId" border="1" style="width: 800px;"> <tr style="background-color: red;"> <td width="100%">1</td> </tr> <tr style="background-color: yellow;"> <td>2</td> </tr> <tr style="background-color: blue;"> <td>3</td> </tr> <tr style="background-color: green;"> <td>4</td> </tr> </table>
화면을 실행 후, 테이블의 row를 드래그앤드롭을 해보자
잘~~ 될것이다!!
[jQuery prettyDate] 페이스북처럼 등록일 조금더 보기좋게 꾸미기 (0) | 2014.06.18 |
---|---|
[jQuery jqGrid] 데이터 목록을 그리드로 좀더 깔끔하게 사용하기 (0) | 2014.06.13 |
[jQuery validation] alert으로 validation 체크하는거 지겨우신가요? (0) | 2014.06.13 |
[jQuery treeview] 트리메뉴를 만들어보자! (0) | 2014.06.11 |
[jQuery jqPlot] 화면에 그래프(차트)를 출력해보자 (0) | 2014.06.11 |