Mybatis와 ibatis의 반복문에 대해서 알아보도록 하겠습니다.
보통 SQL 쿼리에서 IN절에 사용되는 방법입니다.
기본적으로 한 종류의 타입의 리스트 객체를 이용합니다.
Mybatis와 ibatis 태그를 나누어서 사용방법을 포스팅하겠습니다.
기본 ibatis 연동법에서 POM.XML의 IBATIS 관련 DEPENDENCY 설정부분을 빼고
포스팅을 하였습니다.
2014/11/17 - [개발에필요한연동법/스프링연동] - Spring3 + ibatis(아이바티스) 연동해보고 쿼리결과값 콘솔에 출력해보기
pom.xml에 추가해주실 DEPENDENCY 부분은 다음과 같습니다.
<dependency> <groupId>org.apache.ibatis</groupId> <artifactId>ibatis-sqlmap</artifactId> <version>2.3.4.726</version> </dependency> <dependency> <groupId>commons-dbcp</groupId> <artifactId>commons-dbcp</artifactId> <version>1.4</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>${spring-framework.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-orm</artifactId> <version>${spring-framework.version}</version> </dependency>
샘플테이블은 MySQL의 information_schema DB의 'TABLES' 테이블 기준으로 설명드리도록 하겠습니다.
※ 해당 샘플을 따라해보시려면 application-config.xml파일내에 존재하는
datasource태그의 url 값의 db명을 "information_schema"로 변경하시면 되겠습니다.
@RequestMapping("/list") public void list(){ try { Map<String, Object> hmap = new HashMap<String, Object>(); ArrayList<String> dbList = new ArrayList<String>(); dbList.add("mysql"); dbList.add("test"); hmap.put("dbList", dbList); studyDao.list(hmap); } catch (Exception e) { e.printStackTrace(); } }
public void list(Map<String, Object> hmap) throws SQLException;
@Override public void list(Map<String, Object> hmap) throws SQLException { query.selectList("query.list",hmap); }
@Override public void list(Map<String, Object> hmap) throws SQLException { query.queryForList("query.list",hmap); }
위코드를 보시면 DaoImpl에서 별도로 return 을 해주지 않았습니다.
그 이유는 단순하게 IN절내에 정상적인 Parameter값들이 들어가는지
쿼리로그로 확인을 하기위하여 별도의 return 타입을 작성하지 않았습니다.
마지막으로 Mybatis(foreach 태그)와 IBATIS(iterate 태그) 별 쿼리 XML 태그는 다음과 같습니다.
<select id="list" parameterType="java.util.Map" resultType="java.util.Map"> SELECT * FROM TABLES WHERE TABLE_SCHEMA IN <foreach item="item" index="index" collection="dbList" open="(" close=")" separator=","> #{item} </foreach> </select>
<select id="list" parameterClass="java.util.Map" resultClass="com.spring.study.vo.ListVo"> SELECT table_name FROM TABLES WHERE TABLE_SCHEMA IN <iterate property="dbList" open="(" close=")" conjunction=","> #dbList[]# </iterate> </select>
mybatis의 경우는 collection에 넘겨준 단일타입의 List객체명을 작성해주시면 되겠으며
ibatis의 경우는 property에 넘겨준 단일타입 List 객체명을 작성해주시면됩니다.
실행을 해보도록 하겠습니다.
List객체로 넘긴 Parameter가 정상적으로 구분자를 통하여 IN PARAMETER에 넘어왔으면
총 28개의 결과값을 출력한 것을 확인 할 수 있었습니다.
※ ibatis의 경우는 별도의 로그가 출력되지 않을것입니다.
에러가 안나면 정상적으로 쿼리조회가 완료 된것이므로 신경쓰지 않으셔도 되겠습니다.
mybatis처럼 resultClass를 Map타입으로 받아오지 못하는 관계로
임의로 VO 객체를 RESULTCLASS로 받게끔 처리해두었습니다.
by 개발로짜
Spring3 + Mybatis 연동 후 DBMS 종류별(MySQL,MSSQL,Oracle) 데이터 insert 후 시퀀스 가져오기 (0) | 2014.11.19 |
---|---|
mybatis와 ibatis별 동적태그 비교문 알아보도록 하자 (5) | 2014.11.17 |
"ExtJS_OS" 님께서 질문주신 ExtJS 4.X버전으로 DATAVIEW 응용내용에 대한 답변 샘플입니다.
답변 : 네 동적으로 TPL속성을 이용하여 템플릿 변경이 가능합니다.
패널 툴바에 버튼 클릭시 tpl 타입변경은 다음과 같습니다.
데이터스토어에 대한 데이터는 동일하다 가정하고 템플릿을 변경하게끔 예를 들었습니다.
div.item { background-color: blue; color: white; } span.item { background-color: red; color: white; }
Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ renderTo : Ext.getBody(), title : '동적 TPL 생성예제', width : 200, height : 200, items:[{ xtype : 'dataview', id : 'dynamic_dataview', tpl: new Ext.XTemplate( '<tpl for=".">', '<div class="item">', '{title}', '</div>', '</tpl>'), itemSelector: '.item', store : Ext.create('Ext.data.Store',{ fields : ['title'], data: [ {title:'EXTJS_DATAVIEW내용1'}, {title:'EXTJS_DATAVIEW내용2'}, {title:'EXTJS_DATAVIEW내용3'}, {title:'EXTJS_DATAVIEW내용4'} ], proxy: { type: 'memory' } }) }], fbar : [{ text : '동적 TPL 변경하기', handler : function(btn) { //dataview컴포넌트.tpl 속성에 새로운 XTemplate 적용 Ext.getCmp("dynamic_dataview").tpl = new Ext.XTemplate('<tpl for=".">', '<span class="item">', '{title}', '</span>', '</tpl>'); //dataview컴포넌트객체.refresh()를 통해 화면 재정의 Ext.getCmp("dynamic_dataview").refresh(); } }] }) })
동적 템플릿의 핵심은 dataview의 tbl에 새로운 템플릿을 담아 주신 다음
dataview refresh() 함수를 적용해시면 되겠습니다.
답변 : 네 동적호출 가능합니다.
단, proxy type이 'ajax'일 경우이거나 'memory' 타입의 data내에 값이 존재하지 않는상태에서
이벤트 발생시 store에 add로 작업해주셔야 합니다.
이유는 Store가 autoLoad되는 시점은 데이터스토어 공간내에 data에 데이터가 존재하면
autoLoad 속성을 무시하고 자동 호출이 됩니다.
동적으로 Store 호출을 위한 샘플 코드 입니다
Ext.onReady(function(){ Ext.create('Ext.panel.Panel',{ renderTo : Ext.getBody(), title : '동적으로 데이터스토어 호출', width : 200, height : 200, items:[{ xtype : 'dataview', id : 'dynamic_dataview', tpl: new Ext.XTemplate( '<tpl for=".">', '<div class="item">', '{title}', '</div>', '</tpl>'), itemSelector: '.item', store : Ext.create('Ext.data.Store',{ fields : ['title'], proxy : { type : 'ajax', api : { read : '/dynamic.json' }, reader : { type : 'json', success : "success", root : 'items' } } }) }], fbar : [{ text : '데이터스토어 호출', handler : function(btn) { Ext.getCmp("dynamic_dataview").getStore().load(); } }] }) })
{ "items" : [{"title" : "동적데이터1" },{"title" : "동적데이터2" },{"title" : "동적데이터3" }], "success" : true }
json 파일대신 db조회후 동적 데이터 생성할시,
php / jsp 등 해당 json 파싱을 사용하셔서 규격에 맞춰서 작업하시면 되겠습니다.
by 개발로짜
"yj" 님께서 질문주신 팝업그리드에서 부모페이지로 값 전송관련 답변입니다. (2) | 2014.11.17 |
---|
이번포스팅은 jqGrid를 다운로드하여 연동 및 그리드 목록에
데이터 출력시키는 방법에 대하여 알아보고자 합니다.
jqGrid의 경우 jQueryUI의 테마를 사용하기 때문에
jQueryUI를 다운 및 연동을 우선적으로 연동한 후에
jqGrid 다운을 받도록 합니다.
2014/11/04 - [웹개발강좌/jQueryUI] - jQueryUI 1장 - 테마선택하여 다운로드 후 간단하게 버튼태그에 UI 적용하기
jQueryUI에 대한 연동이 완료되었다면
jqGrid 플러그인을 다운로드 받도록 합니다.
http://www.trirand.com/blog/?page_id=6
URL 접속 후 Download버튼을 클릭하여 jqGrid 압축파일을 다운받습니다.
스크롤을 내리면 하단과 같은 버튼이 존재 할 겁니다.
다운로드 파일을 압축 해제 후 존재하는 css/js/plugins/src 디렉토리를
자신의 웹프로젝트에 "jqgrid" 디렉토리 생성 후 복사+붙여넣기를 합니다.
위에 파란줄친게 jqueryui관련 플러그인 include파일이고
빨간줄을 jqgrid 관련 플러그인 include파일입니다.
index.html 이란 파일을 생성 후 연동을 해보도록 하겠습니다.
<link rel="stylesheet" type="text/css" media="screen" href="/jqueryui/jquery-ui.css" /> <link rel="stylesheet" type="text/css" media="screen" href="/jqgrid/css/ui.jqgrid.css" /> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="/jqueryui/jquery-ui.js"></script> <script src="/jqgrid/js/jquery.jqGrid.src.js"></script>
경로는 다를 수 있으니 자신의 경로에 맞춰서 include 해주세요
include를 해주셨다면 body 태그 사이에 그리드 출력을 위한 태그를 삽입해주세요
<table id="list"></table>
※ jqGrid를 이용하여 그리드 목록 출력시, table 태그를 이용해주어야 합니다.
$(function(){ //가상의 local json data var gridData = [{seq:"1",create_date:"2007-10-01",create_name:"test",title:"note",hitnum:"11"}, {seq:"2",create_date:"2007-10-02",create_name:"test2",title:"note2",hitnum:"22"}]; //jqGrid껍데기 생성 $("#list").jqGrid({ //로컬그리드이용 datatype: "local", //그리드 높이 height: 250, //컬럼명들 colNames:['시퀀스','제목', '등록일', '등록자명','조회수'], //컬럼모델 colModel:[ {name:'seq'}, {name:'title'}, {name:'create_date'}, {name:'create_name'}, {name:'hitnum'} ], //그리드타이틀 caption: "그리드 목록" }); // 스크립트 변수에 담겨있는 json데이터의 길이만큼 for(var i=0;i<=gridData.length;i++){ //jqgrid의 addRowData를 이용하여 각각의 row에 gridData변수의 데이터를 add한다 $("#list").jqGrid('addRowData',i+1,gridData[i]); } })
위 처럼 정상적으로 그리드내에 데이터가 출력된 것을 확인할 수 있습니다.
이어서 서버통신으로 그리드 데이터 호출을 해보도록 하겠습니다.
json 파싱하는부분은 저는 json-simple 라이브러리를 이용하여 예를 들도록 하겠습니다.
2014/10/06 - [코드저장소/java] - JSON 라이브러리를 이용하여 object생성과 문자열을 object형으로 변환해보기
기존 코드는 동일하고 스크립트 코드를 변경해보도록 하겠습니다.
$(function(){ $("#list").jqGrid({ //ajax 호출할 페이지 url:'/result.jsp', //로딩중일때 출력시킬 로딩내용 loadtext : '로딩중..', //응답값 datatype: "json", height: 250, colNames:['시퀀스','제목', '등록일', '등록자명','조회수'], colModel:[ {name:'seq'}, {name:'title'}, {name:'create_date'}, {name:'create_name'}, {name:'hitnum'} ], caption: "그리드 목록" }); })
일괄적으로 페이징 처리 없이 서버에서
응답받은 데이터를 한꺼번에 출력시키는 방식입니다.
호출하는방식이 $.ajax와 흡사합니다.
그럼 jqGrid 속성중 url에 정의한 jsp페이지에서 json 파싱작업을 하도록 하겠습니다.
JSONObject jsonObj = new JSONObject(); JSONObject jsonObj2 = null; JSONArray jsonArray = new JSONArray(); //1번째 데이터 jsonObj2 = new JSONObject(); jsonObj2.put("seq", "1"); jsonObj2.put("title", "제목"); jsonObj2.put("create_date", "2014-11-11"); jsonObj2.put("create_name", "개발로짜"); jsonObj2.put("hitnum", "1"); jsonArray.add(jsonObj2); //2번째 데이터 jsonObj2 = new JSONObject(); jsonObj2.put("seq", "2"); jsonObj2.put("title", "제목222"); jsonObj2.put("create_date", "2014-11-11"); jsonObj2.put("create_name", "개발로짜2323"); jsonObj2.put("hitnum", "10"); jsonArray.add(jsonObj2); PrintWriter pw = response.getWriter(); pw.print(jsonArray); pw.flush(); pw.close();
json array 객체를 클라이언트 페이지로 넘겨 주었습니다.
맨처음 진행한 local 타입에 사용했던 json 변수와 동일한 구조로 넘겨준것 뿐입니다.
즉, gridData 변수의 담겨있던 json 데이터를 result.jsp 페이지로 이동(?) 된 것 뿐입니다.
추가로 그리드 페이징에 대하여 진행하겠습니다.
페이징UI 적용을 위한 DIV 태그를 추가하도록 합니다.
<div id="page"></div>
다음으로 스크립트 코드를 작성해보았습니다.
$(function(){ $("#list").jqGrid({ url:'/result.jsp', datatype: "json", loadtext : '로딩중..', height : 250, //한페이지에 출력할 데이터 갯수 rowNum : 2, //페이징UI적용을 위한 속성 pager: '#page', colNames:['시퀀스','제목', '등록일', '등록자명','조회수'], colModel:[ {name:'seq'}, {name:'title'}, {name:'create_date'}, {name:'create_name'}, {name:'hitnum'} ], caption: "그리드 목록" }); })
기존 ajax 코드에서 2가지(rowNum,pager) 속성이 추가되었습니다.
rowNum : 한페이지당 몇개의 데이터를 출력할지
pager : 페이징UI 적용할 셀렉터
이어서 result.jsp 서버 코드를 변경해보도록 하겠습니다.
//현재페이지 String current_page = request.getParameter("page"); //한페이지에 최대 몇개의 row 출력(mysql의 limit에 속하는데이터) String numper_page = request.getParameter("rows"); JSONObject jsonObj = new JSONObject(); JSONObject jsonObj2 = null; JSONArray jsonArray = new JSONArray(); if(current_page.equals("1")) { jsonObj2 = new JSONObject(); jsonObj2.put("seq", "1"); jsonObj2.put("title", "제목"); jsonObj2.put("create_date", "2014-11-11"); jsonObj2.put("create_name", "개발로짜"); jsonObj2.put("hitnum", "1"); jsonArray.add(jsonObj2); jsonObj2 = new JSONObject(); jsonObj2.put("seq", "2"); jsonObj2.put("title", "제목2"); jsonObj2.put("create_date", "2014-11-15"); jsonObj2.put("create_name", "개발로짜"); jsonObj2.put("hitnum", "20"); jsonArray.add(jsonObj2); } else if(current_page.equals("2")) { jsonObj2 = new JSONObject(); jsonObj2.put("seq", "3"); jsonObj2.put("title", "제목33"); jsonObj2.put("create_date", "2014-11-11"); jsonObj2.put("create_name", "개발로짜33"); jsonObj2.put("hitnum", "8"); jsonArray.add(jsonObj2); jsonObj2 = new JSONObject(); jsonObj2.put("seq", "4"); jsonObj2.put("title", "제목4444"); jsonObj2.put("create_date", "2014-11-15"); jsonObj2.put("create_name", "개발로짜12"); jsonObj2.put("hitnum", "2"); jsonArray.add(jsonObj2); } //현재페이지의 목록데이터 jsonObj.put("rows", jsonArray); //현재페이지 jsonObj.put("page", current_page); //총페이지수 jsonObj.put("total", 2); //총글목록수 jsonObj.put("records", 4); PrintWriter pw = response.getWriter(); pw.print(jsonObj); pw.flush(); pw.close();
위 코드는 db처리 없이 임의로 current_page값 구분으로
가상의 페이징처리로 데이터를 파싱 하였습니다.
그리고 페이징 처리시 데이터 목록의 json array 의 경우 rows 키에 담겨져야 하며
현재페이지(page), 총페이지수(total), 총글목록 카운트(records) 에 담아서
클라이언트 페이지에 response 해주어야 합니다.
실행을 해보도록 하겠습니다.
위와같이 데이터 출력을 되었으나 로딩문구가 계속 출력되며
하단 페이징화면도 제대로 나타나지 않습니다.
F12 를 눌러서 오류 메시지를 확인해 보았는데
"Uncaught TypeError: Cannot read property 'integer' of undefined"
라는 메시지 출력이 되었습니다.
페이징 처리를 위해서 LOCALE 설정을 잡아주지 않아서입니다.
jqgrid -> src 0> i18n 디렉토리 내에 자신의 원하고자 하는 locale 파일을 include 해주도록 합니다.
저같은 경우는 한글 locale 설정을 하므로 "grid.locale-kr.js" 파일을 include하였습니다.
<script src="/jqgrid/src/i18n/grid.locale-kr.js"></script>
다시 실행을 해보도록 하겠습니다.
그리드 1페이지 결과
그리드 2페이지 결과
실행결과 정상적으로 출력되네요
다음에 시간이 되면 컬럼 수정 및 기타 추가 기능에 대하여 포스팅 해보도록 하겠습니다.
by 개발로짜
jQuery Cookie 플러그인을 사용하여 손쉽게 쿠키정보 제어하기 (0) | 2014.10.25 |
---|---|
jQuery Validation 플러그인을 이용하여 손쉽게 검증하기 (1) | 2014.10.22 |
jQuery blockUI 플러그인을 이용하여 레이어팝업(모달) 만들기 (2) | 2014.10.21 |
jQuery tablednd 플러그인을 사용하여 테이블을 드래그앤드롭으로 순서변경하기 (0) | 2014.10.15 |
jQuery jqPlot를 사용하여 선형,원형(파이형),막대형 그래프 생성하기 (9) | 2014.10.15 |