xit-app
/
IBMS_NEW
21
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

색상처리 백엔드 -> 프론트엔드 처리로 변경, 마스터 그리드 dataSource 에서 ajax 호출로 변경

Browse Source 
초기화 에러 수정, 그외 기타 수정
dev
박성영 2 months ago
parent b63580b0f9
commit 34092ada25
2 changed files with 150 additions and 141 deletions
Show Stats Download Patch File Download Diff File

63
src/main/java/go/kr/project/noti/service/impl/NotiServiceImpl.java
Unescape Escape View File

@ -9,7 +9,7 @@ import lombok.extern.slf4j.Slf4j;
import org.egovframe.rte.fdl.cmmn.EgovAbstractServiceImpl;
import org.springframework.stereotype.Service;
import java.util.*;
import java.util.List;
/**
@ -40,66 +40,7 @@ public class NotiServiceImpl extends EgovAbstractServiceImpl implements NotiServ
@Override
public List<NotiImpltInfoVO> selectImpltInfoList(NotiImpltInfoVO vo) {
List<NotiImpltInfoVO> list = mapper.selectImpltInfoList(vo);
// 중요로직: 같은 단속년도(crdnYr), 단속번호(crdnNo) 그룹별로 그리드 행에 CSS 클래스를 적용
applyRowColorByGroup(list);
return list;
}
/**
* 단속년도, 단속번호 그룹별로 행 색상 클래스 적용
* 중요한 로직 주석: 같은 단속년도와 단속번호를 가진 행들에게 그룹별로 다른 색상을 적용합니다.
* @param list 이행정보 목록
*/
private void applyRowColorByGroup(List<NotiImpltInfoVO> list) {
// 단속년도 + 단속번호 조합을 키로 하여 그룹 인덱스 매핑
Map<String, Integer> groupIndexMap = new LinkedHashMap<>();
int groupIndex = 0;
// 첫 번째 패스: 각 단속년도+단속번호 조합에 그룹 인덱스 할당
for (NotiImpltInfoVO item : list) {
if (item.getCrdnYr() != null && item.getCrdnNo() != null) {
String groupKey = item.getCrdnYr() + "-" + item.getCrdnNo();
if (!groupIndexMap.containsKey(groupKey)) {
groupIndexMap.put(groupKey, groupIndex++);
}
}
}
// 두 번째 패스: 각 항목에 _attributes 설정
for (NotiImpltInfoVO item : list) {
try {
if (item.getCrdnYr() != null && item.getCrdnNo() != null) {
String groupKey = item.getCrdnYr() + "-" + item.getCrdnNo();
Integer currentGroupIndex = groupIndexMap.get(groupKey);
if (currentGroupIndex != null) {
// TUI Grid _attributes 설정
Map<String, Object> attributes = new HashMap<>();
Map<String, Object> className = new HashMap<>();
List<String> rowClass = new ArrayList<>();
// 그룹 인덱스의 홀/짝에 따라 색상 클래스 적용
if (currentGroupIndex % 2 == 0) {
rowClass.add("tui-grid-custom-color-blue");
} else {
rowClass.add("tui-grid-custom-color-red");
}
className.put("row", rowClass);
attributes.put("className", className);
item.set_attributes(attributes);
}
}
} catch (Exception e) {
// 예외 발생 시 로그를 남기고 계속 진행
log.warn("Failed to apply row color for crdnYr: {}, crdnNo: {}",
item.getCrdnYr(), item.getCrdnNo(), e);
}
}
return mapper.selectImpltInfoList(vo);
}
// ==================== 이행 대상자 정보(TB_IMPLT_TRPR_INFO) 관련 메서드 ====================

228
src/main/webapp/WEB-INF/views/noti/list.jsp
Unescape Escape View File

@ -100,8 +100,14 @@
<script type="text/javascript">
/**
* 조사원 등록/조회 목록 관리 모듈
* 조사원 목록을 조회하고 관리하는 기능을 제공합니다.
* 이행정보 목록 관리 모듈
* 이행정보 목록을 조회하고 관리하는 기능을 제공합니다.
*
* 중요한 기능:
* - 같은 단속년도, 단속번호를 가진 행들은 그룹별로 색상으로 구분됩니다.
* - 그룹 인덱스가 짝수: 파란색 배경 (tui-grid-custom-color-blue)
* - 그룹 인덱스가 홀수: 빨간색 배경 (tui-grid-custom-color-red)
* - 색상 처리는 프론트엔드에서 데이터 로딩 후 _attributes를 통해 적용됩니다.
*/
(function(window, $) {
'use strict';
@ -115,6 +121,14 @@
perPage: 0
};
// 초기 검색 조건 값 (페이지 최초 로딩 시 값)
var INITIAL_SEARCH_VALUES = {
schCrdnYr: '${dateUtil:getCurrentDateTime("yyyy")}',
schImpltTaskSeCd: '',
schImpltBgngYmd1: '${dateUtil:getCurrentDateAddMonths("yyyy-MM-dd", -1)}',
schImpltBgngYmd2: '${dateUtil:getCurrentDateTime("yyyy-MM-dd")}'
};
// 검색정보 설정
var setMasterSearchCond = function() {
var schCrdnYr = $.trim(nvl($("#schCrdnYr").val(), ""));
@ -153,8 +167,6 @@
* @returns {Object} 그리드 설정 객체
*/
initConfig: function() {
// 데이터 소스 설정
var dataSource = this.createDataSource();
// 현재 선택된 perPage 값 가져오기
var perPage = parseInt($('#perPageSelect').val() || 10, 10);
@ -163,7 +175,6 @@
var gridConfig = new XitTuiGridConfig();
// 기본 설정
gridConfig.setOptDataSource(dataSource); // 데이터소스 연결
gridConfig.setOptGridId('masterGrid'); // 그리드를 출력할 Element ID
gridConfig.setOptGridHeight(170); // 그리드 높이(단위: px)
gridConfig.setOptRowHeight(30); // 그리드 행 높이(단위: px)
@ -281,31 +292,6 @@
];
},
/**
* 데이터 소스 생성
* @returns {Object} 데이터 소스 설정 객체
*/
createDataSource: function() {
return {
api: {
readData: {
url: '<c:url value="/noti/impltInfolist.ajax"/>',
method: 'POST',
contentType: 'application/x-www-form-urlencoded',
processData: true
}
},
initialRequest: false, // 초기 데이터 요청 여부
serializer: function(params) {
setMasterSearchCond();
SEARCH_MASTER_COND.perPage = params.perPage;
SEARCH_MASTER_COND.page = params.page;
var searchParams = $.param(SEARCH_MASTER_COND);
return searchParams;
}
};
},
/**
* 그리드 인스턴스 생성
*/
@ -320,63 +306,150 @@
this.gridBindEvents();
},
/**
* AJAX로 그리드 데이터 로드
* 중요로직: 데이터를 직접 가져와서 색상 _attributes를 적용한 후 그리드에 바인딩
* @param page 페이지 번호
*/
loadData: function(page) {
var self = this;
// 검색 조건 설정
setMasterSearchCond();
SEARCH_MASTER_COND.page = page || 1;
SEARCH_MASTER_COND.perPage = parseInt($('#perPageSelect').val() || 10, 10);
$.ajax({
url: '<c:url value="/noti/impltInfolist.ajax"/>',
type: 'POST',
data: SEARCH_MASTER_COND,
dataType: 'json',
success: function(response) {
if (response && response.success) {
var data = response.data || {};
var contents = data.contents || [];
var pagination = data.pagination || {};
// 중요로직: 색상 _attributes 적용
var processedData = self.applyRowColorToData(contents);
// 그리드에 데이터 설정
self.instance.resetData(processedData);
// 페이징 정보 업데이트
$("#currentPage").text(pagination.page || 1);
$("#totalPages").text(pagination.totalPages || 0);
$("#totalCount").text('총 ' + (pagination.totalCount || 0).toLocaleString() + '건');
// 페이징 정보 저장
GRID_PAGINATION_INFO.totalCount = pagination.totalCount || 0;
GRID_PAGINATION_INFO.page = pagination.page || 1;
GRID_PAGINATION_INFO.perPage = pagination.perPage || 10;
// 하단 그리드 초기화
NotiList.schImpltInfoId = '';
NotiList.selectedRow = null;
NotiList.detailGrid.instance.readData(1);
} else {
alert('데이터 조회에 실패했습니다.');
}
},
error: function(xhr, status, error) {
console.error('AJAX Error:', error);
alert('데이터 조회 중 오류가 발생했습니다.');
}
});
},
/**
* 단속년도, 단속번호 그룹별로 행 색상 _attributes 적용
* 중요한 로직 주석: 같은 단속년도와 단속번호를 가진 행들에게 그룹별로 다른 색상을 적용합니다.
* @param dataList 원본 데이터 배열
* @returns 색상 _attributes가 적용된 데이터 배열
*/
applyRowColorToData: function(dataList) {
// 단속년도 + 단속번호 조합을 키로 하여 그룹 인덱스 매핑
var groupIndexMap = {};
var groupIndex = 0;
// 첫 번째 패스: 각 단속년도+단속번호 조합에 그룹 인덱스 할당
for (var i = 0; i < dataList.length; i++) {
var item = dataList[i];
if (item.crdnYr && item.crdnNo) {
var groupKey = item.crdnYr + '-' + item.crdnNo;
if (!groupIndexMap[groupKey]) {
groupIndexMap[groupKey] = groupIndex++;
}
}
}
// 두 번째 패스: 각 항목에 _attributes 설정
for (var i = 0; i < dataList.length; i++) {
var item = dataList[i];
if (item.crdnYr && item.crdnNo) {
var groupKey = item.crdnYr + '-' + item.crdnNo;
var currentGroupIndex = groupIndexMap[groupKey];
if (currentGroupIndex !== undefined) {
// 그룹 인덱스의 홀/짝에 따라 색상 클래스 적용
var cssClass = (currentGroupIndex % 2 === 0)
? 'tui-grid-custom-color-blue'
: 'tui-grid-custom-color-red';
// TUI Grid _attributes 설정
item._attributes = {
className: {
row: [cssClass]
}
};
}
}
}
return dataList;
},
/**
* 그리드 이벤트 바인딩
*/
gridBindEvents: function() {
var self = this;
// 데이터 로딩 완료 이벤트 - 라디오 버튼 초기화
this.instance.on('successResponse', function(ev) {
var responseObj = JSON.parse(ev.xhr.response);
if( responseObj ){
$("#currentPage").text(responseObj.data.pagination.page);
$("#totalPages").text(responseObj.data.pagination.totalPages);
var totalCount = responseObj.data.pagination.totalCount;
$("#totalCount").text('총 ' + totalCount.toLocaleString() + '건');
// 페이징 정보를 전역 변수에 저장 (formatter에서 사용하기 위해)
GRID_PAGINATION_INFO.totalCount = responseObj.data.pagination.totalCount;
GRID_PAGINATION_INFO.page = responseObj.data.pagination.page;
GRID_PAGINATION_INFO.perPage = responseObj.data.pagination.perPage;
//하단 그리드 초기화
NotiList.schImpltInfoId = '';
NotiList.detailGrid.instance.readData(1);
}
// 페이지 변경 이벤트
this.instance.on('page', function(ev) {
self.loadData(ev.page);
});
this.instance.on('focusChange', function(ev) {
if (ev.rowKey === undefined) return;
var rowData = self.instance.getRow(ev.rowKey);
if (!rowData) return;
if (!rowData) return;
NotiList.selectedRow = self.instance.getRow(ev.rowKey);
NotiList.schImpltInfoId = rowData.impltInfoId;
NotiList.schActNo = rowData.actNo;
NotiList.detailGrid.instance.readData(1);
});
// 행 클릭 이벤트 - 라디오 버튼 즉시 체크를 위해 추가
// 행 클릭 이벤트
this.instance.on('click', function(ev) {
if (ev.rowKey !== undefined && ev.rowKey !== null) {
NotiList.selectedRow = self.instance.getRow(ev.rowKey);
}
});
// 행 더블클릭 이벤트 - detailView 페이지를 새 탭으로 열기
// 행 더블클릭 이벤트
this.instance.on('dblclick', function(ev) {
var rowKey = ev.rowKey;
var rowData = self.instance.getRow(rowKey);
if (rowData) {
//NotiList.openViewPopup(rowData.NotiId);
console.log(NotiList.selectedRow.crdnYr);
NotiList.openImpltTaskPopup(NotiList.selectedRow.crdnYr, NotiList.selectedRow.crdnNo, NotiList.selectedRow.impltTaskSeCd);
}
});
},
}
},
@ -407,11 +480,7 @@
}
});
},
detailGrid : {
/**
@ -539,8 +608,7 @@
*/
refreshList: function() {
if (this.masterGrid.instance) {
this.masterGrid.instance.readData(GRID_PAGINATION_INFO.page);
this.detailGrid.instance.readData(1);
this.masterGrid.loadData(GRID_PAGINATION_INFO.page);
}
},
@ -549,7 +617,7 @@
*/
eventBindEvents: function() {
var self = this;
// 수정 버튼 클릭 이벤트
$("#updaterBtn").on('click', function() {
// 선택된 행 확인
@ -557,27 +625,26 @@
alert('수정할 단속 건을 선택해주세요.');
return;
}
// 선택된 행의 데이터로 팝업 열기
NotiList.openImpltTaskPopup(NotiList.selectedRow.crdnYr, NotiList.selectedRow.crdnNo, NotiList.selectedRow.impltTaskSeCd);
});
});
// 검색 버튼 클릭 이벤트
$("#search_btn").on('click', function() {
self.masterGrid.instance.readData(1);
self.masterGrid.loadData(1);
});
// 초기화 버튼 클릭 이벤트
$("#reset_btn").on('click', function() {
// 모든 검색 조건 초기화
$("#schCrdnYr").val("");
$("#schImpltTaskSeCd").val("");
$("#schImpltBgngYmd1").val("");
$("#schImpltBgngYmd2").val("");
// 페이지 최초 로딩 시 값으로 검색 조건 초기화
$("#schCrdnYr").val(INITIAL_SEARCH_VALUES.schCrdnYr);
$("#schImpltTaskSeCd").val(INITIAL_SEARCH_VALUES.schImpltTaskSeCd);
$("#schImpltBgngYmd1").val(INITIAL_SEARCH_VALUES.schImpltBgngYmd1);
$("#schImpltBgngYmd2").val(INITIAL_SEARCH_VALUES.schImpltBgngYmd2);
// 그리드 데이터 새로고침
self.masterGrid.instance.readData(1);
self.detailGrid.instance.readData(1);
self.masterGrid.loadData(1);
});
// 엔터키 검색
@ -588,10 +655,9 @@
}
});
// perPage 변경 이벤트 추가
// perPage 변경 이벤트
$('#perPageSelect').on('change', function() {
var perPage = parseInt($(this).val(), 10);
self.masterGrid.instance.setPerPage(perPage);
self.masterGrid.loadData(1);
});
},
@ -599,7 +665,7 @@
* 모듈 초기화
*/
init: function() {
// 그리드 생성
this.masterGrid.create();
this.detailGrid.create();
@ -607,7 +673,9 @@
// 이벤트 핸들러 설정
this.eventBindEvents();
this.masterGrid.instance.readData(${param.page eq null or param.page eq 0 ? 1 : param.page});
// 초기 데이터 로드
var initialPage = ${param.page eq null or param.page eq 0 ? 1 : param.page};
this.masterGrid.loadData(initialPage);
}
};

Write Preview
Loading…
Cancel
Save