somang4819/itsm_ysm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
KNKIM 2021-07-27 11:36:24 +09:00
parent 979d7361bd
commit 304b7ace54
9 changed files with 183 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
data/dataxml/uac.service.board.qna.list_GET.xml
View File

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

19
src/main/java/nlib/bbs/web/BoardController.java
View File

@ -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 pageSize = paramMap.get("pageSize");
String pageIndex = StringUtil.getString(paramMap.get("pageIndex"), "1");
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 pageSize = paramMap.get("pageSize");
String pageIndex = StringUtil.getString(paramMap.get("pageIndex"), "1");
String pageSize = StringUtil.getString(paramMap.get("pageSize") , DEFUALT_PAGE_SIZE);
log.debug("listQnAsAjax > pageIndex = " + pageIndex);
log.debug("listQnAsAjax > pageSize = " + pageSize);
@ -144,12 +145,8 @@ 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);

2
src/main/java/nlib/restful/service/XmlConverter.java
View File

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

2
src/main/java/nlib/restful/service/impl/DataApiTempXml.java
View File

@ -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);

11
src/main/java/nlib/util/StringUtil.java
View File

@ -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를 리턴한다.
*

6
src/main/resources/nlib/nlib.properties
View File

@ -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
#----------------------------------------

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

@ -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>

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

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

20
src/main/webapp/js/nlib.js
View File

@ -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;
}
}