From ab7df570ebfc94e5afc5d7721268804ef5bcb343 Mon Sep 17 00:00:00 2001 From: leebj Date: Mon, 19 Aug 2024 16:51:15 +0900 Subject: [PATCH] =?UTF-8?q?toolPalette.html=20=ED=8C=9D=EC=97=85=20?= =?UTF-8?q?=ED=99=94=EB=A9=B4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../webapp/resources/html/toolPalette.html | 147 ++++++++++++++++++ .../resources/js/support/toolPalette.js | 120 +++++++++++++- 2 files changed, 265 insertions(+), 2 deletions(-) create mode 100644 src/main/webapp/resources/html/toolPalette.html diff --git a/src/main/webapp/resources/html/toolPalette.html b/src/main/webapp/resources/html/toolPalette.html new file mode 100644 index 0000000..f3c77b7 --- /dev/null +++ b/src/main/webapp/resources/html/toolPalette.html @@ -0,0 +1,147 @@ + + + + + 툴 팔레트 + + + + + + + + + + + + + + + + +
+
+

+ +

+
+
+ + + + + + + +
+
+
+ +
+

+ +

+
+
+ + + + + + +
+
+
+ +
+

+ +

+
+
+ +
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/main/webapp/resources/js/support/toolPalette.js b/src/main/webapp/resources/js/support/toolPalette.js index 893315d..fdecc05 100644 --- a/src/main/webapp/resources/js/support/toolPalette.js +++ b/src/main/webapp/resources/js/support/toolPalette.js @@ -23,6 +23,7 @@ class ToolPalette { str += "btnExcel : 엑셀저장 버튼 \n"; str += "datepicker : 날짜입력기 \n"; str += "datepickerFromTo : 날짜입력기(범위) \n"; + str += "byTerm : 키워드 검색조건 \n"; str += "searchArea2 : 검색조건영역(열 2등분) \n"; str += "searchArea3 : 검색조건영역(열 3등분) \n"; str += "searchArea4 : 검색조건영역(열 4등분) \n"; @@ -30,10 +31,16 @@ class ToolPalette { str += "dataGrid_num_cb : 데이터그리드(행번호,체크박스 포함) \n"; str += "dataGrid_num : 데이터그리드(행번호 포함) \n"; str += "dataGrid_cb : 데이터그리드(체크박스 포함) \n"; - + + str += "dsc_list : 데이터셋컨트롤(목록조회) 스크립트 \n"; + console.log(str); } - + + open(){ + window.open("/webjars/html/toolPalette.html","_blank","width=520, height=700"); + } + get button(){ clipboardCopy(``); } @@ -307,6 +314,115 @@ class ToolPalette { } + get byTerm(){ + clipboardCopy( +`
+ + + +
` + ); + } + + 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; +}; + +` + ); + } + }