<%
/**
 * <pre>
 * @Class Name : listCanceledRentItems.jsp
 * 
 * @Description : 대출 취소목록을 조회한다.
 * 
 * 
 * @프로젝트명: 지방문화원 통합자료관리시스템 구축사업 (2021)
 *
 * </pre>
 *
 * @ ------------    --------    ---------------------------
 * @ 수정일                     수정자             수정내용
 * @ ------------    --------    ---------------------------
 * @ 2021. 7. 21.    JSYOO       최초 생성
 *
 * 
 * @author 이씨플라자 * DIGITALSHIP JSYOO
 * @since 2021. 7. 21.
 * @version 1.0
 *
 */
 %>
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="validator" uri="http://www.springmodules.org/tags/commons-validator" %>

<c:set var="pageTitle">대출 취소 목록</c:set>

<!DOCTYPE html>
<html>
<head>
<title>${pageTitle}</title>

<!-- GRID -->
<link type="text/css" rel="stylesheet" href="/nlib/js/jsgrid/nlib-jsgrid.css" />
<link type="text/css" rel="stylesheet" href="/nlib/js/jsgrid/nlib-jsgrid-theme.css" />
<script src="/nlib/js/jsgrid/nlib-jsgrid.js"></script>

<script type="text/javaScript" language="javascript">

window.onload = function() {
    //=======================================================
    // 그리드 생성 환경설정 
    //=======================================================
    $("#jsGrid").jsGrid({
        pageSize : $("#pageSize").val(),
        controller: {
            loadData: function (filter) { // 그리드에 데이터를 가져올 때 실팽되는 함수 
                var data = $.Deferred();
                //======================================
                // 요청 정보 구성 : 시작  (각 요청에 맞게 조정)
                //======================================
                var reqUrl = "${pageContext.request.contextPath}/rent/listCanceledRentItemsAjax.do";
                var searchKeyword  = document.articleForm.searchKeyword.value;
                var pageIndex = ( filter && filter.pageIndex ? filter.pageIndex : $("#pageIndex").val());
                var pageSize  = ( filter && filter.pageSize  ? filter.pageSize  : $("#pageSize").val());

                $("#pageIndex").val(pageIndex);

                var inputData = {
                          "searchKeyword" : searchKeyword
                        , "pageIndex" : pageIndex
                        , "pageSize": pageSize};
                
                
                //--------------------------------------
                // 요청 처리 
                //--------------------------------------
                $.ajax({
                    type: "post",
                    contentType: "application/json; charset=utf-8",
                    url: reqUrl,
                    dataType: "json",
                    data: JSON.stringify(inputData),
                }).done(function(response){
                    <%
                    // 그리드 데이터 예시 : 
                    // (1) 페이징 클라이언트에서 수행하는 경우(pageloading = false) : [{ "articleNo": 1, "articleType": "01" }, { "articleNo": 2, "articleType": "02" }]
                    // (2) 페이징 서버에서 수행하는 경우(pageloading = true) : {data: [{...}], itemsCount: 255}
                    %>
                    data.resolve(JSON.parse(response));
                });
                return data.promise();
            } // loadData
        },
        
          
        //======================================
        // 그리드 컬럼 정의  (각 요청에 맞게 조정)
        //======================================
        fields: [
            { title:"번호",   name: "articleNo"  , type: "number"  , width: 50, align: "center"},
            { title:"자료명",   name: "rentItem",      type: "text"  , width: 200, align: "center" },
            { title:"관리번호",  name: "ctrlNum",  type: "number", width: 50, align: "center" },
            { title:"저자",  name: "author",    type: "text", width: 100, align: "center"},
            { title:"출판사",  name: "publisher",    type: "text", width: 100, align: "center"},
            { title:"취소일자",  name: "rentDate",    type: "text", width: 100, align: "center"}
        ]
    });

    // 페이지 크기 변경시 재조회 
    $("#pageSize").on("change", function(e) {
        fn_search_article($("#pageSize").val(), 1);
    });

    // 검색 버튼 클릭 
    $("#btnSearch").on("click", function(e) {
        fn_search_article($("#pageSize").val(), 1);
    });
    
    //초기 자료 조회 
    fn_search_article();
    
}; // window.onload

// 그리드 데이터 조회 호출 
function fn_search_article(pageSize, pageIndex) {
    $("#jsGrid").jsGrid("search"
            , {'pageSize' : (pageSize  ? pageSize  : fn_getIntValue("pageSize", ${pageSize})), 
               'pageIndex': (pageIndex ? pageIndex : fn_getIntValue("pageIndex", 1))
               }
    );
}

</script>
</head>

<body>

<h1>${pageTitle }</h1>

<form name="articleForm" id="articleForm"  
      method="post"> 
    
    <!-- 검색조건 -->
    <select name="pageSize" id="pageSize" title="목록에 보여줄 글 개수">
        <c:forEach var="pageSizeItem" items="${pageSizeCodes}" varStatus="status">
           <option value="<c:out value="${pageSizeItem.code }" />" <c:if test="${pageSizeItem.code == pageSize }">selected</c:if> ><c:out value="${pageSizeItem.name }" /></option>
        </c:forEach>
    </select>
    
    <input type="text" name="pageIndex" id="pageIndex" title="페이지번호" value="${pageIndex }" size="5" maxlength="5" />
    <input type="text" name="searchKeyword" id="searchKeyword" title="검색어" value="${searchKeyword }" size="35" maxlength="50" />
    <input type="button" name="btnSearch" id="btnSearch" value="검색" />
         
    <div id="jsGrid" name="jsGrid" style="height: 100%"></div>
    <input type="text" name="articleNo" id="articleNo" value="" title="선택글번호" readonly />

</form>

</body>
</html>
