|
|
|
|
@ -63,7 +63,13 @@
|
|
|
|
|
<ul class="box_title" style="display: flex; justify-content: space-between; align-items: center;">
|
|
|
|
|
<li class="tit">단속 목록</li>
|
|
|
|
|
<li style="text-align: right;">
|
|
|
|
|
<span id="totalCount" class="total-count">총 0건</span>
|
|
|
|
|
<span id="totalCount" class="total-count" style="padding-right: 25px;">총 0건</span>
|
|
|
|
|
<select id="perPageSelect" class="input" style="width: 112px; ">
|
|
|
|
|
<option value="15">페이지당 15</option>
|
|
|
|
|
<option value="50">페이지당 50</option>
|
|
|
|
|
<option value="100">페이지당 100</option>
|
|
|
|
|
</select>
|
|
|
|
|
<span class="page_number"><span id="currentPage"></span><span class="bar">/</span><span id="totalPages"></span> Pages</span>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<div class="containers">
|
|
|
|
|
@ -128,17 +134,26 @@
|
|
|
|
|
// 데이터 소스 설정
|
|
|
|
|
var dataSource = this.createDataSource();
|
|
|
|
|
|
|
|
|
|
// 현재 선택된 perPage 값 가져오기
|
|
|
|
|
var perPage = parseInt($('#perPageSelect').val() || 15, 10);
|
|
|
|
|
|
|
|
|
|
// 그리드 설정 객체 생성
|
|
|
|
|
var gridConfig = new XitTuiGridConfig();
|
|
|
|
|
|
|
|
|
|
// 기본 설정
|
|
|
|
|
gridConfig.setOptDataSource(dataSource); // 데이터소스 연결
|
|
|
|
|
gridConfig.setOptGridId('grid'); // 그리드를 출력할 Element ID
|
|
|
|
|
gridConfig.setOptGridHeight(550); // 그리드 높이(단위: px)
|
|
|
|
|
gridConfig.setOptGridHeight(470); // 그리드 높이(단위: px)
|
|
|
|
|
gridConfig.setOptRowHeight(30); // 그리드 행 높이(단위: px)
|
|
|
|
|
gridConfig.setOptRowHeaderType('rowNum'); // 행 첫번째 셀 타입(rowNum: 순번, checkbox: 체크박스, '': 출력 안함)
|
|
|
|
|
gridConfig.setOptUseClientSort(true); // 서버사이드 정렬 false
|
|
|
|
|
|
|
|
|
|
// 페이징 옵션 설정
|
|
|
|
|
gridConfig.setOptPageOptions({
|
|
|
|
|
useClient: true, // 클라이언트 페이징 여부(false: 서버 페이징)
|
|
|
|
|
perPage: perPage // 페이지당 표시 건수
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
gridConfig.setOptColumns(this.getGridColumns());
|
|
|
|
|
|
|
|
|
|
return gridConfig;
|
|
|
|
|
@ -182,8 +197,8 @@
|
|
|
|
|
name: 'dsclYmd',
|
|
|
|
|
align: 'center',
|
|
|
|
|
width: 100,
|
|
|
|
|
formatter: function(e) {
|
|
|
|
|
return e.value ? formatDate(e.value, 'YYYY-MM-DD') : '';
|
|
|
|
|
formatter: function (e) {
|
|
|
|
|
return e.value ? moment(e.value).format('YYYY-MM-DD') : '';
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
@ -209,7 +224,7 @@
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
header: '등록자',
|
|
|
|
|
name: 'rgtr',
|
|
|
|
|
name: 'rgtrNm',
|
|
|
|
|
align: 'center',
|
|
|
|
|
width: 100
|
|
|
|
|
}
|
|
|
|
|
@ -281,14 +296,37 @@
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 데이터 로드 완료 이벤트
|
|
|
|
|
this.instance.on('successResponse', function(ev) {
|
|
|
|
|
var responseObj = JSON.parse(ev.xhr.response);
|
|
|
|
|
if (responseObj && responseObj.pagination) {
|
|
|
|
|
var totalCount = responseObj.pagination.totalCount || 0;
|
|
|
|
|
// 페이지 변경 이벤트 - 페이지 이동 버튼 클릭 시 현재 페이지 업데이트
|
|
|
|
|
this.instance.on('afterPageMove', function(ev) {
|
|
|
|
|
self.updatePageInfo();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 데이터 로드 완료 후 페이지 정보 업데이트
|
|
|
|
|
this.updatePageInfo();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 페이지 정보 업데이트, 클라이언트 사이드 페이징
|
|
|
|
|
*/
|
|
|
|
|
updatePageInfo: function() {
|
|
|
|
|
var self = this;
|
|
|
|
|
// 약간의 딜레이를 두어 데이터 로딩이 완료된 후 실행
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
try {
|
|
|
|
|
var totalCount = self.instance.getData().length || 0;
|
|
|
|
|
$("#totalCount").text('총 ' + totalCount.toLocaleString() + '건');
|
|
|
|
|
var perPage = parseInt($('#perPageSelect').val() || 15);
|
|
|
|
|
var totalPages = Math.ceil(totalCount / perPage);
|
|
|
|
|
var pagination = self.instance.getPagination();
|
|
|
|
|
if (pagination) {
|
|
|
|
|
var currentPage = pagination.getCurrentPage();
|
|
|
|
|
$("#currentPage").text(currentPage);
|
|
|
|
|
$("#totalPages").text(totalPages);
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.log('페이지 정보 업데이트 중 오류:', e);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}, 50);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
@ -323,7 +361,11 @@
|
|
|
|
|
|
|
|
|
|
// 검색 버튼 클릭 이벤트
|
|
|
|
|
$("#search_btn").on('click', function() {
|
|
|
|
|
self.grid.instance.readData();
|
|
|
|
|
self.grid.instance.readData(1);
|
|
|
|
|
// 검색 후 페이지 정보 업데이트
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
self.grid.updatePageInfo();
|
|
|
|
|
}, 200);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 등록 버튼 클릭 이벤트
|
|
|
|
|
@ -338,6 +380,17 @@
|
|
|
|
|
$("#search_btn").trigger('click');
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// perPage 변경 이벤트 추가
|
|
|
|
|
$('#perPageSelect').on('change', function() {
|
|
|
|
|
var perPage = parseInt($(this).val(), 10);
|
|
|
|
|
// Grid의 perPage 설정 변경 및 데이터 리로드
|
|
|
|
|
self.grid.instance.setPerPage(perPage);
|
|
|
|
|
// perPage 변경 후 페이지 정보 업데이트
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
self.grid.updatePageInfo();
|
|
|
|
|
}, 200);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
|
박성영
4 months ago