|
|
|
|
@ -70,89 +70,190 @@
|
|
|
|
|
(function(window, $) {
|
|
|
|
|
'use strict';
|
|
|
|
|
|
|
|
|
|
// 중요로직: 소유자 선택 그리드 관리 객체
|
|
|
|
|
var ownrSelectGrid = {
|
|
|
|
|
instance: null,
|
|
|
|
|
|
|
|
|
|
// 그리드 초기화
|
|
|
|
|
init: function() {
|
|
|
|
|
var gridConfig = new XitTuiGridConfig();
|
|
|
|
|
|
|
|
|
|
// 데이터 소스 설정
|
|
|
|
|
var dataSource = {
|
|
|
|
|
api: {
|
|
|
|
|
readData: {
|
|
|
|
|
url: '<c:url value="/crdn/crndRegistAndView/ownrSelect/list.ajax"/>',
|
|
|
|
|
method: 'POST',
|
|
|
|
|
contentType: 'application/x-www-form-urlencoded',
|
|
|
|
|
processData: true
|
|
|
|
|
/**
|
|
|
|
|
* 소유자 선택 팝업 관리 네임스페이스
|
|
|
|
|
*/
|
|
|
|
|
var OwnrSelectPopup = {
|
|
|
|
|
/**
|
|
|
|
|
* 그리드 관련 객체
|
|
|
|
|
*/
|
|
|
|
|
grid: {
|
|
|
|
|
/**
|
|
|
|
|
* 그리드 인스턴스
|
|
|
|
|
*/
|
|
|
|
|
instance: null,
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 그리드 설정 초기화
|
|
|
|
|
* @returns {Object} 그리드 설정 객체
|
|
|
|
|
*/
|
|
|
|
|
initConfig: function() {
|
|
|
|
|
// 데이터 소스 설정
|
|
|
|
|
var dataSource = this.createDataSource();
|
|
|
|
|
|
|
|
|
|
// 그리드 설정 객체 생성
|
|
|
|
|
var gridConfig = new XitTuiGridConfig();
|
|
|
|
|
|
|
|
|
|
// 기본 설정
|
|
|
|
|
gridConfig.setOptDataSource(dataSource); // 데이터소스 연결
|
|
|
|
|
gridConfig.setOptGridId('ownrSelectGrid'); // 그리드를 출력할 Element ID
|
|
|
|
|
gridConfig.setOptGridHeight(350); // 그리드 높이(단위: px)
|
|
|
|
|
gridConfig.setOptRowHeight(30); // 그리드 행 높이(단위: px)
|
|
|
|
|
gridConfig.setOptRowHeaderType('checkbox'); // 행 첫번째 셀 타입(checkbox: 체크박스)
|
|
|
|
|
gridConfig.setOptUseClientSort(true); // 클라이언트 사이드 정렬
|
|
|
|
|
gridConfig.setOptColumns(this.getGridColumns());
|
|
|
|
|
|
|
|
|
|
return gridConfig;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 그리드 컬럼 정의
|
|
|
|
|
* @returns {Array} 그리드 컬럼 배열
|
|
|
|
|
*/
|
|
|
|
|
getGridColumns: function() {
|
|
|
|
|
return [
|
|
|
|
|
{ header: '소유자ID', name: 'ownrId', align: 'center', width: 100, hidden: true },
|
|
|
|
|
{ header: '성명', name: 'flnm', align: 'center', width: 120, sortable: true },
|
|
|
|
|
{ header: '주민등록번호', name: 'rrno', align: 'center', width: 150 },
|
|
|
|
|
{ header: '소유자구분', name: 'ownrSeCdNm', align: 'center', width: 100 },
|
|
|
|
|
{ header: '전화번호', name: 'telno', align: 'center', width: 120 },
|
|
|
|
|
{ header: '이메일', name: 'eml', align: 'left', width: 200 },
|
|
|
|
|
{ header: '지번전체주소', name: 'lotnoWholAddr', align: 'left', width: 300 },
|
|
|
|
|
{ header: '도로명전체주소', name: 'roadNmWholAddr', align: 'left', width: 300 },
|
|
|
|
|
{ header: '우편번호', name: 'zip', align: 'center', width: 80 },
|
|
|
|
|
{ header: '비고', name: 'rmrk', align: 'left', width: 200 },
|
|
|
|
|
{ header: '등록일시', name: 'regDt', align: 'center', width: 150,
|
|
|
|
|
formatter: function (e) {
|
|
|
|
|
return e.value ? moment(e.value).format('YYYY-MM-DD HH:mm') : '';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
initialRequest: true,
|
|
|
|
|
serializer: function(params) {
|
|
|
|
|
// 기본 파라미터 (페이지 정보 등)
|
|
|
|
|
var defaultParams = $.param(params);
|
|
|
|
|
// 검색 조건 추가
|
|
|
|
|
var searchParams = $.param({
|
|
|
|
|
flnm: $('#searchFlnm').val() || '',
|
|
|
|
|
rrno: $('#searchRrno').val() || '',
|
|
|
|
|
telno: $('#searchTelno').val() || '',
|
|
|
|
|
eml: $('#searchEml').val() || ''
|
|
|
|
|
});
|
|
|
|
|
return defaultParams + '&' + searchParams;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 기본 설정
|
|
|
|
|
gridConfig.setOptDataSource(dataSource);
|
|
|
|
|
gridConfig.setOptGridId('ownrSelectGrid');
|
|
|
|
|
gridConfig.setOptGridHeight(350);
|
|
|
|
|
gridConfig.setOptRowHeight(30);
|
|
|
|
|
gridConfig.setOptRowHeaderType('checkbox');
|
|
|
|
|
gridConfig.setOptUseClientSort(true);
|
|
|
|
|
|
|
|
|
|
// 컬럼 설정 - TB_OWNR 테이블의 주요 컬럼들
|
|
|
|
|
gridConfig.setOptColumns([
|
|
|
|
|
{ header: '소유자ID', name: 'ownrId', align: 'center', width: 100, hidden: true },
|
|
|
|
|
{ header: '성명', name: 'flnm', align: 'center', width: 120, sortable: true },
|
|
|
|
|
{ header: '주민등록번호', name: 'rrno', align: 'center', width: 150 },
|
|
|
|
|
{ header: '소유자구분', name: 'ownrSeCdNm', align: 'center', width: 100 },
|
|
|
|
|
{ header: '전화번호', name: 'telno', align: 'center', width: 120 },
|
|
|
|
|
{ header: '이메일', name: 'eml', align: 'left', width: 200 },
|
|
|
|
|
{ header: '지번전체주소', name: 'lotnoWholAddr', align: 'left', width: 300 },
|
|
|
|
|
{ header: '도로명전체주소', name: 'roadNmWholAddr', align: 'left', width: 300 },
|
|
|
|
|
{ header: '우편번호', name: 'zip', align: 'center', width: 80 },
|
|
|
|
|
{ header: '비고', name: 'rmrk', align: 'left', width: 200 },
|
|
|
|
|
{ header: '등록일시', name: 'regDt', align: 'center', width: 150,
|
|
|
|
|
formatter: function (e) {
|
|
|
|
|
return e.value ? moment(e.value).format('YYYY-MM-DD HH:mm') : '';
|
|
|
|
|
];
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 데이터 소스 생성
|
|
|
|
|
* @returns {Object} 데이터 소스 설정 객체
|
|
|
|
|
*/
|
|
|
|
|
createDataSource: function() {
|
|
|
|
|
return {
|
|
|
|
|
api: {
|
|
|
|
|
readData: {
|
|
|
|
|
url: '<c:url value="/crdn/crndRegistAndView/ownrSelect/list.ajax"/>',
|
|
|
|
|
method: 'POST',
|
|
|
|
|
contentType: 'application/x-www-form-urlencoded',
|
|
|
|
|
processData: true
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
initialRequest: true, // 초기 데이터 요청 여부
|
|
|
|
|
serializer: function(params) {
|
|
|
|
|
// 기본 파라미터 (페이지 정보 등)
|
|
|
|
|
var defaultParams = $.param(params);
|
|
|
|
|
// 검색 조건 추가
|
|
|
|
|
var searchParams = $.param({
|
|
|
|
|
flnm: $('#searchFlnm').val() || '',
|
|
|
|
|
rrno: $('#searchRrno').val() || '',
|
|
|
|
|
telno: $('#searchTelno').val() || '',
|
|
|
|
|
eml: $('#searchEml').val() || ''
|
|
|
|
|
});
|
|
|
|
|
return defaultParams + '&' + searchParams;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
this.instance = gridConfig.instance(tui.Grid);
|
|
|
|
|
tui.Grid.applyTheme('striped');
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 그리드 인스턴스 생성
|
|
|
|
|
*/
|
|
|
|
|
create: function() {
|
|
|
|
|
var gridConfig = this.initConfig();
|
|
|
|
|
var Grid = tui.Grid;
|
|
|
|
|
this.instance = gridConfig.instance(Grid);
|
|
|
|
|
|
|
|
|
|
// 그리드 테마 설정
|
|
|
|
|
Grid.applyTheme('striped');
|
|
|
|
|
|
|
|
|
|
this.gridBindEvents();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 그리드 이벤트 바인딩
|
|
|
|
|
*/
|
|
|
|
|
gridBindEvents: function() {
|
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
|
|
// 행 더블클릭 시 선택
|
|
|
|
|
this.instance.on('dblclick', function(ev) {
|
|
|
|
|
var rowData = self.instance.getRow(ev.rowKey);
|
|
|
|
|
if (rowData) {
|
|
|
|
|
OwnrSelectPopup.selectOwners([rowData]);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 체크된 행들 가져오기
|
|
|
|
|
*/
|
|
|
|
|
getCheckedRows: function() {
|
|
|
|
|
return this.instance ? this.instance.getCheckedRows() : [];
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 모듈 초기화
|
|
|
|
|
*/
|
|
|
|
|
init: function() {
|
|
|
|
|
// 그리드 생성
|
|
|
|
|
this.grid.create();
|
|
|
|
|
this.bindEvents();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 그리드 이벤트 바인딩
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 이벤트 바인딩
|
|
|
|
|
*/
|
|
|
|
|
bindEvents: function() {
|
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
|
|
// 행 더블클릭 시 선택
|
|
|
|
|
this.instance.on('dblclick', function(ev) {
|
|
|
|
|
var rowData = self.instance.getRow(ev.rowKey);
|
|
|
|
|
if (rowData) {
|
|
|
|
|
self.selectOwners([rowData]);
|
|
|
|
|
// 검색 버튼 클릭 이벤트
|
|
|
|
|
$('#searchBtn').on('click', function() {
|
|
|
|
|
self.search();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 초기화 버튼 클릭 이벤트
|
|
|
|
|
$('#resetBtn').on('click', function() {
|
|
|
|
|
$('#searchForm')[0].reset();
|
|
|
|
|
self.search();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 선택 버튼 클릭 이벤트
|
|
|
|
|
$('#selectBtn').on('click', function() {
|
|
|
|
|
var checkedRows = self.grid.getCheckedRows();
|
|
|
|
|
if (checkedRows.length === 0) {
|
|
|
|
|
alert('선택할 소유자를 체크해주세요.');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
self.selectOwners(checkedRows);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 닫기 버튼 클릭 이벤트
|
|
|
|
|
$('#closeBtn, #btnCloseTop').on('click', function(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
window.close();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Enter 키로 검색
|
|
|
|
|
$('#searchForm input').on('keypress', function(e) {
|
|
|
|
|
if (e.which === 13) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
$('#searchBtn').click();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 검색
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 검색 함수
|
|
|
|
|
*/
|
|
|
|
|
search: function() {
|
|
|
|
|
if (this.instance) {
|
|
|
|
|
this.instance.readData();
|
|
|
|
|
if (this.grid.instance) {
|
|
|
|
|
this.grid.instance.readData();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
@ -269,45 +370,14 @@
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// DOM 준비 완료 시 초기화
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
|
// 중요로직: 소유자 선택 그리드 초기화
|
|
|
|
|
ownrSelectGrid.init();
|
|
|
|
|
|
|
|
|
|
// 검색 버튼 클릭 이벤트
|
|
|
|
|
$('#searchBtn').on('click', function() {
|
|
|
|
|
ownrSelectGrid.search();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 초기화 버튼 클릭 이벤트
|
|
|
|
|
$('#resetBtn').on('click', function() {
|
|
|
|
|
$('#searchForm')[0].reset();
|
|
|
|
|
ownrSelectGrid.search();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 선택 버튼 클릭 이벤트
|
|
|
|
|
$('#selectBtn').on('click', function() {
|
|
|
|
|
var checkedRows = ownrSelectGrid.getCheckedRows();
|
|
|
|
|
if (checkedRows.length === 0) {
|
|
|
|
|
alert('선택할 소유자를 체크해주세요.');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
ownrSelectGrid.selectOwners(checkedRows);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 닫기 버튼 클릭 이벤트
|
|
|
|
|
$('#closeBtn, #btnCloseTop').on('click', function(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
window.close();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Enter 키로 검색
|
|
|
|
|
$('#searchForm input').on('keypress', function(e) {
|
|
|
|
|
if (e.which === 13) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
$('#searchBtn').click();
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
OwnrSelectPopup.init();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 전역 네임스페이스에 모듈 노출
|
|
|
|
|
window.OwnrSelectPopup = OwnrSelectPopup;
|
|
|
|
|
|
|
|
|
|
})(window, jQuery);
|
|
|
|
|
</script>
|
박성영
4 months ago