xit-base
/
xit-web-res
13
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

toolPalette.html 팝업 화면 추가

Browse Source
master
이범준 3 months ago
parent 3fdea7abe9
commit ab7df570eb
2 changed files with 265 additions and 2 deletions
Show Stats Download Patch File Download Diff File

147
src/main/webapp/resources/html/toolPalette.html
Unescape Escape View File

@ -0,0 +1,147 @@
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>툴 팔레트</title>
<link rel="icon" type="image/x-icon" href="/webjars/image/favicon.ico" />
<link rel="stylesheet" href="/webjars/3rd-party/sneat/fonts/boxicons.css" />
<link rel="stylesheet" href="/webjars/3rd-party/sneat/fonts/fontawesome.css" />
<link rel="stylesheet" href="/webjars/3rd-party/sneat/css/rtl/core.css" class="template-customizer-core-css" />
<link rel="stylesheet" href="/webjars/3rd-party/sneat/css/rtl/theme-default.css" class="template-customizer-theme-css" />
<link rel="stylesheet" href="/webjars/css/styles.css" />
<link rel="stylesheet" href="/webjars/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.css" />
<link rel="stylesheet" href="/webjars/3rd-party/sneat/libs/jstree/jstree.css" />
<link rel="stylesheet" href="/webjars/3rd-party/sneat/libs/bootstrap-datepicker/bootstrap-datepicker.css" />
<style>
.accordion-button {
background-image: linear-gradient(#D7D7D7, #EEEEEE);
border: 1px solid #CBCBCB;
}
.accordion-body {
background-color: #F0F0F0;
}
.btn {
color: black!important;
margin-top: 3px;
margin-bottom: 3px;
padding: 3px;
width : 100%;
justify-content: left;
}
.btn:not(:focus) {
border: 1px solid transparent!important;
}
.btn:hover {
border: 1px solid #7495D8!important;
background-color: #B7C8EA!important;
transform: translateY(0px);
}
.btn:active {
transform: translateY(2px)!important;
}
.btn:focus {
border: 1px solid #7E6ADA;
background-color: #C6BEEF;
}
</style>
</head>
<body>
<div class="accordion" id="accordionRoot" style="width:500px;padding:1px;">
<div class="card accordion-item active">
<h2 class="accordion-header d-flex align-items-center">
<button class="accordion-button fw-bold collapsed"
data-bs-toggle="collapse" data-bs-target="#accordion-template">
템플릿
</button>
</h2>
<div id="accordion-template" class="accordion-collapse collapse" >
<div class="accordion-body">
<button type="button" class="btn"
onclick="tool.searchArea2;this.focus();" title="검색조건영역(열 2등분)">검색조건영역(열 2등분)</button>
<button type="button" class="btn"
onclick="tool.searchArea3;this.focus();" title="검색조건영역(열 3등분)">검색조건영역(열 3등분)</button>
<button type="button" class="btn"
onclick="tool.searchArea4;this.focus();" title="검색조건영역(열 4등분)">검색조건영역(열 4등분)</button>
<button type="button" class="btn"
onclick="tool.dataGrid;this.focus();" title="데이터그리드">데이터그리드</button>
<button type="button" class="btn"
onclick="tool.dataGrid_num_cb;this.focus();" title="행번호와 체크박스 포함된 그리드">데이터그리드(+행번호,체크박스)</button>
<button type="button" class="btn"
onclick="tool.dataGrid_num;this.focus();" title="행번호 포함된 그리드">데이터그리드(+행번호)</button>
<button type="button" class="btn"
onclick="tool.dataGrid_cb;this.focus();" title="체크박스 포함된 그리드">데이터그리드(+체크박스)</button>
</div>
</div>
</div>
<div class="card accordion-item active mb-2">
<h2 class="accordion-header d-flex align-items-center">
<button class="accordion-button fw-bold collapsed"
data-bs-toggle="collapse" data-bs-target="#accordion-element">
기본요소
</button>
</h2>
<div id="accordion-element" class="accordion-collapse collapse" >
<div class="accordion-body">
<button type="button" class="btn"
onclick="tool.button;this.focus();" title="일반버튼">일반버튼</button>
<button type="button" class="btn"
onclick="tool.btnSearch;this.focus();" title="검색버튼">검색버튼</button>
<button type="button" class="btn"
onclick="tool.btnExcel;this.focus();" title="엑셀다운버튼">엑셀다운버튼</button>
<button type="button" class="btn"
onclick="tool.datepicker;this.focus();" title="날짜입력기">날짜입력기</button>
<button type="button" class="btn"
onclick="tool.datepickerFromTo;this.focus();" title="날짜입력기(범위)">날짜입력기(범위)</button>
<button type="button" class="btn"
onclick="tool.byTerm;this.focus();" title="키워드검색">by & term</button>
</div>
</div>
</div>
<div class="card accordion-item active">
<h2 class="accordion-header d-flex align-items-center">
<button class="accordion-button fw-bold collapsed"
data-bs-toggle="collapse" data-bs-target="#accordion-2">
Dataset 스크립트
</button>
</h2>
<div id="accordion-2" class="accordion-collapse collapse">
<div class="accordion-body">
<button type="button" class="btn"
onclick="tool.dsc_list;this.focus();" title="데이터셋컨트롤(목록조회)">데이터셋컨트롤(목록조회)</button>
</div>
</div>
</div>
</div>
<script src="/webjars/3rd-party/sneat/libs/popper/popper.js"></script>
<script src="/webjars/3rd-party/sneat/js/bootstrap.js"></script>
<script src="/webjars/3rd-party/sneat/libs/jquery/jquery.js"></script>
<script src="/webjars/3rd-party/jquery-ui/1.13.2/jquery-ui.js"></script>
<script src="/webjars/3rd-party/sneat/js/config.js"></script>
<script src="/webjars/3rd-party/sneat/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
<script src="/webjars/3rd-party/sneat/js/helpers.js"></script>
<script src="/webjars/3rd-party/sneat/js/menu.js"></script>
<script src="/webjars/3rd-party/sneat/libs/jstree/jstree.js"></script>
<script src="/webjars/3rd-party/jstree/jstree-support.js"></script>
<script src="/webjars/3rd-party/sneat/libs/jquery-sticky/jquery-sticky.js" />"></script>
<script src="/webjars/3rd-party/sneat/libs/bootstrap-datepicker/bootstrap-datepicker.js"></script>
<script src="/webjars/js/base/base.js"></script>
<script src="/webjars/js/base/dataset.js"></script>
<script src="/webjars/js/support/toolPalette.js"></script>
</body>
</html>

116
src/main/webapp/resources/js/support/toolPalette.js
Unescape Escape View File

@ -23,6 +23,7 @@ class ToolPalette {
str += "btnExcel : 엑셀저장 버튼 \n"; str += "btnExcel : 엑셀저장 버튼 \n";
str += "datepicker : 날짜입력기 \n"; str += "datepicker : 날짜입력기 \n";
str += "datepickerFromTo : 날짜입력기(범위) \n"; str += "datepickerFromTo : 날짜입력기(범위) \n";
str += "byTerm : 키워드 검색조건 \n";
str += "searchArea2 : 검색조건영역(열 2등분) \n"; str += "searchArea2 : 검색조건영역(열 2등분) \n";
str += "searchArea3 : 검색조건영역(열 3등분) \n"; str += "searchArea3 : 검색조건영역(열 3등분) \n";
str += "searchArea4 : 검색조건영역(열 4등분) \n"; str += "searchArea4 : 검색조건영역(열 4등분) \n";
@ -31,9 +32,15 @@ class ToolPalette {
str += "dataGrid_num : 데이터그리드(행번호 포함) \n"; str += "dataGrid_num : 데이터그리드(행번호 포함) \n";
str += "dataGrid_cb : 데이터그리드(체크박스 포함) \n"; str += "dataGrid_cb : 데이터그리드(체크박스 포함) \n";
str += "dsc_list : 데이터셋컨트롤(목록조회) 스크립트 \n";
console.log(str); console.log(str);
} }
open(){
window.open("/webjars/html/toolPalette.html","_blank","width=520, height=700");
}
get button(){ get button(){
clipboardCopy(`<button type="button" class="btn">버튼</button>`); clipboardCopy(`<button type="button" class="btn">버튼</button>`);
} }
@ -307,6 +314,115 @@ class ToolPalette {
} }
get byTerm(){
clipboardCopy(
`<div class="input-group me-3 w-px-400">
<select name="by" onchange="데이터셋컨트롤명.find('term').focus();" class="form-select">
<option value="검색키워드구분영문변수1">검색키워드구분한글명1</option>
<option value="검색키워드구분영문변수2">검색키워드구분한글명2</option>
</select>
<input name="term" autofocus type="text" placeholder="조회 조건을 입력하십시오." class="form-control">
</div>`
);
}
get dsc_list(){
clipboardCopy(
`
//step1.데이터셋컨트롤 인스턴스 생성하고 인스턴스 이름을 정하세요.
var 데이터셋컨트롤명 = /** 주석 제거후 이곳에 데이터셋컨트롤 초기화함수를 입력하세요. */;
//step2.데이터셋컨트롤에서 호출하는 on이벤트를 작성하세요.
//step2-1. onDatasetChange 작성
//자료조회나 변경,삭제 처리 후 데이터셋컨트롤의 데이터셋이 변경되었을 경우 호출되는 이벤트입니다.
데이터셋컨트롤명.onDatasetChange = (obj) => {
//step2-1-1. 그리드 렌더링을 처리하는 함수를 호출하세요.(step4-2 참조)
그리드렌더링처리함수명();
//step2-1-2. 페이징 처리 관련 스크립트입니다. 전체자료 조회시에는 아래 코드를 제거하세요.
$(데이터셋컨트롤명.selector("[name='이곳에페이징정보표시영역의name을입력하세요']")).setPaging({
list : 데이터셋컨트롤명.dataset,
prefix : 데이터셋컨트롤명.prefix,
start : obj[데이터셋컨트롤명.prefix+"Start"],
totalSize : obj[데이터셋컨트롤명.prefix+"Total"],
fetchSize : obj[데이터셋컨트롤명.prefix+"Fetch"],
func: "데이터셋컨트롤명.load({index})"
});
};
//step2-2. onCurrentChange 작성
//현재자료(단건)가 변경되었을 경우 호출되는 이벤트입니다.
데이터셋컨트롤명.onCurrentChange = (item) => {
if (!item) return;
let key = item.data.키값으로쓰이는DB컬럼명;
$(데이터셋컨트롤명.selector("[name='이곳에데이터조회결과가표시될영역의name을입력하세요']")).setCurrentRow(key);
};
//step2-3. onSelectionChange 작성
//전체 자료 중 일부를 선택(체크)한 결과가 변경되었을 경우 호출되는 이벤트입니다.
//그리드에 체크박스가 없을 경우 소스코드를 제거하세요.
데이터셋컨트롤명.onSelectionChange = (selected) => {
let 임의의데이터셋변수명 = 데이터셋컨트롤명.dataset;
let keys = selected.map(e => 임의의데이터셋변수명.getKey(e));
데이터셋컨트롤명.querySelectorAll("[name='이곳에데이터조회결과가표시될영역의name을입력하세요'] input[type='checkbox']")
.forEach(node => {
node.checked = keys.includes(node.value);
});
데이터셋컨트롤명.querySelectorAll(".enable-onfound")
.forEach(node => {
node.disabled = keys.length < 1;
});
};
//step3.키워드 검색 후 엔터키 입력 이벤트 매핑(step4-1 참조)
$(데이터셋컨트롤명.selector("[name='term']")).onEnterPress(검색버튼클릭또는키워드입력후엔터키처리함수명);
//step4.사용자 정의 함수를 작성하세요.
//step4-1.검색버튼을 클릭하거나 키워드 입력후 엔터키 입력을 처리하는 함수의 이름을 정하고 작성하세요.
검색버튼클릭또는키워드입력후엔터키처리함수명 = () => {
//step4-1-1. 데이터셋컨트롤의 query에 조회조건 값 세팅합니다.
데이터셋컨트롤명.query = {
by: 데이터셋컨트롤명.find("by").value,
term: 데이터셋컨트롤명.find("term").value
};
//step4-1-2. 데이터셋컨트롤의 load함수 호출합니다.
데이터셋컨트롤명.load(1);
};
//step4-2.그리드 렌더링을 처리하는 함수의 이름을 정하고 작성하세요.
그리드렌더링처리함수명 = () => {
let 임의의데이터셋변수명 = 데이터셋컨트롤명.dataset;
let empty = 임의의데이터셋변수명.empty;
let trs = empty ?
[document.getElementById("이곳에1건도조회되지않은경우의템플릿명을입력하세요").innerHTML] :
임의의데이터셋변수명.inStrings(
데이터셋컨트롤명.find("이곳에1건이라도조회되었을경우의템플릿명을입력하세요").innerHTML,
(str, dataItem) => str
.replace(/{onclick}/gi, "데이터셋컨트롤명.setCurrent('" + dataItem.getValue("이곳에키값으로쓰이는DB컬럼명을입력하세요") + "');")
.replace(/{ondblclick}/gi, "데이터셋컨트롤명.getInfo('" + dataItem.getValue("이곳에키값으로쓰이는DB컬럼명을입력하세요") + "');")
);
데이터셋컨트롤명.find("이곳에데이터조회결과가표시될영역의name을입력하세요").innerHTML = trs.join("");
//그리드에 체크박스가 없을 경우 아래 소스코드를 제거하세요.
데이터셋컨트롤명.querySelector("[name='이곳에thead태그의name을넣으세요'] th input[type='checkbox']").checked = false;
};
`
);
}
} }

Write Preview
Loading…
Cancel
Save