jqGrid에서 날짜 기간조회로 게시판 검색을 할려고 합니다.도움 주시면 감사하겠습니다.

dae12의 이미지

다름이 아니라 jqGrid 게시판에 데이터를 datepicker와 연동하고
게시판에 데이터를 날짜로 조회하여 출력을 할려고 합니다.

개발환경은 jqGrid, mybatis, postgresql이구요.
현재 jqGrid에 DB의 데이터는 출력은 되는 상황이구요.

datepicker는 화면만 출력이 되는 상황입니다.

datepicker 달력 날짜를 클릭하면 그 날짜의 대한 데이터만 나오면 됩니다.

날짜부분은 일단 DB 컬럼은 스트링으로 해놓은 상태에서 테스트 하고 있습니다.

조회 검색 하는 부분은 저의 미천한 실력으로는 어찌 해야 할지 도통 감이 안오네요.

작은 도움이라도 주시면 감사히 받고 열심히 하겠습니다.
jqGrid와 ajax및 데이터 바인딩도 잘 모르는 상태에서 할려니 힘이 드네요.

이 개발을 하는데에 있어서 기초를 어떻게 다져야 하는지 좋은 참조 사이트듣등
알려주시면 무지 감사하겠습니다. 일단 지금은 기초가 너무 부족하여서 ajax와 javascript를
보고 있는 중입니다.

개발중인 화면도 첨부 하겠습니다.
부디 도와주시면 감사하겠습니다. ㅠㅠ

/********index.jsp(화면을 출력 해주는 jsp입니다.)**********/ 
 
<script type="text/javascript"> 
var statCtl = { 
getList : function() { 
//alert("조회"); 
var startDate = $("#from").val(); 
var endDate = $("#to").val(); 
 
startDate와 endDate에 날짜를 컨트롤러나 어느 부분에 보내야 할텐데 감이 안 잡힙니다. 
ajax로도 몇번 시도해 보았는데 도통 모르겠습니다. ㅜㅜ 
 
 
밑에 있는 것들은 다 여러군데 있는 소스 짜맞추어 본겁니다. ㅠㅠ 
 
//var param = "&keyfield="+keyfield; 
 //param += "&keyword="+encodeURIComponent(keyword); 
 //jQuery("#user_list").jqGrid('setGridParam',{postData:{startDate:startDate}}); 
 //jQuery("#user_list").jqGrid('setGridParam',{postData:{endDate:endDate }}); 
 //jQuery("#user_list").trigger("reloadGrid"); 
 //fn_ajaxList(param); 
 
} 
}; 
 
function doSearch(){ 
 $("#user_list").jqGrid('setGridParam',{datatype:'json',page:1, 
 postData:{ 
 endDate:$('#to').val(), 
 startDate:$('#from').val() 
 }})/* .trigger("reloadGrid"); */ 
 
 doSearchChart(); 
 } 
 
function doSearchChart(){ 
 var endDate = document.getElementById("to").value; 
 var startDate = document.getElementById("from").value; 
 alert(startDate); 
 $("#user_list").clearGridData(); 
 
 } 
 
</script> 
 
<div id="calendar" style="height:25px;"> 
 
<p>조회기간:<input type="text" id="from" >~<input type="text" id="to" > 
<button type="button" name="btn_search" id="btn_search" value="" class="btn_gray" onclick="statCtl.getList();" style="height:25px;">통계 조회</button> 
</p> 
</div> 
<table id="user_list"></table> 
<div id="pager"></div> 

/********UserListAction.java(컨트롤러 입니다.)**********/ 
 
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
 
SqlSession sqlSession = MyBatisConnectionFactory.getSqlSessionFactory().openSession(true); 
 
//mapper 연결 
UserDao user = sqlSession.getMapper(UserDao.class); 
 
int page =Integer.parseInt(request.getParameter("page")); 
int perPageRow =Integer.parseInt(request.getParameter("rows")); 
 
 
이곳에 들어와야 하는지는 잘 모르겠지만 가상의 데이터를 집어넣어서 조회를 해보았습니다. 
 
 
String startDate = "2014-07-23"; 
String endDate = "2014-07-28"; 
 
 
//mapper에 데이터를 page와 rows정보를 보낸다. 
 
List<User> list = user.selectAll(page,perPageRow, startDate, endDate); 
 
int records = user.getCountRow(); 
int total = (int)Math.ceil((double)records/(double)perPageRow); 
 
UserJson userJson = new UserJson(); 
userJson.setTotal(total); 
userJson.setRecodes(records); 
userJson.setPage(page); 
userJson.setRows(list); 
 
Gson gson = new GsonBuilder().create(); 
String json = gson.toJson(userJson); 
 
response.setContentType("application/json"); 
response.setCharacterEncoding("utf-8"); 
 
PrintWriter out = response.getWriter(); 
out.write(json);//json data를 전송한다. 
out.flush(); 
out.close(); 

/*************UserMapper.xml***************/ 
 
<mapper namespace="com.dao.UserDao"> 
<resultMap type="User" id="result"> 
<result property="no" column="no"/> 
<result property="date" column="date"/> 
<result property="hours" column="hours"/> 
<result property="call_type" column="call_type"/> 
<result property="customer_name" column="customer_name"/> 
<result property="customer_types" column="customer_types"/> 
<result property="subject" column="subject"/> 
<result property="agent_name" column="agent_name"/> 
<result property="results" column="results"/> 
<result property="kind_counseling" column="kind_counseling"/> 
</resultMap> 
 
<select id="getCountRow" resultType="int"> 
SELECT COUNT(*)FROM public.consultation; 
</select> 
 
<!-- select --> 
<select id="selectAll" resultMap="result"> 
 <!-- SELECT * FROM public.consultation where date between startDate=#{startDate} and endDate=#{endDate}; --> 
select * from consultation where date between '2014-07-23' and '2014-07-24'; 
 </select> 

/************content.js****************/ 
 
/****jqGrid를 출력 할때 맞추어주어야 하는 js파일입니다.datepicker js도 같이 있습니다.****/ 
 
jQuery(document).ready( 
 function() { 
 jQuery("#user_list").jqGrid( 
 { 
 // ajax 요청주소 
url : 'UserListAction', 
 // 요청방식 
mtype : "post", 
 // 결과물 받을 데이터 타입 
datatype : "json", 
 // 그리드 캡션 
caption : "서비스센터", 
 // 그리드 높이 
height : "auto", 
 // 그리드(페이지)마다 보여줄 행의 수 -> 매개변수이름은 "rows"로 요청된다 
rowNum : 20, 
 // rowNum의 변경 옵션 
rowList : [ 10, 20, 30 ], 
 // 컬럼명 
colNames : [ "no", "상담일자", "상담시간", "통화유형", "고객명", 
 "상담유형", "제목", "상담원명", "상담결과", "상담종류" ], 
 
 // 컬럼 데이터(추가, 삭제, 수정이 가능하게 하려면 autoincrement컬럼을 제외한 모든 
// 컬럼을 editable:true로 지정) 
 
 // edittyped은 text, password, ... input type명을 사용 
 
colModel : [ { 
 name : "no", 
 index : "no", 
 sorttype : 'int', 
 sortable : true 
 }, { 
 name : "date", 
 index : "date", 
 editable : true 
 
 }, { 
 name : "hours", 
 index : "hours", 
 editable : true, 
 sortable : false 
 }, { 
 name : "call_type", 
 index : "call_type", 
 editable : true 
 }, { 
 name : "customer_name", 
 index : "customer_name", 
 editable : true 
 }, { 
 name : "customer_types", 
 index : "customer_types", 
 editable : true 
 }, { 
 name : "subject", 
 index : "subject", 
 editable : true 
 }, { 
 name : "agent_name", 
 index : "agent_name", 
 editable : true 
 }, { 
 name : "results", 
 index : "results", 
 editable : true 
 }, { 
 name : "kind_counseling", 
 index : "kind_counseling", 
 editable : true 
 
 } ], 
 
 // 네비게이션 도구를 보여줄 div요소 
// pager : "#pager", 
 pager : $('#pager'), 
 
 // sorttype : "date", 
 sortable : true, 
 sortname : 'id', 
 sortorder : "asc", 
 autowidth : true, 
 
 // 전체 레코드 수 ,현재레코드 등을 보여줄지 유무 
viewrecords : true, 
 
 loadonce : true, 
 loadtext : '조회중', 
 
 // 추가, 수정, 삭제 url 
 
 editurl : "UserEditAction", 
 
 /* 
 * loadComplete : function() { var $self = $(this); if 
 * ($self.jqGrid("getGridParam", "datatype") === "json") { 
 * setTimeout(function() { $(this).trigger("reloadGrid"); // 
 * Call to fix client-side sorting }, 50); } } 
 */ 
 
 })/* .trigger("reloadGrid") */; 
 
 // 네비게이션 도구 설정 
jQuery("#user_list").jqGrid("navGrid", "#pager", { 
 search : true, 
 edit : true, 
 add : true, 
 del : true 
 }, { 
 closeAfterEdit : true, 
 reloadAfterSubmit : true 
 }, { 
 closeAfterAdd : true, 
 reloadAfterSubmit : true 
 }, { 
 reloadAfterSubmit : true 
 }); 
 
 /* 
 * jQuery("#user_list").jqGrid('user_list'); 
 * 
 * var sortName = jQuery(gridId).jqGrid('#user_list','sortname'); 
 * alert(sortName); 
 */ 
 
 })/* .trigger("reloadGrid") */; 
 
/*Calendar 스크립트*/ 
$(function() { 
 var dates = $("#from, #to ") 
 .datepicker( 
 { 
 prevText : '이전 달', 
nextText : '다음 달', 
monthNames : [ '1월', '2월', '3월', '4월', '5월', '6월','7월', '8월', '9월', '10월', '11월', '12월' ], 
monthNamesShort : [ '1월', '2월', '3월', '4월', '5월', '6월','7월', '8월', '9월', '10월', '11월', '12월' ], 
dayNames : [ '일', '월', '화', '수', '목', '금', '토' ], 
dayNamesShort : [ '일', '월', '화', '수', '목', '금', '토' ], 
dayNamesMin : [ '일', '월', '화', '수', '목', '금', '토' ], 
dateFormat : 'yy-mm-dd', 
 showMonthAfterYear : true, 
 yearSuffix : '년', 
 
onSelect: function( selectedDate ) { 
 var option = this.id == "from" ? "minDate" : "maxDate", 
 instance = $( this ).data( "datepicker" ), 
 date = $.datepicker.parseDate( 
 instance.settings.dateFormat || 
 $.datepicker._defaults.dateFormat, 
 selectedDate, instance.settings ); 
 dates.not( this ).datepicker( "option", option, date ); 
 
 //alert("날짜:"+date); 
 
 if (id==("from")) { 
 alert(document.getElementById("from").value); 
 }else { 
 alert(document.getElementById("to").value); 
 } 
 } 
 
 }); 
}); 

File attachments: 
첨부파일 크기
Image icon qna.png19.56 KB

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.