사전정의된 html이나, 스크립트를 클립보드로 복사하는 class(ToolPalette)추가
parent
7b3f99c6ee
commit
c64732cf1e
@ -0,0 +1,317 @@
|
|||||||
|
/**************************************************************************
|
||||||
|
* 문자열 클립보드 복사
|
||||||
|
**************************************************************************/
|
||||||
|
function clipboardCopy(string){
|
||||||
|
if(window.isSecureContext){
|
||||||
|
navigator.clipboard.writeText(string);
|
||||||
|
} else {
|
||||||
|
var textArea = document.createElement("textarea");
|
||||||
|
textArea.style.position = "fixed";
|
||||||
|
textArea.value = string;
|
||||||
|
document.body.appendChild(textArea);
|
||||||
|
textArea.focus();
|
||||||
|
textArea.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(textArea);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**************************************************************************
|
||||||
|
* 사전 정의 요소 클립보드 복사
|
||||||
|
**************************************************************************/
|
||||||
|
class ToolPalette {
|
||||||
|
get help(){
|
||||||
|
let str = "";
|
||||||
|
str += "button : 일반 버튼 \n";
|
||||||
|
str += "btnSearch : 검색 버튼 \n";
|
||||||
|
str += "btnExcel : 엑셀저장 버튼 \n";
|
||||||
|
str += "datepicker : 날짜입력기 \n";
|
||||||
|
str += "datepickerFromTo : 날짜입력기(범위) \n";
|
||||||
|
str += "searchArea2 : 검색조건영역(열 2등분) \n";
|
||||||
|
str += "searchArea3 : 검색조건영역(열 3등분) \n";
|
||||||
|
str += "searchArea4 : 검색조건영역(열 4등분) \n";
|
||||||
|
str += "dataGrid : 데이터그리드 \n";
|
||||||
|
str += "dataGrid_num_cb : 데이터그리드(행번호,체크박스 포함) \n";
|
||||||
|
str += "dataGrid_num : 데이터그리드(행번호 포함) \n";
|
||||||
|
str += "dataGrid_cb : 데이터그리드(체크박스 포함) \n";
|
||||||
|
|
||||||
|
console.log(str);
|
||||||
|
}
|
||||||
|
|
||||||
|
get button(){
|
||||||
|
clipboardCopy(`<button type="button" class="btn">버튼</button>`);
|
||||||
|
}
|
||||||
|
get btnSearch(){
|
||||||
|
clipboardCopy(`<button type="button" name="btnSearch" class="btn btn-search w-px-120" title="검색">검색</button>`);
|
||||||
|
}
|
||||||
|
get btnExcel(){
|
||||||
|
clipboardCopy(`<button type="button" name="btnExcel" class="btn btn-excel w-px-120" title="엑셀저장">엑셀</button>`);
|
||||||
|
}
|
||||||
|
get datepicker(){
|
||||||
|
clipboardCopy(
|
||||||
|
`<label for="" class="w-px-130 bg-lighter pe-2 col-form-label text-sm-end">이곳에날짜입력항목의제목을적으세요</label>
|
||||||
|
<input type="text" name="Ymd" class="form-control form-date" data-fmt-type="day" maxlength="10" />
|
||||||
|
<button type="button" class="bx bx-lg bx-calendar bg-white"></button>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
get datepickerFromTo(){
|
||||||
|
clipboardCopy(
|
||||||
|
`<span class="form-label fw-bold form-search-title w-px-120 text-end">이곳에날짜범위입력항목의제목을적으세요</span>
|
||||||
|
<span class="form-search-linebox">
|
||||||
|
<input type="text" name="From"
|
||||||
|
class="form-control form-date"
|
||||||
|
data-fmt-type="day" maxlength="10" title="시작 날짜 선택" />
|
||||||
|
<button type="button" class="bx bx-lg bx-calendar bg-white"></button>
|
||||||
|
~
|
||||||
|
<input type="text" name="To"
|
||||||
|
class="form-control form-date"
|
||||||
|
data-fmt-type="day" maxlength="10" title="종료 날짜 선택">
|
||||||
|
<button type="button" class="bx bx-lg bx-calendar bg-white"></button>
|
||||||
|
</span>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
get seacrhArea2(){
|
||||||
|
clipboardCopy(
|
||||||
|
`<form name="frmSearch">
|
||||||
|
<div class="container-search">
|
||||||
|
<div class="row g-1">
|
||||||
|
<div class="col-6">
|
||||||
|
이곳에 조회조건(셀렉트박스,텍스트박스 등)을 넣으세요
|
||||||
|
</div>
|
||||||
|
<div class="col-6">
|
||||||
|
이곳에 조회조건(셀렉트박스,텍스트박스 등)을 넣으세요
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
</form>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
get seacrhArea3(){
|
||||||
|
clipboardCopy(
|
||||||
|
`<form name="frmSearch">
|
||||||
|
<div class="container-search">
|
||||||
|
<div class="row g-1">
|
||||||
|
<div class="col-4">
|
||||||
|
이곳에 조회조건(셀렉트박스,텍스트박스 등)을 넣으세요
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
이곳에 조회조건(셀렉트박스,텍스트박스 등)을 넣으세요
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
이곳에 조회조건(셀렉트박스,텍스트박스 등)을 넣으세요
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
</form>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
get seacrhArea4(){
|
||||||
|
clipboardCopy(
|
||||||
|
`<form name="frmSearch">
|
||||||
|
<div class="container-search">
|
||||||
|
<div class="row g-1">
|
||||||
|
<div class="col-3">
|
||||||
|
이곳에 조회조건(셀렉트박스,텍스트박스 등)을 넣으세요
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
이곳에 조회조건(셀렉트박스,텍스트박스 등)을 넣으세요
|
||||||
|
</div>
|
||||||
|
<div class="col-3">
|
||||||
|
이곳에 조회조건(셀렉트박스,텍스트박스 등)을 넣으세요
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
</form>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
get dataGrid(){
|
||||||
|
clipboardCopy(
|
||||||
|
`<div class="card-datatable text-nowrap">
|
||||||
|
<div class="dataTables_wrapper dt-bootstrap5 no-footer">
|
||||||
|
<div class="table-responsive ox-scroll oy-scroll h-px-500">
|
||||||
|
<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer">
|
||||||
|
<thead class="sticky-thead">
|
||||||
|
<tr>
|
||||||
|
<th style="width: 160px;">한글컬럼명1</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명2</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명3</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명4</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명5</th>
|
||||||
|
<th class="dummy-th"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody name="데이터조회결과가 표시될 영역의 이름을 적으세요">
|
||||||
|
</tbody>
|
||||||
|
<template name="이곳에 데이터가 1건이라도조회되었을경우의 템플릿명을 적으세요">
|
||||||
|
<tr data-key="{이곳에키값으로쓰이는DB컬럼명을넣으세요}">
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="dummy-td"></td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<template name="이곳에 데이터가 1건도조회되지않은경우의 템플릿명을 적으세요">
|
||||||
|
<tr>
|
||||||
|
<td valign="top" colspan="6" class="dataTables_empty text-center">정보를 찾지 못했습니다.</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
get dataGrid_num(){
|
||||||
|
clipboardCopy(
|
||||||
|
`<div class="card-datatable text-nowrap">
|
||||||
|
<div class="dataTables_wrapper dt-bootstrap5 no-footer">
|
||||||
|
<div class="table-responsive ox-scroll oy-scroll h-px-500">
|
||||||
|
<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer">
|
||||||
|
<thead class="sticky-thead">
|
||||||
|
<tr>
|
||||||
|
<th style="width: 72px;">No.</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명1</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명2</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명3</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명4</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명5</th>
|
||||||
|
<th class="dummy-th"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody name="데이터조회결과가 표시될 영역의 이름을 적으세요">
|
||||||
|
</tbody>
|
||||||
|
<template name="이곳에 데이터가 1건이라도조회되었을경우의 템플릿명을 적으세요">
|
||||||
|
<tr data-key="{이곳에키값으로쓰이는DB컬럼명을넣으세요}">
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ROW_NUM}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="dummy-td"></td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<template name="이곳에 데이터가 1건도조회되지않은경우의 템플릿명을 적으세요">
|
||||||
|
<tr>
|
||||||
|
<td valign="top" colspan="7" class="dataTables_empty text-center">정보를 찾지 못했습니다.</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
get dataGrid_cb(){
|
||||||
|
clipboardCopy(
|
||||||
|
`<div class="card-datatable text-nowrap">
|
||||||
|
<div class="dataTables_wrapper dt-bootstrap5 no-footer">
|
||||||
|
<div class="table-responsive ox-scroll oy-scroll h-px-500">
|
||||||
|
<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer" >
|
||||||
|
<thead class="sticky-thead">
|
||||||
|
<tr>
|
||||||
|
<th style="width: 56px;">
|
||||||
|
<input type="checkbox" class="form-check-input"
|
||||||
|
onchange="이곳에체크박스이벤트를넣으세요" />
|
||||||
|
</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명1</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명2</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명3</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명4</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명5</th>
|
||||||
|
<th class="dummy-th"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody name="데이터조회결과가 표시될 영역의 이름을 적으세요">
|
||||||
|
</tbody>
|
||||||
|
<template name="이곳에 데이터가 1건이라도조회되었을경우의 템플릿명을 적으세요">
|
||||||
|
<tr data-key="{이곳에키값으로쓰이는DB컬럼명을넣으세요}">
|
||||||
|
<td class="text-center">
|
||||||
|
<input type="checkbox" class="form-check-input"
|
||||||
|
name=""
|
||||||
|
value="{이곳에키값으로쓰이는DB컬럼명을넣으세요}"
|
||||||
|
onchange="이곳에체크박스이벤트를넣으세요" />
|
||||||
|
</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="dummy-td"></td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<template name="이곳에 데이터가 1건도조회되지않은경우의 템플릿명을 적으세요">
|
||||||
|
<tr>
|
||||||
|
<td valign="top" colspan="7" class="dataTables_empty text-center">정보를 찾지 못했습니다.</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
get dataGrid_num_cb(){
|
||||||
|
clipboardCopy(
|
||||||
|
`<div class="card-datatable text-nowrap">
|
||||||
|
<div class="dataTables_wrapper dt-bootstrap5 no-footer">
|
||||||
|
<div class="table-responsive ox-scroll oy-scroll h-px-500">
|
||||||
|
<table class="table-layout-fixed dataTable datatables-ajax table table-bordered no-footer">
|
||||||
|
<thead class="sticky-thead">
|
||||||
|
<tr>
|
||||||
|
<th style="width: 72px;">No.</th>
|
||||||
|
<th style="width: 56px;">
|
||||||
|
<input type="checkbox" class="form-check-input"
|
||||||
|
onchange="이곳에체크박스이벤트를넣으세요" />
|
||||||
|
</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명1</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명2</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명3</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명4</th>
|
||||||
|
<th style="width: 160px;">한글컬럼명5</th>
|
||||||
|
<th class="dummy-th"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody name="데이터조회결과가 표시될 영역의 이름을 적으세요">
|
||||||
|
</tbody>
|
||||||
|
<template name="이곳에 데이터가 1건이라도조회되었을경우의 템플릿명을 적으세요">
|
||||||
|
<tr data-key="{이곳에키값으로쓰이는DB컬럼명을넣으세요}">
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{ROW_NUM}</td>
|
||||||
|
<td class="text-center">
|
||||||
|
<input type="checkbox" class="form-check-input" name=""
|
||||||
|
value="{이곳에키값으로쓰이는DB컬럼명을넣으세요}"
|
||||||
|
onchange="이곳에체크박스이벤트를넣으세요" />
|
||||||
|
</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="text-center" onclick="{onclick}" ondblclick="{ondblclick}">{이곳에DB컬럼명을넣으세요}</td>
|
||||||
|
<td class="dummy-td"></td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
<template name="이곳에 데이터가 1건도조회되지않은경우의 템플릿명을 적으세요">
|
||||||
|
<tr>
|
||||||
|
<td valign="top" colspan="8" class="dataTables_empty text-center">정보를 찾지 못했습니다.</td>
|
||||||
|
</tr>
|
||||||
|
</template>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
let tool = new ToolPalette();
|
||||||
Loading…
Reference in New Issue