그리드 제목 클릭시 동적 조회조건 변경하는 기능 추가

main
이범준 1 year ago
parent f09fc1172c
commit 3c841292c3

@ -89,9 +89,7 @@
<div id="searchDetail" class="container-search container-search-detail collapse"> <div id="searchDetail" class="container-search container-search-detail collapse">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<span class="me-5">동적 조회조건</span> <span class="me-5">상세조회조건</span>
<label class="form-label fw-bold form-search-title">클릭한 항목</label>
<input type="text" id="" name="" class="form-control" value="" />
</div> </div>
</div> </div>
</div> </div>

@ -44,20 +44,14 @@
</select> </select>
</div> </div>
<div class="col-12"> <div class="col-12">
<label class="form-label fw-bold form-search-title">자료상태</label> <label class="form-label fw-bold form-search-title">차량번호</label>
<select id="crdnSttsCd--${pageName}" name="crdnSttsCd" class="form-select"> <input type="text" id="vhrno--${pageName}" name="vhrno" class="form-control" />
<option value="">전체</option> </div>
<c:forEach items="${FIM010List}" var="item"> <div class="col-12">
<option value="${item.code}">${item.value}</option> <input type="hidden" id="by--${pageName}" name="by" />
</c:forEach> <input type="text" id="byOutput--${pageName}" class="form-control" readonly value="동적 검색" />
</select> <input type="text" id="term--${pageName}" name="term" class="form-control" />
<span class="flr">
<select id="schOpt--${pageName}" name="schOpt" class="form-select">
<option value="vhrno">차량번호</option>
</select>
<input type="text" id="schWord--${pageName}" name="schWord" class="form-control" value="" />
<span class="flr">
<button type="button" class="btn btn-open-detail btn-sm" data-bs-toggle="collapse" data-bs-target="#searchDetail"> <button type="button" class="btn btn-open-detail btn-sm" data-bs-toggle="collapse" data-bs-target="#searchDetail">
<i class="bx bx-chevron-down"></i> <i class="bx bx-chevron-down"></i>
상세조회조건 상세조회조건
@ -74,9 +68,7 @@
<div id="searchDetail" class="container-search container-search-detail collapse"> <div id="searchDetail" class="container-search container-search-detail collapse">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<span class="me-5">동적 조회조건</span> <span class="me-5">상세조회 조건</span>
<label class="form-label fw-bold form-search-title">클릭한 항목</label>
<input type="text" id="" name="" class="form-control" value="" />
</div> </div>
</div> </div>
</div> </div>
@ -88,8 +80,7 @@
<div id="totCnt">전체 ㅣ <span></span></div> <div id="totCnt">전체 ㅣ <span></span></div>
<span class="container-window-btn-right"> <span class="container-window-btn-right">
선택 | n건 선택 | n건
<a href="#" class="btn btn-blue" id="" title="업무처리1">업무 처리1</a> <a href="#" class="btn btn-blue" id="" title="개별 확인 자료로 수정">개별 확인 자료로 수정</a>
<a href="#" class="btn btn-blue" id="" title="업무처리2">업무 처리2</a>
</span> </span>
</span> </span>
</div> </div>
@ -227,7 +218,9 @@ $(document).ready(function(){
return { return {
taskSeCd: 'DPV' taskSeCd: 'DPV'
,[form.find("[name='schOpt']").val()]: form.find("[name='schWord']").val() ,vhrno : form.find("[name='vhrno']").val()
,by : form.find("[name='by']").val()
,term : form.find("[name='term']").val()
,schDateOpt: form.find("[name='schDateOpt']").val() ,schDateOpt: form.find("[name='schDateOpt']").val()
,schDateFrom: form.find("[name='schDateFrom']").val() ,schDateFrom: form.find("[name='schDateFrom']").val()
,schDateTo: form.find("[name='schDateTo']").val() ,schDateTo: form.find("[name='schDateTo']").val()
@ -261,6 +254,8 @@ $(document).ready(function(){
{ header: 'interfaceSeqN', name: 'INTERFACE_SEQN', hidden: true } { header: 'interfaceSeqN', name: 'INTERFACE_SEQN', hidden: true }
]; ];
thisPO.gridOptions = { thisPO.gridOptions = {
by : 'by--${pageName}',
byOutput : 'byOutput--${pageName}',
theadTr: 'crdnTheadTr--${pageName}', theadTr: 'crdnTheadTr--${pageName}',
rowHeader: 'No.', rowHeader: 'No.',
trDataKey: 'CRDN_ID', trDataKey: 'CRDN_ID',

@ -29,6 +29,7 @@ var initGrid = (gridOptions) => {
gridColumns.forEach(function(item, idx, arr){ gridColumns.forEach(function(item, idx, arr){
var gHeader = item.header; var gHeader = item.header;
var gName = item.name;
var gWidth = item.width; var gWidth = item.width;
if(!gWidth){ if(!gWidth){
@ -40,6 +41,14 @@ var initGrid = (gridOptions) => {
gClass = ""; gClass = "";
} }
var titleClickEvent = ``;
var by = gridOptions.by;
var byOutput = gridOptions.byOutput;
if(by && byOutput){
titleClickEvent += `searchFromGridTitle('${by}','${byOutput}','${gName}','${gHeader}');`;
}
var gHidden = item.hidden; var gHidden = item.hidden;
if(!gHidden){ if(!gHidden){
gHidden = ""; gHidden = "";
@ -53,6 +62,7 @@ var initGrid = (gridOptions) => {
tabindex="0" rowspan="1" colspan="1" class="sorting ${gClass}" tabindex="0" rowspan="1" colspan="1" class="sorting ${gClass}"
style="width: ${gWidth};" style="width: ${gWidth};"
${gHidden} ${gHidden}
onclick="${titleClickEvent}"
>${gHeader} >${gHeader}
</th>`; </th>`;
@ -61,7 +71,7 @@ var initGrid = (gridOptions) => {
ondblclick="${gridOptions.dblClickEvent}" ondblclick="${gridOptions.dblClickEvent}"
class="${gClass}" class="${gClass}"
${gHidden} ${gHidden}
>{${item.name}} >{${gName}}
</td>`; </td>`;
}); });
@ -79,3 +89,8 @@ var initGrid = (gridOptions) => {
return tableBodyTemplate; return tableBodyTemplate;
}; };
function searchFromGridTitle(byElement, byOutputElement, byValue, byOutputValue){
document.getElementById(byElement).value = byValue;
document.getElementById(byOutputElement).value = byOutputValue + " 검색";
}
Loading…
Cancel
Save