목록 JSGRID 페이징 처리관련 커스터마이징 작업 완료

data/dataxml/uac.service.board.qna.list_GET.xml

@@ -6,72 +6,72 @@
     <records>125</records>
     <results>
         <articleNo>1</articleNo>
-        <articleType>101</articleType>
+        <title>질문있습니다.</title>
-        <title>공지사항 테스트</title>
+        <writerName>김길동</writerName>
-        <readCount>15</readCount>
+        <replyStatus>답변완료</replyStatus>
         <regDate>2021-07-19</regDate>
     </results>
     <results>
         <articleNo>2</articleNo>
-        <articleType>101</articleType>
+        <title>질문있습니다.</title>
-        <title>공지사항 테스트</title>
+        <writerName>김길동</writerName>
-        <readCount>55</readCount>
+        <replyStatus>답변완료</replyStatus>
         <regDate>2021-07-19</regDate>
     </results>
     <results>
         <articleNo>3</articleNo>
-        <articleType>101</articleType>
+        <title>질문있습니다.</title>
-        <title>공지사항 테스트</title>
+        <writerName>김길동</writerName>
-        <readCount>55</readCount>
+        <replyStatus>답변완료</replyStatus>
         <regDate>2021-07-19</regDate>
     </results>
     <results>
         <articleNo>4</articleNo>
-        <articleType>101</articleType>
+        <title>질문있습니다.</title>
-        <title>공지사항 테스트</title>
+        <writerName>김길동</writerName>
-        <readCount>55</readCount>
+        <replyStatus>대기</replyStatus>
         <regDate>2021-07-19</regDate>
     </results>
     <results>
         <articleNo>5</articleNo>
-        <articleType>101</articleType>
+        <title>질문있습니다.</title>
-        <title>공지사항 테스트</title>
+        <writerName>김길동</writerName>
-        <readCount>55</readCount>
+        <replyStatus>대기</replyStatus>
         <regDate>2021-07-19</regDate>
     </results>
     <results>
         <articleNo>6</articleNo>
-        <articleType>101</articleType>
+        <title>질문있습니다.</title>
-        <title>공지사항 테스트</title>
+        <writerName>김길동</writerName>
-        <readCount>55</readCount>
+        <replyStatus>답변완료</replyStatus>
         <regDate>2021-07-19</regDate>
     </results>
     <results>
         <articleNo>7</articleNo>
-        <articleType>101</articleType>
+        <title>질문있습니다.</title>
-        <title>공지사항 테스트</title>
+        <writerName>김길동</writerName>
-        <readCount>55</readCount>
+        <replyStatus>답변완료</replyStatus>
         <regDate>2021-07-19</regDate>
     </results>
     <results>
         <articleNo>8</articleNo>
-        <articleType>101</articleType>
+        <title>질문있습니다.</title>
-        <title>공지사항 테스트</title>
+        <writerName>김길동</writerName>
-        <readCount>55</readCount>
+        <replyStatus>답변완료</replyStatus>
         <regDate>2021-07-19</regDate>
     </results>
     <results>
         <articleNo>9</articleNo>
-        <articleType>101</articleType>
+        <title>질문있습니다.</title>
-        <title>공지사항 테스트</title>
+        <writerName>김길동</writerName>
-        <readCount>55</readCount>
+        <replyStatus>답변완료</replyStatus>
         <regDate>2021-07-19</regDate>
     </results>
     <results>
         <articleNo>10</articleNo>
-        <articleType>101</articleType>
+        <title>질문있습니다.</title>
-        <title>공지사항 테스트</title>
+        <writerName>김길동</writerName>
-        <readCount>55</readCount>
+        <replyStatus>답변완료</replyStatus>
         <regDate>2021-07-19</regDate>
     </results>
 </result>

src/main/java/nlib/bbs/web/BoardController.java

@@ -24,6 +24,7 @@ import nlib.cmm.NlibCommonController;
 import nlib.cmm.crypto.AriaCrypto;
 import nlib.cmm.crypto.NlibPasswordEncoder;
 import nlib.cmm.service.CodeService;
+import nlib.cmm.service.NlibProperty;
 import nlib.restful.service.DataApiReqVO;
 import nlib.restful.service.DataApiResVO;
 import nlib.user.service.NlibLoginVO;
@@ -34,6 +35,8 @@ public class BoardController extends NlibCommonController
 {
 	private static final Logger log = LoggerFactory.getLogger(BoardController.class);
 	
+	static final String DEFUALT_PAGE_SIZE = NlibProperty.getProperty("list.paging.page.size");
+	
 	@Resource(name = "boardService")
 	private BoardService boardService;
 	
@@ -94,8 +97,8 @@ public class BoardController extends NlibCommonController
 	public String listQnAs(HttpServletRequest req, Authentication authentication, @RequestParam Map<String, String> paramMap, ModelMap model)  {
 
 		String searchKeyword = paramMap.get("searchKeyword");
-		String pageIndex     = paramMap.get("pageIndex");
+		String pageIndex = StringUtil.getString(paramMap.get("pageIndex"), "1");
-		String pageSize      = paramMap.get("pageSize");
+		String pageSize  = StringUtil.getString(paramMap.get("pageSize") , DEFUALT_PAGE_SIZE);
 
 		log.debug("listQnAs > pageIndex = " + pageIndex);
 		log.debug("listQnAs > pageSize = " + pageSize);
@@ -112,9 +115,7 @@ public class BoardController extends NlibCommonController
     	model.addAttribute("pageIndex"    , pageIndex);
     	model.addAttribute("pageSize"     , pageSize);
     	model.addAttribute("searchKeyword", searchKeyword);
-    	
     	model.addAttribute("pageSizeCodes", resVOforPageSize.getList());
-    	//log.debug("listQnAs > pageSizeCodes : " + resVOforPageSize.getList());
     	
 		return "nlib/board/listQnAs";
 	}
@@ -130,8 +131,8 @@ public class BoardController extends NlibCommonController
 			Authentication authentication, @RequestBody Map<String, String> paramMap)  {
 
 		String searchKeyword = paramMap.get("searchKeyword");
-		String pageIndex = paramMap.get("pageIndex");
+		String pageIndex = StringUtil.getString(paramMap.get("pageIndex"), "1");
-		String pageSize = paramMap.get("pageSize");
+		String pageSize  = StringUtil.getString(paramMap.get("pageSize") , DEFUALT_PAGE_SIZE);
 		
 		log.debug("listQnAsAjax > pageIndex = " + pageIndex);
 		log.debug("listQnAsAjax > pageSize = " + pageSize);
@@ -144,11 +145,7 @@ public class BoardController extends NlibCommonController
     	reqVO.setAuthKey(createAuthKey(req, authentication));
     	reqVO.setPageIndex(pageIndex);
     	reqVO.setPageSize(pageSize);
-
+    	reqVO.addInfoItem("searchKeyword", searchKeyword);
-    	// 추가 정보 설정 
-    	HashMap<String, Object> info = new HashMap<String, Object>();
-    	info.put("searchKeyword", searchKeyword);
-    	reqVO.setInfo(info);
 
     	// 요청 
     	DataApiResVO resVO = boardService.listQnAs(reqVO);

src/main/java/nlib/restful/service/XmlConverter.java

@@ -119,7 +119,7 @@ public class XmlConverter {
 					}
 					
 					addValue(retMap, elementName, elementValue);
-					System.out.println(elementName + " : -" + elementValue + "_");
+					//log.debug(elementName + " : -" + elementValue + "_");
 					
 					elementName = null;
 					elementValue = "";

src/main/java/nlib/restful/service/impl/DataApiTempXml.java

@@ -129,7 +129,7 @@ public class DataApiTempXml implements DataApiInterface {
         	//-----------------------------------
     	    HttpStatus statusCode = HttpStatus.OK; 
     	    String resultXML = getTempDataFromXmlFile(reqVO, method);
-    	    log.debug("RES resultXML : " + resultXML);
+    	    //log.debug("RES resultXML : " + resultXML);
     	    
     	    // 응답 자료 객체화 
     		resVO = DataApiInterface.convertXmlToResVO(resultXML);

src/main/java/nlib/util/StringUtil.java

@@ -40,6 +40,17 @@ public class StringUtil extends EgovStringUtil {
 		return str == null || str.trim().length() == 0;
 	}
 	
+	/**
+	 * Null 이거나, 빈문자열(공백 포함)인 경우, true를 리턴한다.
+	 * 
+	 * @param str
+	 * @return
+	 */
+	public static String getString(String str, String replaceStr) {
+		if(isEmpty(str)) return replaceStr;
+		else return str;
+	}
+	
 	/**
 	 * Null이 아니고 빈문자열(공백 포함)이 아닌 일반 문자가 존재하는 , true를 리턴한다.
 	 * 

src/main/resources/nlib/nlib.properties

@@ -34,6 +34,12 @@ dataapi.temp.xml.path = C:/iams/workspace/nlib/data/dataxml
 crypto.aria.defaultKey = TheFederationOfKoreaCultureCenter027042322
 
 
+#----------------------------------------
+# \ubaa9\ub85d \ud398\uc774\uc9d5 
+#----------------------------------------
+list.paging.page.size = 10
+
+
 #----------------------------------------
 # \ucca8\ubd80\ud30c\uc77c \uacbd\ub85c \uc815\ubcf4 
 #----------------------------------------

src/main/webapp/WEB-INF/jsp/nlib/board/listQnAs.jsp

@@ -43,9 +43,114 @@
 <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}/board/listQnAsAjax.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
+	    },
+	    
+	    rowClick: function(args) { // 행 클릭 시, 실행되는 이벤트 함수 
+	        
+	        // 클릭된 행의 자료 객체 
+	        var getData = args.item;
+	        
+	        // 추출할 컬럼의 데이터 가져오기 
+	        var articleNo = getData["articleNo"];
+	        
+	        // 상세 내용 보기 
+	        fn_view_detail(articleNo);
+	    },
+	      
+	    //======================================
+	    // 그리드 컬럼 정의  (각 요청에 맞게 조정)
+	    //======================================
+	    fields: [
+	        { title:"번호",   name: "articleNo"  , type: "number"  , width: 50, align: "center"},
+	        { title:"제목",   name: "title",      type: "text"  , width: 200, align: "left" },
+	        { title:"작성자",  name: "writerName",  type: "number", width: 50, align: "center" },
+	        { title:"등록일",  name: "regDate",    type: "text", width: 100, align: "center"},
+            { title:"상태",   name: "replyStatus", type: "text", width: 80, 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_view_detail(articleNo) {
+    $("#articleNo").val(articleNo);
+    $("#articleForm").attr("action", "${pageContext.request.contextPath}/board/selectQnA.do");
+    $("#articleForm").submit();
+}
+
+// 그리드 데이터 조회 호출 
+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 onload="fn_init()">
+<body>
 
 <h1>${pageTitle }</h1>
 
@@ -74,131 +179,5 @@
 
 </form>
 
-
-
-<script type="text/javaScript" language="javascript">
-
-//=======================================================
-// 그리드내 선택옵션 코드값 설정 : 공지사항 유형 코드 (각 요청에 맞게 조정)
-//=======================================================
-var articleTypes = [
-    { Name: "공지" , Id: "01" },
-    { Name: "자료" , Id: "02" },
-    { Name: "모집" , Id: "03" },
-    { Name: "입찰" , Id: "04" },
-    { Name: "발표" , Id: "05" },
-    { Name: "이벤트", Id: "06" }
-];
-
-//=======================================================
-// 그리드 생성 환경설정 
-//=======================================================
-$("#jsGrid").jsGrid({
-	
-	/*autoload: true,  화면로드된 후, 자동 loadData 처리 여부 */ 
-    autoload: false,
-    pageSize : $("#pageSize").val(),
-    controller: {
-        loadData: function (filter) {
-        	
-            var data = $.Deferred();
-
-            //======================================
-            // 요청 정보 구성 : 시작  (각 요청에 맞게 조정)
-            //======================================
-            var reqUrl = "${pageContext.request.contextPath}/board/listQnAsAjax.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());
-			
-			var inputData = {
-			          "searchKeyword" : searchKeyword /*encodeURIComponent(searchKeyword)*/
-			        , "pageIndex" : pageIndex
-			        , "pageSize": pageSize};
-			
-			console.log(JSON.stringify(inputData));
-			console.log(JSON.stringify(filter));
-			
-			$("#pageIndex").val(pageIndex);
-			
-            //--------------------------------------
-            // 요청 처리 
-            //--------------------------------------
-			$.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
-    },
-    
-    rowClick: function(args) {
-    	
-    	// 클릭된 행의 자료 객체 
-        var getData = args.item;
-        
-        // 추출할 컬럼의 데이터 가져오기 
-        var articleNo = getData["articleNo"];
-        
-        // 상세 내용 보기 
-        fn_view_detail(articleNo);
-        
-      },
-      
-    //======================================
-    // 그리드 컬럼 정의  (각 요청에 맞게 조정)
-    //======================================
-    fields: [
-        { title:"번호",   name: "articleNo"  , type: "number"  , width: 50, align: "center"},
-        { title:"유형",   name: "articleType", type: "select", width: 80, align: "center", items: articleTypes, valueField: "Id", textField: "Name" },
-        { title:"제목",   name: "title",      type: "text"  , width: 200, align: "left" },
-        { title:"조회수",  name: "readCount",  type: "number", width: 50, align: "center" },
-        { title:"등록일",  name: "regDate",    type: "text", width: 100, align: "center"}
-    ]
-});
-
-$("#pageSize").on("change", function(e) {
-	//$("#jsGrid").jsGrid("search", {'pageIndex':1,'pageSize':e.target.value});
-	$("#pageIndex").val("1");
-	fn_search_article();
-});
-
-$("#btnSearch").on("click", function(e) {
-	fn_search_article();
-});
-
-// 선택한 게시글 상세 보기로 이동
-function fn_view_detail(articleNo) {
-	$("#articleNo").val(articleNo);
-	$("#articleForm").attr("action", "${pageContext.request.contextPath}/board/selectQnA.do");
-	$("#articleForm").submit();
-}
-
-function fn_search_article(pageSize, pageIndex) {
-	console.log("fn_search_article 1 : param > " + pageSize + ", " + pageIndex);
-	console.log("fn_search_article 2 : recalc > " + (pageSize ? pageSize : $("#pageSize").val()) + ", " + (pageIndex ? pageIndex : $("#pageIndex").val()));
-	$("#jsGrid").jsGrid("search"
-			, {'pageSize':(pageSize ? pageSize : $("#pageSize").val()), 
-		       'pageIndex':(pageIndex ? pageIndex : $("#pageIndex").val())
-		      }
-    );
-}
-
-function fn_init() {
-	$("#jsGrid").jsGrid("search", {'pageIndex':$("#pageIndex").val(),'pageSize':$("#pageSize").val()});
-}
-
-</script>
-
 </body>
 </html>

src/main/webapp/WEB-INF/jsp/nlib/board/selectQnA.jsp

@@ -148,7 +148,7 @@ function fn_updateForm(passwd) {
 
 // 게시글 수정 화면으로 이동 
 function fn_updatePassword() {
-	fn_prompt_password("비밀번호를 입력하여 주시기 바랍니다.", "fn_updateForm")
+	fn_promptPassword("비밀번호를 입력하여 주시기 바랍니다.", "fn_updateForm")
 }
 
 </script>

src/main/webapp/js/nlib.js

@@ -8,7 +8,7 @@
 
 
 // 팝업으로 비밀번호를 입력받아서 콜백함수에 전달한다.
-function fn_prompt_password(msg, callbackFucName) {
+function fn_promptPassword(msg, callbackFucName) {
 	var thePrompt = window.open("", "_NLIB_POMPT_PASSWORD", "widht=100, height=100");
     var theHTML = "";
 
@@ -23,3 +23,21 @@ function fn_prompt_password(msg, callbackFucName) {
     thePrompt.document.body.innerHTML = theHTML;
 }
 
+/**
+ * ID를 name 으로 하는 객체의 값을 숫자(10진수)로 변환하여 리턴한다. 
+ * 값이 적절하지 않은 경우, defaultValue를 리턴한다.
+ * 
+ * @param name
+ * @param defaultValue
+ * @returns
+ */
+function fn_getIntValue(name, defaultValue) {
+	var val = $("#" + name).val();
+	try {
+		return parseInt(val, 10);
+	} catch(error) {
+		console.error(error);
+		return defaultValue;
+	}
+}
+