부과제외, 의견제출, 단속재등록 관리 페이지 table 열 넓이 조정.

main
jjh 1 year ago
parent dd6aa937a8
commit c3a17d9a5e

@ -184,65 +184,69 @@
<!-- DataTables(그리드) --> <!-- DataTables(그리드) -->
<div class="card-datatable text-nowrap"> <div class="card-datatable text-nowrap">
<div id="DataTables_Table_0_wrapper--${pageName}" class="dataTables_wrapper dt-bootstrap5 no-footer"> <div class="dataTables_wrapper dt-bootstrap5 no-footer" id="DataTables_Table_0_wrapper--${pageName}">
<div id="table-responsive--${pageName}" class="table-responsive" style="overflow-x:scroll; height:400px; overflow-y:scroll;" > <div class="table-responsive" id="table-responsive--${pageName}" style="overflow-x:scroll; height:480px; overflow-y:scroll;" >
<table class="dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--${pageName}" aria-describedby="DataTables_Table_0_info"> <table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--${pageName}" aria-describedby="DataTables_Table_0_info">
<thead> <thead class="sticky-thead">
<tr id="theadTr--${pageName}" <tr id="theadTr--${pageName}"
data-by="by--${pageName}" data-by-output="byOutput--${pageName}" data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}"> data-by="by--${pageName}" data-by-output="byOutput--${pageName}" data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
<th class="sorting" style="width: 24px;">NO.</th> <th class="cmn" style="width: 72px;">NO.</th>
<th class="sorting" style="width: 24px;"> <th class="cmn" style="width: 56px;">
<input type="checkbox" class="form-check-input" onchange="${pageName}Control.select(this.checked);"> <input type="checkbox" class="form-check-input" onchange="${pageName}Control.select(this.checked);">
</th> </th>
<th onclick="searchFromGridTitle('LEVY_EXCL_YMD', this.innerText, 'ymd', '');">부과제외일자</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('LEVY_EXCL_YMD', this.innerText, 'ymd', '');">부과제외일자</th>
<th onclick="searchFromGridTitle('LEVY_EXCL_SE_NM', this.innerText, 'codeValue', 'FIM021');">부과제외구분명</th> <th class="cmn" style="width: 160px;" onclick="searchFromGridTitle('LEVY_EXCL_SE_NM', this.innerText, 'codeValue', 'FIM021');">부과제외구분명</th>
<th onclick="searchFromGridTitle('LEVY_EXCL_RSN_NM', this.innerText, 'codeValue', 'FIM022');">부과제외사유</th> <th class="cmn" style="width: 200px;" onclick="searchFromGridTitle('LEVY_EXCL_RSN_NM', this.innerText, 'codeValue', 'FIM022');">부과제외사유</th>
<th onclick="searchFromGridTitle('ETC_CN', this.innerText, 'match', 'part');">기타내용</th> <th class="cmn" style="width: 280px;" onclick="searchFromGridTitle('ETC_CN', this.innerText, 'match', 'part');">기타내용</th>
<th onclick="searchFromGridTitle('CVLCPT_RCPT_NO', this.innerText, 'match', 'part');">민원접수번호</th> <th class="cmn" style="width: 180px;" onclick="searchFromGridTitle('CVLCPT_RCPT_NO', this.innerText, 'match', 'part');">민원접수번호</th>
<th onclick="searchFromGridTitle('CVLCPT_RCPT_YMD', this.innerText, 'ymd', '');">민원접수일자</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('CVLCPT_RCPT_YMD', this.innerText, 'ymd', '');">민원접수일자</th>
<th onclick="searchFromGridTitle('CRDN_YMD', this.innerText, 'ymd', '');">단속일시</th> <th class="cmn" style="width: 180px;" onclick="searchFromGridTitle('CRDN_YMD', this.innerText, 'ymd', '');">단속일시</th>
<th onclick="searchFromGridTitle('VHRNO', this.innerText, 'match', 'part');">차량번호</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('VHRNO', this.innerText, 'match', 'part');">차량번호</th>
<th onclick="searchFromGridTitle('CRDN_STDG_NM', this.innerText, 'match', 'part');">법정동</th> <th class="cmn" style="width: 160px;" onclick="searchFromGridTitle('CRDN_STDG_NM', this.innerText, 'match', 'part');">법정동</th>
<th onclick="searchFromGridTitle('CRDN_PLC', this.innerText, 'match', 'part');">단속장소</th> <th class="cmn" style="width: 280px;" onclick="searchFromGridTitle('CRDN_PLC', this.innerText, 'match', 'part');">단속장소</th>
<th onclick="searchFromGridTitle('CRDN_STTS_NM', this.innerText, 'codeValue', 'FIM010');">처리상태명</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('FFNLG_AMT', this.innerText, 'match', 'part');">단속금액</th>
<th onclick="searchFromGridTitle('RTPYR_NM', this.innerText, 'match', 'part');">납부자명</th> <th class="cmn" style="width: 160px;" onclick="searchFromGridTitle('CRDN_STTS_NM', this.innerText, 'codeValue', 'FIM010');">처리상태명</th>
<th onclick="searchFromGridTitle('RTPYR_BRDT', this.innerText, 'ymd', '');">납부자생일</th> <th class="cmn" style="width: 180px;" onclick="searchFromGridTitle('RTPYR_NM', this.innerText, 'match', 'part');">납부자명</th>
<th>등록일시</th> <th class="cmn" style="width: 120px;" onclick="searchFromGridTitle('RTPYR_BRDT', this.innerText, 'ymd', '');">납부자생일</th>
<th>등록사용자</th> <th class="cmn" style="width: 180px;">등록일시</th>
<th>수정일시</th> <th class="cmn" style="width: 140px;">등록사용자</th>
<th>수정사용자</th> <th class="cmn" style="width: 180px;">수정일시</th>
<th class="cmn" style="width: 140px;">수정사용자</th>
<th class="cmn dummy-th"></th>
</tr> </tr>
</thead> </thead>
<tbody id="tbody--${pageName}"> <tbody id="tbody--${pageName}">
</tbody> </tbody>
<template id="${infoPrefix}Row--${pageName}"> <template id="${infoPrefix}Row--${pageName}">
<tr data-key="{LEVY_EXCL_ID}"> <tr data-key="{LEVY_EXCL_ID}">
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ROW_NUM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ROW_NUM}</td>
<td class="text-center"> <td class="cmn text-center">
<input type="checkbox" class="form-check-input" value="{LEVY_EXCL_ID}" onchange="${pageName}Control.select('{LEVY_EXCL_ID}', this.checked);"> <input type="checkbox" class="form-check-input" value="{LEVY_EXCL_ID}" onchange="${pageName}Control.select('{LEVY_EXCL_ID}', this.checked);">
</td> </td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{LEVY_EXCL_YMD}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{LEVY_EXCL_YMD}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{LEVY_EXCL_SE_NM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{LEVY_EXCL_SE_NM}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{LEVY_EXCL_RSN_NM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{LEVY_EXCL_RSN_NM}</td>
<td class="text-start" onclick="{onclick}" ondblclick="{ondblclick}">{ETC_CN}</td> <td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{ETC_CN}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CVLCPT_RCPT_NO}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CVLCPT_RCPT_NO}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CVLCPT_RCPT_YMD}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CVLCPT_RCPT_YMD}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_YMD_TM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_YMD_TM}</td>
<td class="text-start" onclick="{onclick}" ondblclick="{ondblclick}">{VHRNO}</td> <td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{VHRNO}</td>
<td class="text-start" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_STDG_NM}</td> <td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_STDG_NM}</td>
<td class="text-start" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_PLC}</td> <td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_PLC}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_STTS_NM}</td> <td class="cmn text-end" onclick="{onclick}" ondblclick="{ondblclick}">{FFNLG_CRDN_AMT}</td>
<td class="text-start" onclick="{onclick}" ondblclick="{ondblclick}">{RTPYR_NM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_STTS_NM}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RTPYR_BRDT_FORMAT}</td> <td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{RTPYR_NM}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{REG_DT}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RTPYR_BRDT_FORMAT}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RGTR_NM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{REG_DT}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{MDFCN_DT}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RGTR_NM}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{MDFR_NM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{MDFCN_DT}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{MDFR_NM}</td>
<td class="cmn dummy-td"></td>
</tr> </tr>
</template> </template>
<template id="${infoPrefix}NotFound--${pageName}"> <template id="${infoPrefix}NotFound--${pageName}">
<tr class="odd"> <tr class="odd">
<td valign="top" colspan="19" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td> <td valign="top" colspan="21" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
</tr> </tr>
</template> </template>
</table> </table>
@ -280,6 +284,7 @@
, keymapper : info => info ? info.LEVY_EXCL_ID : "" , keymapper : info => info ? info.LEVY_EXCL_ID : ""
, dataGetter : obj => obj.levyExclList , dataGetter : obj => obj.levyExclList
, appendData : true , appendData : true
, tableRenderComplete : false // dataTables 에 자료 추가 완료 여부
// , urls : { // , urls : {
// load : wctx.url(${pageName}PrefixUrl + "/010/list.do") // 검색 // load : wctx.url(${pageName}PrefixUrl + "/010/list.do") // 검색
// , remove : wctx.url(${pageName}PrefixUrl + "/010/removes.do") // 선택(체크) 자료 삭제 // , remove : wctx.url(${pageName}PrefixUrl + "/010/removes.do") // 선택(체크) 자료 삭제
@ -289,6 +294,7 @@
LEVY_EXCL_YMD : dateFormat LEVY_EXCL_YMD : dateFormat
, CRDN_YMD_TM : datetimeFormat , CRDN_YMD_TM : datetimeFormat
, CVLCPT_RCPT_YMD : dateFormat , CVLCPT_RCPT_YMD : dateFormat
, FFNLG_CRDN_AMT : numberFormat
, REG_DT : datetimeFormat , REG_DT : datetimeFormat
, MDFCN_DT : datetimeFormat , MDFCN_DT : datetimeFormat
} }
@ -309,6 +315,8 @@
, fetchSize : obj.${infoPrefix}Fetch , fetchSize : obj.${infoPrefix}Fetch
, func : "${pageName}Control.load({index})" , func : "${pageName}Control.load({index})"
}); });
${pageName}Control.tableRenderComplete = true; // dataTables 에 자료 추가 완료
}; };
// 현재 선택 자료 변경 이벤트 // 현재 선택 자료 변경 이벤트
@ -432,6 +440,10 @@
${pageName}Control.urls.load = wctx.url("/" + taskSeCd + ${pageName}PrefixUrl + "/010/list.do"); // 조회 ${pageName}Control.urls.load = wctx.url("/" + taskSeCd + ${pageName}PrefixUrl + "/010/list.do"); // 조회
${pageName}Control.urls.remove = wctx.url("/" + taskSeCd + ${pageName}PrefixUrl + "/010/removes.do"); // 삭제 ${pageName}Control.urls.remove = wctx.url("/" + taskSeCd + ${pageName}PrefixUrl + "/010/removes.do"); // 삭제
${pageName}Control.urls.getInfo = wctx.url("/" + taskSeCd + "/sprt/sprt02/010/main.do"); // 개별총정보 ${pageName}Control.urls.getInfo = wctx.url("/" + taskSeCd + "/sprt/sprt02/010/main.do"); // 개별총정보
// 업무별 그리드가 존재 한다면.. crdn06010-main.jsp 참고
// $("#DataTables_Table_0--${pageName}").find("th").resizable( "destroy" );
// $("#DataTables_Table_0--${pageName}").find("th").resizable( {handles : "e"} ); // style="width" 변경 조정
} }
// 검색 조건 파라미터 가져오기 // 검색 조건 파라미터 가져오기
@ -494,13 +506,19 @@
}); });
}); });
// DataTables width 변경 조정
$("#DataTables_Table_0--${pageName}").find("th").resizable( {handles : "e"} );
// DataTables 스크롤 이벤트 // DataTables 스크롤 이벤트
$("#table-responsive--${pageName}").scroll(function(obj) { $("#table-responsive--${pageName}").scroll(function() {
let el = $(this); let el = $(this);
if (el.scrollTop() == 0) { if (el.scrollTop() == 0) {
return; return;
} }
if (!${pageName}Control.tableRenderComplete) {
return;
}
let itemsCnt = ${pageName}Control.dataset._items.length; let itemsCnt = ${pageName}Control.dataset._items.length;
let totCnt = ${pageName}Control.dataset.getValue("TOT_CNT"); // let totCnt = ${pageName}Control.dataset.getCurrent("item").data.TOT_CNT; let totCnt = ${pageName}Control.dataset.getValue("TOT_CNT"); // let totCnt = ${pageName}Control.dataset.getCurrent("item").data.TOT_CNT;
@ -510,6 +528,8 @@
} }
if ((el[0].scrollHeight - el.scrollTop() + VERTICAL_SCROLL_HEIGHT) <= el.outerHeight()) { if ((el[0].scrollHeight - el.scrollTop() + VERTICAL_SCROLL_HEIGHT) <= el.outerHeight()) {
${pageName}Control.tableRenderComplete = false; // dataTables 에 자료 추가 완료
${pageName}Control.load(${pageName}Control.query.pageNum + 1); ${pageName}Control.load(${pageName}Control.query.pageNum + 1);
} }
}); });

@ -188,73 +188,77 @@
<!-- DataTables(그리드) --> <!-- DataTables(그리드) -->
<div class="card-datatable text-nowrap"> <div class="card-datatable text-nowrap">
<div id="DataTables_Table_0_wrapper--${pageName}" class="dataTables_wrapper dt-bootstrap5 no-footer"> <div class="dataTables_wrapper dt-bootstrap5 no-footer" id="DataTables_Table_0_wrapper--${pageName}">
<div id="table-responsive--${pageName}" class="table-responsive" style="overflow-x:scroll; height:400px; overflow-y:scroll;" > <div class="table-responsive" id="table-responsive--${pageName}" style="overflow-x:scroll; height:400px; overflow-y:scroll;" >
<table class="dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--${pageName}" aria-describedby="DataTables_Table_0_info"> <table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--${pageName}" aria-describedby="DataTables_Table_0_info">
<thead> <thead class="sticky-thead">
<tr id="theadTr--${pageName}" <tr id="theadTr--${pageName}"
data-by="by--${pageName}" data-by-output="byOutput--${pageName}" data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}"> data-by="by--${pageName}" data-by-output="byOutput--${pageName}" data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
<th class="sorting" style="width: 24px;">NO.</th> <th class="cmn" style="width: 72px;">NO.</th>
<th class="sorting" style="width: 24px;"> <th class="cmn" style="width: 56px;">
<input type="checkbox" class="form-check-input" onchange="${pageName}Control.select(this.checked);"> <input type="checkbox" class="form-check-input" onchange="${pageName}Control.select(this.checked);">
</th> </th>
<th onclick="searchFromGridTitle('RCPT_YMD', this.innerText, 'ymd', '');">접수일자</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('RCPT_YMD', this.innerText, 'ymd', '');">접수일자</th>
<th onclick="searchFromGridTitle('RCPT_NO', this.innerText, 'match', 'part');">접수번호</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('RCPT_NO', this.innerText, 'match', 'part');">접수번호</th>
<th onclick="searchFromGridTitle('RCPT_SE_NM', this.innerText, 'codeValue', 'FIM029');">접수구분명</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('RCPT_SE_NM', this.innerText, 'codeValue', 'FIM029');">접수구분명</th>
<th onclick="searchFromGridTitle('NTFCTN_SE_NM', this.innerText, 'codeValue', 'FIM030');">통보구분명</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('NTFCTN_SE_NM', this.innerText, 'codeValue', 'FIM030');">통보구분명</th>
<th onclick="searchFromGridTitle('STTR_NM', this.innerText, 'match', 'part');">진술자명</th> <th class="cmn" style="width: 160px;" onclick="searchFromGridTitle('STTR_NM', this.innerText, 'match', 'part');">진술자명</th>
<th onclick="searchFromGridTitle('OPNN_SBMSN_STTS_NM', this.innerText, 'codeValue', 'FIM031');">의견제출상태</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('OPNN_SBMSN_STTS_NM', this.innerText, 'codeValue', 'FIM031');">의견제출상태</th>
<th onclick="searchFromGridTitle('OPNN_SBMSN_SE_NM', this.innerText, 'codeValue', 'FIM033');">의견제출분류</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('OPNN_SBMSN_SE_NM', this.innerText, 'codeValue', 'FIM033');">의견제출분류</th>
<th onclick="searchFromGridTitle('OPNN_SBMSN_GIST', this.innerText, 'match', 'part');">의견제출요지</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('OPNN_SBMSN_GIST', this.innerText, 'match', 'part');">의견제출요지</th>
<th onclick="searchFromGridTitle('CRDN_YMD', this.innerText, 'ymd', '');">단속일시</th> <th class="cmn" style="width: 180px;" onclick="searchFromGridTitle('CRDN_YMD', this.innerText, 'ymd', '');">단속일시</th>
<th onclick="searchFromGridTitle('VHRNO', this.innerText, 'match', 'part');">차량번호</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('VHRNO', this.innerText, 'match', 'part');">차량번호</th>
<th onclick="searchFromGridTitle('CRDN_PLC', this.innerText, 'match', 'part');">단속장소</th> <th class="cmn" style="width: 280px;" onclick="searchFromGridTitle('CRDN_PLC', this.innerText, 'match', 'part');">단속장소</th>
<th onclick="searchFromGridTitle('CRDN_STTS_NM', this.innerText, 'codeValue', 'FIM010');">처리상태명</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('FFNLG_AMT', this.innerText, 'match', 'part');">단속금액</th>
<th onclick="searchFromGridTitle('DOC_NO', this.innerText, 'ymd', '');">문서번호</th> <th class="cmn" style="width: 160px;" onclick="searchFromGridTitle('CRDN_STTS_NM', this.innerText, 'codeValue', 'FIM010');">처리상태명</th>
<th onclick="searchFromGridTitle('ANS_YMD', this.innerText, 'ymd', '');">답변일자</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('DOC_NO', this.innerText, 'ymd', '');">문서번호</th>
<th onclick="searchFromGridTitle('ANS_CN', this.innerText, 'match', 'part');">답변내용</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('ANS_YMD', this.innerText, 'ymd', '');">답변일자</th>
<th onclick="searchFromGridTitle('RTPYR_NM', this.innerText, 'match', 'part');">납부자명</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('ANS_CN', this.innerText, 'match', 'part');">답변내용</th>
<th onclick="searchFromGridTitle('RTPYR_BRDT', this.innerText, 'ymd', '');">납부자생일</th> <th class="cmn" style="width: 180px;" onclick="searchFromGridTitle('RTPYR_NM', this.innerText, 'match', 'part');">납부자명</th>
<th>등록일시</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('RTPYR_BRDT', this.innerText, 'ymd', '');">납부자생일</th>
<th>등록사용자</th> <th class="cmn" style="width: 180px;">등록일시</th>
<th>수정일시</th> <th class="cmn" style="width: 140px;">등록사용자</th>
<th>수정사용자</th> <th class="cmn" style="width: 180px;">수정일시</th>
<th class="cmn" style="width: 140px;">수정사용자</th>
<th class="cmn dummy-th"></th>
</tr> </tr>
</thead> </thead>
<tbody id="tbody--${pageName}"> <tbody id="tbody--${pageName}">
</tbody> </tbody>
<template id="${infoPrefix}Row--${pageName}"> <template id="${infoPrefix}Row--${pageName}">
<tr data-key="{OPNN_ID}"> <tr data-key="{OPNN_ID}">
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ROW_NUM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ROW_NUM}</td>
<td class="text-center"> <td class="cmn text-center">
<input type="checkbox" class="form-check-input" value="{OPNN_ID}" onchange="${pageName}Control.select('{OPNN_ID}', this.checked);"> <input type="checkbox" class="form-check-input" value="{OPNN_ID}" onchange="${pageName}Control.select('{OPNN_ID}', this.checked);">
</td> </td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RCPT_YMD}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RCPT_YMD}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RCPT_NO}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RCPT_NO}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RCPT_SE_NM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RCPT_SE_NM}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{NTFCTN_SE_NM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{NTFCTN_SE_NM}</td>
<td class="text-start" onclick="{onclick}" ondblclick="{ondblclick}">{STTR_NM}</td> <td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{STTR_NM}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{OPNN_SBMSN_STTS_NM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{OPNN_SBMSN_STTS_NM}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{OPNN_SBMSN_SE_NM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{OPNN_SBMSN_SE_NM}</td>
<td class="text-start" onclick="{onclick}" ondblclick="{ondblclick}">{OPNN_SBMSN_GIST}</td> <td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{OPNN_SBMSN_GIST}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_YMD_TM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_YMD_TM}</td>
<td class="text-start" onclick="{onclick}" ondblclick="{ondblclick}">{VHRNO}</td> <td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{VHRNO}</td>
<td class="text-start" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_PLC}</td> <td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_PLC}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_STTS_NM}</td> <td class="cmn text-end" onclick="{onclick}" ondblclick="{ondblclick}">{FFNLG_CRDN_AMT}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{DOC_NO}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_STTS_NM}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ANS_YMD}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{DOC_NO}</td>
<td class="text-start" onclick="{onclick}" ondblclick="{ondblclick}">{ANS_CN}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ANS_YMD}</td>
<td class="text-start" onclick="{onclick}" ondblclick="{ondblclick}">{RTPYR_NM}</td> <td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{ANS_CN}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RTPYR_BRDT_FORMAT}</td> <td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{RTPYR_NM}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{REG_DT}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RTPYR_BRDT_FORMAT}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RGTR_NM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{REG_DT}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{MDFCN_DT}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RGTR_NM}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{MDFR_NM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{MDFCN_DT}</td>
<td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{MDFR_NM}</td>
<td class="cmn dummy-td"></td>
</tr> </tr>
</template> </template>
<template id="${infoPrefix}NotFound--${pageName}"> <template id="${infoPrefix}NotFound--${pageName}">
<tr class="odd"> <tr class="odd">
<td valign="top" colspan="23" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td> <td valign="top" colspan="25" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
</tr> </tr>
</template> </template>
</table> </table>
@ -293,11 +297,13 @@
, keymapper : info => info ? info.OPNN_ID : "" , keymapper : info => info ? info.OPNN_ID : ""
, dataGetter : obj => obj.opnnSbmsnList , dataGetter : obj => obj.opnnSbmsnList
, appendData : true , appendData : true
, tableRenderComplete : false // dataTables 에 자료 추가 완료 여부
, formats : { , formats : {
RCPT_YMD : dateFormat RCPT_YMD : dateFormat
, ANS_YMD : dateFormat , ANS_YMD : dateFormat
, ANS_YMD_TM : datetimeFormat , ANS_YMD_TM : datetimeFormat
, CRDN_YMD_TM : datetimeFormat , CRDN_YMD_TM : datetimeFormat
, FFNLG_CRDN_AMT : numberFormat
, REG_DT : datetimeFormat , REG_DT : datetimeFormat
, MDFCN_DT : datetimeFormat , MDFCN_DT : datetimeFormat
} }
@ -318,6 +324,8 @@
, fetchSize : obj.${infoPrefix}Fetch , fetchSize : obj.${infoPrefix}Fetch
, func : "${pageName}Control.load({index})" , func : "${pageName}Control.load({index})"
}); });
${pageName}Control.tableRenderComplete = true; // dataTables 에 자료 추가 완료
}; };
// 현재 선택 자료 변경 이벤트 // 현재 선택 자료 변경 이벤트
@ -513,13 +521,19 @@
}); });
}); });
// DataTables width 변경 조정
$("#DataTables_Table_0--${pageName}").find("th").resizable( {handles : "e"} );
// DataTables 스크롤 이벤트 // DataTables 스크롤 이벤트
$("#table-responsive--${pageName}").scroll(function(obj) { $("#table-responsive--${pageName}").scroll(function() {
let el = $(this); let el = $(this);
if (el.scrollTop() == 0) { if (el.scrollTop() == 0) {
return; return;
} }
if (!${pageName}Control.tableRenderComplete) {
return;
}
let itemsCnt = ${pageName}Control.dataset._items.length; let itemsCnt = ${pageName}Control.dataset._items.length;
let totCnt = ${pageName}Control.dataset.getValue("TOT_CNT"); let totCnt = ${pageName}Control.dataset.getValue("TOT_CNT");
@ -529,6 +543,8 @@
} }
if ((el[0].scrollHeight - el.scrollTop() + VERTICAL_SCROLL_HEIGHT) <= el.outerHeight()) { if ((el[0].scrollHeight - el.scrollTop() + VERTICAL_SCROLL_HEIGHT) <= el.outerHeight()) {
${pageName}Control.tableRenderComplete = false; // dataTables 에 자료 추가 완료
${pageName}Control.load(${pageName}Control.query.pageNum + 1); ${pageName}Control.load(${pageName}Control.query.pageNum + 1);
} }
}); });

@ -149,53 +149,55 @@
<!-- DataTables(그리드) --> <!-- DataTables(그리드) -->
<div class="card-datatable text-nowrap"> <div class="card-datatable text-nowrap">
<div id="DataTables_Table_0_wrapper--${pageName}" class="dataTables_wrapper dt-bootstrap5 no-footer"> <div class="dataTables_wrapper dt-bootstrap5 no-footer" id="DataTables_Table_0_wrapper--${pageName}">
<div id="table-responsive--${pageName}" class="table-responsive" style="overflow-x:scroll; height:400px; overflow-y:scroll;" > <div class="table-responsive" id="table-responsive--${pageName}" style="overflow-x:scroll; height:400px; overflow-y:scroll;" >
<table class="dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--${pageName}" aria-describedby="DataTables_Table_0_info"> <table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" id="DataTables_Table_0--${pageName}" aria-describedby="DataTables_Table_0_info">
<thead> <thead class="sticky-thead">
<tr id="theadTr--${pageName}" <tr id="theadTr--${pageName}"
data-by="by--${pageName}" data-by-output="byOutput--${pageName}" data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}"> data-by="by--${pageName}" data-by-output="byOutput--${pageName}" data-main-option="mainOption--${pageName}" data-sub-option="subOption--${pageName}">
<th class="sorting" style="width: 24px;">NO.</th> <th class="cmn" style="width: 72px;">NO.</th>
<th class="sorting" style="width: 24px;"> <th class="cmn" style="width: 56px;">
<input type="checkbox" class="form-check-input" onchange="${pageName}Control.select(this.checked);"> <input type="checkbox" class="form-check-input" onchange="${pageName}Control.select(this.checked);">
</th> </th>
<th onclick="searchFromGridTitle('RE_REG_YMD', this.innerText, 'ymd', '');">재등록일자</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('RE_REG_YMD', this.innerText, 'ymd', '');">재등록일자</th>
<th onclick="searchFromGridTitle('CRDN_REG_SE_NM', this.innerText, 'codeValue', 'FIM026');">단속등록구분명</th> <th class="cmn" style="width: 160px;" onclick="searchFromGridTitle('CRDN_REG_SE_NM', this.innerText, 'codeValue', 'FIM026');">단속등록구분명</th>
<th onclick="searchFromGridTitle('ETC_CN', this.innerText, 'match', 'part');">기타내용</th> <th class="cmn" style="width: 280px;" onclick="searchFromGridTitle('ETC_CN', this.innerText, 'match', 'part');">기타내용</th>
<th onclick="searchFromGridTitle('CRDN_YMD', this.innerText, 'ymd', '');">단속일시</th> <th class="cmn" style="width: 180px;" onclick="searchFromGridTitle('CRDN_YMD', this.innerText, 'ymd', '');">단속일시</th>
<th onclick="searchFromGridTitle('VHRNO', this.innerText, 'match', 'part');">차량번호</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('VHRNO', this.innerText, 'match', 'part');">차량번호</th>
<th onclick="searchFromGridTitle('CRDN_STDG_NM', this.innerText, 'match', 'part');">법정동</th> <th class="cmn" style="width: 160px;" onclick="searchFromGridTitle('CRDN_STDG_NM', this.innerText, 'match', 'part');">법정동</th>
<th onclick="searchFromGridTitle('CRDN_PLC', this.innerText, 'match', 'part');">단속장소</th> <th class="cmn" style="width: 280px;" onclick="searchFromGridTitle('CRDN_PLC', this.innerText, 'match', 'part');">단속장소</th>
<th onclick="searchFromGridTitle('FFNLG_AMT', this.innerText, 'match', 'part');">과태료단속금액</th> <th class="cmn" style="width: 140px;" onclick="searchFromGridTitle('FFNLG_AMT', this.innerText, 'match', 'part');">단속금액</th>
<th onclick="searchFromGridTitle('CRDN_STTS_NM', this.innerText, 'codeValue', 'FIM010');">처리상태명</th> <th class="cmn" style="width: 160px;" onclick="searchFromGridTitle('CRDN_STTS_NM', this.innerText, 'codeValue', 'FIM010');">처리상태명</th>
<th>등록일시</th> <th class="cmn" style="width: 180px;">등록일시</th>
<th>등록사용자</th> <th class="cmn" style="width: 140px;">등록사용자</th>
<th class="cmn dummy-th"></th>
</tr> </tr>
</thead> </thead>
<tbody id="tbody--${pageName}"> <tbody id="tbody--${pageName}">
</tbody> </tbody>
<template id="${infoPrefix}Row--${pageName}"> <template id="${infoPrefix}Row--${pageName}">
<tr data-key="{RE_REG_ID}"> <tr data-key="{RE_REG_ID}">
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ROW_NUM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ROW_NUM}</td>
<td class="text-center"> <td class="cmn text-center">
<input type="checkbox" class="form-check-input" value="{RE_REG_ID}" onchange="${pageName}Control.select('{RE_REG_ID}', this.checked);"> <input type="checkbox" class="form-check-input" value="{RE_REG_ID}" onchange="${pageName}Control.select('{RE_REG_ID}', this.checked);">
</td> </td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RE_REG_YMD}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RE_REG_YMD}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_REG_SE_NM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_REG_SE_NM}</td>
<td class="text-start" onclick="{onclick}" ondblclick="{ondblclick}">{ETC_CN}</td> <td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{ETC_CN}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_YMD_TM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_YMD_TM}</td>
<td class="text-start" onclick="{onclick}" ondblclick="{ondblclick}">{VHRNO}</td> <td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{VHRNO}</td>
<td class="text-start" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_STDG_NM}</td> <td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_STDG_NM}</td>
<td class="text-start" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_PLC}</td> <td class="cmn text-start" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_PLC}</td>
<td class="text-end" onclick="{onclick}" ondblclick="{ondblclick}">{FFNLG_CRDN_AMT}</td> <td class="cmn text-end" onclick="{onclick}" ondblclick="{ondblclick}">{FFNLG_CRDN_AMT}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_STTS_NM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{CRDN_STTS_NM}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{REG_DT}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{REG_DT}</td>
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RGTR_NM}</td> <td class="cmn text-center" onclick="{onclick}" ondblclick="{ondblclick}">{RGTR_NM}</td>
<td class="cmn dummy-td"></td>
</tr> </tr>
</template> </template>
<template id="${infoPrefix}NotFound--${pageName}"> <template id="${infoPrefix}NotFound--${pageName}">
<tr class="odd"> <tr class="odd">
<td valign="top" colspan="13" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td> <td valign="top" colspan="14" class="dataTables_empty text-center">${prefixName} 정보를 찾지 못했습니다.</td>
</tr> </tr>
</template> </template>
</table> </table>
@ -234,6 +236,7 @@
, keymapper : info => info ? info.RE_REG_ID : "" , keymapper : info => info ? info.RE_REG_ID : ""
, dataGetter : obj => obj.crdnReRegList , dataGetter : obj => obj.crdnReRegList
, appendData : true , appendData : true
, tableRenderComplete : false // dataTables 에 자료 추가 완료 여부
, urls : { , urls : {
load : wctx.url(${pageName}PrefixUrl + "/010/list.do") // 검색 load : wctx.url(${pageName}PrefixUrl + "/010/list.do") // 검색
, create : wctx.url(${pageName}PrefixUrl + "/010/create.do") // 신규 등록 , create : wctx.url(${pageName}PrefixUrl + "/010/create.do") // 신규 등록
@ -261,6 +264,8 @@
, fetchSize : obj.${infoPrefix}Fetch , fetchSize : obj.${infoPrefix}Fetch
, func : "${pageName}Control.load({index})" , func : "${pageName}Control.load({index})"
}); });
${pageName}Control.tableRenderComplete = true; // dataTables 에 자료 추가 완료
}; };
// 현재 선택 자료 변경 이벤트 // 현재 선택 자료 변경 이벤트
@ -396,13 +401,19 @@
}); });
}); });
// DataTables width 변경 조정
$("#DataTables_Table_0--${pageName}").find("th").resizable( {handles : "e"} );
// DataTables 스크롤 이벤트 // DataTables 스크롤 이벤트
$("#table-responsive--${pageName}").scroll(function(obj) { $("#table-responsive--${pageName}").scroll(function() {
let el = $(this); let el = $(this);
if (el.scrollTop() == 0) { if (el.scrollTop() == 0) {
return; return;
} }
if (!${pageName}Control.tableRenderComplete) {
return;
}
let itemsCnt = ${pageName}Control.dataset._items.length; let itemsCnt = ${pageName}Control.dataset._items.length;
let totCnt = ${pageName}Control.dataset.getValue("TOT_CNT"); let totCnt = ${pageName}Control.dataset.getValue("TOT_CNT");
@ -412,6 +423,8 @@
} }
if ((el[0].scrollHeight - el.scrollTop() + VERTICAL_SCROLL_HEIGHT) <= el.outerHeight()) { if ((el[0].scrollHeight - el.scrollTop() + VERTICAL_SCROLL_HEIGHT) <= el.outerHeight()) {
${pageName}Control.tableRenderComplete = false; // dataTables 에 자료 추가 완료
${pageName}Control.load(${pageName}Control.query.pageNum + 1); ${pageName}Control.load(${pageName}Control.query.pageNum + 1);
} }
}); });

Loading…
Cancel
Save