xit-app
/
fims-web-all
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

셀렉트박스 옵션 선택 버튼 추가

Browse Source
main
이범준 12 months ago
parent affc7a75c8
commit 2caaad4e24
5 changed files with 117 additions and 93 deletions
Show Stats Download Patch File Download Diff File

16
src/main/java/cokr/xit/fims/cmmn/pdf/DefaultOtptStng.java
Unescape Escape View File

@ -19,11 +19,11 @@ public class DefaultOtptStng {
this.heightSz=0; this.heightSz=0;
this.fontNm="gulimche"; this.fontNm="gulimche";
this.fontSize=10; this.fontSz=10;
this.fontColor="BLACK"; this.fontColor="BLACK";
this.fontStyle="FILL"; this.fontStyle="FILL";
this.align = "left"; this.textSort = "left";
this.forPost = false; this.forPost = false;
this.unique = false; this.unique = false;
} }
@ -57,8 +57,8 @@ public class DefaultOtptStng {
/** /**
* 출력요소의 기본 텍스트정렬을 설정한다. * 출력요소의 기본 텍스트정렬을 설정한다.
*/ */
public DefaultOtptStng align(String type) { public DefaultOtptStng align(String alignValue) {
this.align = type; this.textSort = alignValue;
return this; return this;
} }
@ -74,9 +74,9 @@ public class DefaultOtptStng {
/** /**
* 출력요소의 기본 글꼴을 설정한다. * 출력요소의 기본 글꼴을 설정한다.
*/ */
public DefaultOtptStng font(String fontNm, int fontSize, String fontColor, String fontStyle) { public DefaultOtptStng font(String fontNm, int fontSz, String fontColor, String fontStyle) {
this.fontNm = fontNm; this.fontNm = fontNm;
this.fontSize = fontSize; this.fontSz = fontSz;
this.fontColor = fontColor; this.fontColor = fontColor;
this.fontStyle = fontStyle; this.fontStyle = fontStyle;
return this; return this;
@ -123,9 +123,9 @@ public class DefaultOtptStng {
private Pstn letter; //레터 위치값 private Pstn letter; //레터 위치값
private float widthSz; //영역크기 길이 private float widthSz; //영역크기 길이
private float heightSz; //영역크기 높이 private float heightSz; //영역크기 높이
private String align; //텍스트정렬 private String textSort; //텍스트정렬
private String fontNm; //글꼴명 private String fontNm; //글꼴명
private int fontSize; //글꼴크기 private int fontSz; //글꼴크기
private String fontColor; //글꼴색 private String fontColor; //글꼴색
private String fontStyle; //글꼴스타일 private String fontStyle; //글꼴스타일
} }

4
src/main/java/cokr/xit/fims/cmmn/pdf/PDFPrintUtil.java
Unescape Escape View File

@ -176,7 +176,7 @@ public class PDFPrintUtil extends PrintUtil {
if(!sggStng.string("FONT_SZ").equals("")) { if(!sggStng.string("FONT_SZ").equals("")) {
return sggStng.number("FONT_SZ").intValue(); return sggStng.number("FONT_SZ").intValue();
} else { } else {
return prototypeStng.getFontSize(); return prototypeStng.getFontSz();
} }
} }
@ -214,7 +214,7 @@ public class PDFPrintUtil extends PrintUtil {
if(!sggStng.string("TEXT_SORT").equals("")) { if(!sggStng.string("TEXT_SORT").equals("")) {
return sggStng.string("TEXT_SORT"); return sggStng.string("TEXT_SORT");
} else { } else {
return prototypeStng.getAlign(); return prototypeStng.getTextSort();
} }
} }

164
src/main/webapp/WEB-INF/jsp/fims/sprt/sprt01200-main.jsp
Unescape Escape View File

@ -51,23 +51,10 @@
<div class="dataTables_wrapper dt-bootstrap5 no-footer"> <div class="dataTables_wrapper dt-bootstrap5 no-footer">
<div class="table-responsive" <div class="table-responsive"
style="overflow-x:scroll; height:300px; overflow-y:scroll;" > style="overflow-x:scroll; height:300px; overflow-y:scroll;" >
<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" <table
class="table-layout-fixed compress-cell dataTable table table-bordered"
id="tableUnique--${pageName}" aria-describedby="DataTables_Table_0_info"> id="tableUnique--${pageName}" aria-describedby="DataTables_Table_0_info">
<thead class="sticky-thead"> <thead class="sticky-thead" id="theadUnique--${pageName}">
<tr id="theadTrUnique--${pageName}">
<th style="width:50px"></th>
<th style="width:200px">출력항목명</th>
<th style="width:120px">유형</th>
<th style="width:120px">위치(좌)</th>
<th style="width:120px">위치(상)</th>
<th style="width:120px">사이즈(좌우)</th>
<th style="width:120px">사이즈(상하)</th>
<th style="width:120px">텍스트정렬</th>
<th style="width:120px">글꼴</th>
<th style="width:120px">글꼴크기</th>
<th style="width:120px">글꼴색</th>
<th style="width:120px">글꼴스타일</th>
</tr>
</thead> </thead>
<tbody id="tbodyUnique--${pageName}"> <tbody id="tbodyUnique--${pageName}">
</tbody> </tbody>
@ -89,27 +76,13 @@
<div class="dataTables_wrapper dt-bootstrap5 no-footer"> <div class="dataTables_wrapper dt-bootstrap5 no-footer">
<div class="table-responsive" <div class="table-responsive"
style="overflow-x:scroll; height:300px; overflow-y:scroll;" > style="overflow-x:scroll; height:300px; overflow-y:scroll;" >
<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" <table
class="table-layout-fixed compress-cell dataTable table table-bordered"
id="tableMultiple--${pageName}" aria-describedby="DataTables_Table_0_info"> id="tableMultiple--${pageName}" aria-describedby="DataTables_Table_0_info">
<thead class="sticky-thead"> <thead class="sticky-thead" id="theadMultiple--${pageName}">
<tr id="theadTrMultiple--${pageName}">
<th style="width:50px"></th>
<th style="width:200px">출력항목명</th>
<th style="width:120px">유형</th>
<th style="width:120px">위치(좌)</th>
<th style="width:120px">위치(상)</th>
<th style="width:120px">사이즈(좌우)</th>
<th style="width:120px">사이즈(상하)</th>
<th style="width:120px">텍스트정렬</th>
<th style="width:120px">글꼴</th>
<th style="width:120px">글꼴크기</th>
<th style="width:120px">글꼴색</th>
<th style="width:120px">글꼴스타일</th>
</tr>
</thead> </thead>
<tbody id="tbodyMultiple--${pageName}"> <tbody id="tbodyMultiple--${pageName}">
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </div>
@ -128,40 +101,60 @@
</div> </div>
</div> </div>
<template id="theadTr--${pageName}">
<tr>
<th style="width:40px"></th>
<th style="width:200px">출력항목명</th>
<th style="width:110px">유형</th>
<th style="width:110px">위치(좌)</th>
<th style="width:110px">위치(상)</th>
<th style="width:110px">영역(좌우)</th>
<th style="width:110px">영역(상하)</th>
<th style="width:140px">텍스트정렬</th>
<th style="width:110px">글꼴</th>
<th style="width:110px">글꼴크기</th>
<th style="width:140px">글꼴색</th>
<th style="width:110px">글꼴스타일</th>
<th class="dummy-th"></th>
</tr>
</template>
<template id="found--${pageName}"> <template id="found--${pageName}">
<tr data-key="{OTPT_FORM_ID}"> <tr data-key="{OTPT_FORM_ID}">
<td data-col="checkbox"> <td data-col="checkbox" class="text-center">
<input type="checkbox" class="form-check-input" /> <input type="checkbox" class="form-check-input" />
</td> </td>
<td data-col="otptNm"> <td data-col="otptNm" class="text-center">
<select class="form-select" onchange="pageObject['${pageName}'].fnChangeComponent(this);"> <select class="form-select" onchange="pageObject['${pageName}'].fnChangeComponent(this);">
{COMPONENTS} {COMPONENTS}
</select> </select>
</td> </td>
<td data-col="componentType"> <td data-col="componentType" class="text-center">
<input type="text" class="form-control w-px-90" readonly /> <input type="text" class="form-control w-px-80" readonly />
</td> </td>
<td data-col="leftPstn"> <td data-col="leftPstn" class="text-center">
<input type="number" class="form-control w-px-90" min="0" max="300" /> <input type="number" class="form-control w-px-80" min="0" max="300" />
</td> </td>
<td data-col="topPstn"> <td data-col="topPstn" class="text-center">
<input type="number" class="form-control w-px-90" min="0" max="300" /> <input type="number" class="form-control w-px-80" min="0" max="300" />
</td> </td>
<td data-col="widthSz"> <td data-col="widthSz" class="text-center">
<input type="number" class="form-control w-px-90" min="0" max="300" /> <input type="number" class="form-control w-px-80" min="0" max="300" />
</td> </td>
<td data-col="heightSz"> <td data-col="heightSz" class="text-center">
<input type="number" class="form-control w-px-90" min="0" max="300" /> <input type="number" class="form-control w-px-80" min="0" max="300" />
</td> </td>
<td data-col="textSort"> <td data-col="textSort" class="text-center">
<select class="form-select"> <button type="button" class="btn btn-xs btn-outline-dark h-px-25 px-1">◀</button>
<select class="form-select no-bgi w-automin">
<option value="left">왼쪽</option> <option value="left">왼쪽</option>
<option value="center">중앙</option> <option value="center">가운데</option>
<option value="right">오른쪽</option> <option value="right">오른쪽</option>
</select> </select>
<button type="button" class="btn btn-xs btn-outline-dark h-px-25 px-1">▶</button>
</td> </td>
<td data-col="fontNm"> <td data-col="fontNm" class="text-center">
<select class="form-select"> <select class="form-select no-bgi">
<option value="gulimche">굴림체</option> <option value="gulimche">굴림체</option>
<option value="gulim">굴림</option> <option value="gulim">굴림</option>
<option value="batangche">바탕체</option> <option value="batangche">바탕체</option>
@ -172,25 +165,11 @@
<option value="gungsuh">궁서</option> <option value="gungsuh">궁서</option>
</select> </select>
</td> </td>
<td data-col="fontSz"> <td data-col="fontSz" class="text-center">
<select class="form-select"> <input type="number" class="form-control w-px-90" min="8" max="25" />
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</td> </td>
<td data-col="fontColor"> <td data-col="fontColor" class="text-center">
<select class="form-select"> <select class="form-select no-bgi">
<option value="BLACK">검정</option> <option value="BLACK">검정</option>
<option value="RED">빨강</option> <option value="RED">빨강</option>
<option value="ORANGE">주황</option> <option value="ORANGE">주황</option>
@ -208,12 +187,13 @@
<option value="WHITE">하양</option> <option value="WHITE">하양</option>
</select> </select>
</td> </td>
<td data-col="fontStyle"> <td data-col="fontStyle" class="text-center">
<select class="form-select"> <select class="form-select no-bgi">
<option value="FILL">일반</option> <option value="FILL">일반</option>
<option value="FILL_STROKE">굵게</option> <option value="FILL_STROKE">굵게</option>
</select> </select>
</td> </td>
<td class="dummy-td"></td>
</tr> </tr>
</template> </template>
@ -260,8 +240,12 @@ $(document).ready(function(){
$("#currentOtpt--${pageName}").text(resp.otptStngTitle); $("#currentOtpt--${pageName}").text(resp.otptStngTitle);
$P.otptStngMap = resp.otptStngMap; $P.otptStngMap = resp.otptStngMap;
$P.renderOtptStngGrid("tbodyUnique--${pageName}",$P.otptStngMap.unique.prototypeList,$P.otptStngMap.unique.dataList); $P.renderOtptStngGrid("tbodyUnique--${pageName}",
$P.renderOtptStngGrid("tbodyMultiple--${pageName}",$P.otptStngMap.multiple.prototypeList,$P.otptStngMap.multiple.dataList); $P.otptStngMap.unique.prototypeList,
$P.otptStngMap.unique.dataList);
$P.renderOtptStngGrid("tbodyMultiple--${pageName}",
$P.otptStngMap.multiple.prototypeList,
$P.otptStngMap.multiple.dataList);
} }
}); });
@ -292,23 +276,39 @@ $(document).ready(function(){
$($P.fnGetElement(lastTr,"widthSz")).val(data.WIDTH_SZ); $($P.fnGetElement(lastTr,"widthSz")).val(data.WIDTH_SZ);
$($P.fnGetElement(lastTr,"heightSz")).val(data.HEIGHT_SZ); $($P.fnGetElement(lastTr,"heightSz")).val(data.HEIGHT_SZ);
$($P.fnGetElement(lastTr,"textSort")).val(!isEmpty(data.TEXT_SORT) ? data.TEXT_SORT : "left"); $($P.fnGetElement(lastTr,"textSort"))
$($P.fnGetElement(lastTr,"fontNm")).val(!isEmpty(data.FONT_NM) ? data.FONT_NM : "gulimche"); .val(!isEmpty(data.TEXT_SORT) ? data.TEXT_SORT : $P.fnGetProto(prototypeList, data, "textSort"));
$($P.fnGetElement(lastTr,"fontSz")).val(!isEmpty(data.FONT_SZ) ? data.FONT_SZ : 10); $($P.fnGetElement(lastTr,"fontNm"))
$($P.fnGetElement(lastTr,"fontColor")).val(!isEmpty(data.FONT_COLOR) ? data.FONT_COLOR : "BLACK"); .val(!isEmpty(data.FONT_NM) ? data.FONT_NM : $P.fnGetProto(prototypeList, data, "fontNm"));
$($P.fnGetElement(lastTr,"fontStyle")).val(!isEmpty(data.FONT_STYLE) ? data.FONT_STYLE : "FILL"); $($P.fnGetElement(lastTr,"fontSz"))
.val(!isEmpty(data.FONT_SZ) ? data.FONT_SZ : $P.fnGetProto(prototypeList, data, "fontSz"));
$($P.fnGetElement(lastTr,"fontColor"))
.val(!isEmpty(data.FONT_COLOR) ? data.FONT_COLOR : $P.fnGetProto(prototypeList, data, "fontColor"));
$($P.fnGetElement(lastTr,"fontStyle"))
.val(!isEmpty(data.FONT_STYLE) ? data.FONT_STYLE : $P.fnGetProto(prototypeList, data, "fontStyle"));
} }
if(tbodyId == "tbodyUnique--${pageName}"){
$("#"+tbodyId).find("tr").each(function(){ $("#"+tbodyId).find("tr").each(function(){
if(tbodyId == "tbodyUnique--${pageName}"){
var el = $P.fnGetElement(this,"otptNm"); var el = $P.fnGetElement(this,"otptNm");
$(el).attr("disabled","disabled"); $(el).attr("disabled","disabled");
}); $(el).addClass("no-bgi");
} }
var sel = $P.fnGetElement(this,"textSort");
var toPrev = $(sel).siblings()[0];
var toNext = $(sel).siblings()[1];
fnMakeSpinnerSelect(sel, toPrev, toNext);
});
} }
$P.fnGetElement = (tableRow, colName) => { $P.fnGetElement = (tableRow, colName) => {
return $(tableRow).find("td[data-col='"+colName+"']").children().first()[0]; return $(tableRow).find("td[data-col='"+colName+"']").children("input, select").first()[0];
}
$P.fnGetProto = (prototypeList, sggData, colName) => {
return prototypeList.find((item) => item.otptNm == sggData.OTPT_NM)[colName];
} }
$P.fnChangeComponent = (selectElement) => { $P.fnChangeComponent = (selectElement) => {
@ -318,13 +318,15 @@ $(document).ready(function(){
var selectedOption = $(selectElement).find("option:selected")[0]; var selectedOption = $(selectElement).find("option:selected")[0];
$(componentTypeEl).val(selectedOption.dataset.componentType); $(componentTypeEl).val(selectedOption.dataset.componentType);
} }
$P.fnSave = () => { $P.fnSave = () => {
} }
$("#theadUnique--${pageName}").html($("#theadTr--${pageName}")[0].innerHTML);
$("#theadMultiple--${pageName}").html($("#theadTr--${pageName}")[0].innerHTML);
$("#btnLoad--${pageName}").on("click", () => $P.fnLoad() ); $("#btnLoad--${pageName}").on("click", () => $P.fnLoad() );
$("#btnSave--${pageName}").on("click", () => $P.fnSave() ); $("#btnSave--${pageName}").on("click", () => $P.fnSave() );

2
src/main/webapp/WEB-INF/jsp/include/tail.jsp
Unescape Escape View File

@ -59,6 +59,8 @@
<script src="<c:url value="/resources/js/fims/framework/cmm/shortcutKey.js?${ver}"/>"></script> <script src="<c:url value="/resources/js/fims/framework/cmm/shortcutKey.js?${ver}"/>"></script>
<!-- 버튼 설정 --> <!-- 버튼 설정 -->
<script src="<c:url value="/resources/js/fims/framework/cmm/button.js?${ver}"/>"></script> <script src="<c:url value="/resources/js/fims/framework/cmm/button.js?${ver}"/>"></script>
<!-- 커스텀UI -->
<script src="<c:url value="/resources/js/fims/framework/cmm/componentization.js?${ver}"/>"></script>
<!-- endbuild --> <!-- endbuild -->
<c:set var="functions" scope="request"> <c:set var="functions" scope="request">

20
src/main/webapp/resources/js/fims/framework/cmm/componentization.js
Unescape Escape View File

@ -0,0 +1,20 @@
function fnMakeSpinnerSelect(selectEl, prevBtnEl, nextBtnEl){
$(prevBtnEl).on("click", function(){
var selected = $(selectEl).find("option:selected");
var prev = selected.prev();
if(prev.length >= 1){
$(selectEl).val(prev.val());
} else {
$(selectEl).effect("highlight");
}
});
$(nextBtnEl).on("click", function(){
var selected = $(selectEl).find("option:selected");
var next = selected.next();
if(next.length >= 1){
$(selectEl).val(next.val());
} else {
$(selectEl).effect("highlight");
}
});
}
Write Preview
Loading…
Cancel
Save