1. 테이블 관련 자바스크립트 소스 리팩토링(function에서 class로 변경)

2. HTML테이블의 스크롤을 내린 상태에서 테이블 열너비를 조절할 수 있도록 기능 수정

src/main/webapp/resources/applib/css/applib.css

@@ -185,10 +185,16 @@ table:has(.sticky-thead) td {
     float:right;
 }
 
-
+.resize-handle-container {
+	position: sticky;
+    top: 0;
+    display: inline;
+    z-index: 1;
+}
 .resize-handle {
 	position: absolute;
-	top: 0; width: 7px; height: 40px;
+	width: 7px; 
+	height: 40px;
 	background: transparent;
 	cursor: col-resize;
 }

src/main/webapp/resources/applib/js/componentization.js

@@ -1,38 +1,45 @@
+class Componentization {
+	
+	static help(){
+		console.log("fnMakeScrollableTable(테이블 컨테이너 엘리먼트, 스크롤 이벤트 처리 메소드) : 특정 테이블을 무한스크롤 페이징 테이블로 만든다.");
+		console.log("fnMakeResizableTable(테이블 컨테이너 엘리먼트) : 특정 테이블을 마우스드래그로 열너비 조정 가능한 테이블로 만든다.");
+		console.log("fnMakeRowNumberingTable(tbody엘리먼트, 행번호를 표시할 영역을 구하는 메소드, 행번호 표시 영역에 행번호를 넣는 메소드) : 특정 테이블을 행 번호를 자동으로 표시하는 테이블로 만든다.");
+	}
+	
 	/**************************************************************************
 	* 스크롤 테이블
 	**************************************************************************/
-function fnMakeScrollableTable(tableScrollEl, thisScrollendEvent){
+	static fnMakeScrollableTable(containerEl, thisScrollendEvent){
+		containerEl.thisScrollendEvent = thisScrollendEvent;
 			
-	tableScrollEl.thisScrollendEvent = thisScrollendEvent;
-	
-	tableScrollEl.changeContent = function(content, initScrollPosition, noMore){
-		var beforeRender = this.scrollTop;
+		containerEl.changeContent = function(content, initScrollPosition, noMore){
+			let beforeRender = this.scrollTop;
 			
 			$(this).find("tbody").html(content);
 			
 			this.scrollTop = 0;
-		var min = this.scrollTop;
+			let min = this.scrollTop;
 			this.scrollTop = this.scrollHeight;
-		var max = this.scrollTop;
-		var hasScroll = (min != max);
+			let max = this.scrollTop;
+			let hasScroll = (min != max);
 			
-		var more = document.createElement("tr");
+			let more = document.createElement("tr");
 			
 			if(hasScroll && !noMore){
 				more.classList.add("h-px-30");
 				
 				$(this).find("tbody").append(more);
 				
-			var ioCallbackFunc = function(entries, observer){
-				var entry = entries[0];
-				var target = entry.target;
+				let ioCallbackFunc = function(entries, observer){
+					let entry = entries[0];
+					let target = entry.target;
 					if(entry.isIntersecting){
 						observer.unobserve(target);
-					tableScrollEl.thisScrollendEvent();
+						containerEl.thisScrollendEvent();
 					}
 				};
 				
-			var io = new IntersectionObserver(ioCallbackFunc, {threshold : 0});
+				let io = new IntersectionObserver(ioCallbackFunc, {threshold : 0});
 				io.observe(more);
 			}
 			
@@ -40,7 +47,7 @@ function fnMakeScrollableTable(tableScrollEl, thisScrollendEvent){
 				this.scrollTop = 0;
 			} else {
 				
-			var afterRender = this.scrollTop;
+				let afterRender = this.scrollTop;
 				
 				if(beforeRender < afterRender){
 					this.scrollTop = beforeRender;
@@ -50,10 +57,11 @@ function fnMakeScrollableTable(tableScrollEl, thisScrollendEvent){
 		};
 	}
 	
+	
 	/**************************************************************************
 	* 컬럼 크기 조절 테이블
 	**************************************************************************/
-function fnMakeResizableTable(containerEl){
+	static fnMakeResizableTable(containerEl){
 
 		var cur_container, cur_handle, cur_index, cur_col, cur_col_width;
 		var cursorStart = 0, dragStart = false;
@@ -67,7 +75,7 @@ function fnMakeResizableTable(containerEl){
 			
 			cur_index = parseInt(cur_handle.getAttribute("data-resizecol"))-1;
 			
-		var thEls = $(cur_container.getElementsByTagName("table")[0]).find("th").not(".dummy-th");
+			let thEls = $(cur_container.getElementsByTagName("table")[0]).find("th").not(".dummy-th");
 			cur_col = thEls[cur_index];
 			cur_col_width = cur_col.getBoundingClientRect().width;
 			
@@ -83,9 +91,9 @@ function fnMakeResizableTable(containerEl){
 			e.preventDefault();
 	    	
 			if(dragStart){
-			var cursorPosition = event.pageX;
-			var mouseMoved = (cursorPosition - cursorStart);
-			var newWidth = cur_col_width + mouseMoved;
+				let cursorPosition = event.pageX;
+				let mouseMoved = (cursorPosition - cursorStart);
+				let newWidth = cur_col_width + mouseMoved;
 				
 				if(newWidth > 30){
 					cur_col.style.width = newWidth+"px";
@@ -102,22 +110,28 @@ function fnMakeResizableTable(containerEl){
 		
 		containerEl.style.position = "relative";
 				
+		let handleContainer = document.createElement("span");
+		handleContainer.className = "resize-handle-container";
+		let table = containerEl.querySelector("table")
+		containerEl.insertBefore(handleContainer, table);
+		
+		
 		containerEl.addHandle = function(){
-		var thEls = $(this.getElementsByTagName("table")[0]).find("th").not(".dummy-th");
-		var th_length = thEls.length;
-		var widthAcc = 0;
-		for(var i=0; i < th_length; i++){
+			let thEls = $(this.getElementsByTagName("table")[0]).find("th").not(".dummy-th");
+			let th_length = thEls.length;
+			let widthAcc = 0;
+			for(let i=0; i < th_length; i++){
 				widthAcc += thEls[i].getBoundingClientRect().width;
-			var yDiv = document.createElement("div");
+				let yDiv = document.createElement("div");
 				yDiv.className = "resize-handle";
 				yDiv.setAttribute("data-resizecol",i+1);
 				yDiv.style.cssText = "left: "+widthAcc+"px;";
-			this.append(yDiv);
+				this.querySelector(".resize-handle-container").append(yDiv);
 			}
 			
-		handleEls = this.getElementsByClassName("resize-handle");
-		var handle_length = handleEls.length;
-		for(var i = 0; i < handle_length; i++){
+			let handleEls = this.getElementsByClassName("resize-handle");
+			let handle_length = handleEls.length;
+			for(let i = 0; i < handle_length; i++){
 				handleEls[i].tableContainer = this;
 				handleEls[i].onmousedown = fnMouseDown;
 			}
@@ -134,20 +148,23 @@ function fnMakeResizableTable(containerEl){
 		}
 		
 		containerEl.addHandle();
+		
 	}
 	
 	/**************************************************************************
 	* 행 번호 표시 테이블
 	**************************************************************************/
-function fnMakeRowNumberingTable(tbody, markerFinder, markerSetter){
+	static fnMakeRowNumberingTable(tbody, markerFinder, markerSetter){
 		
-	var moCallbackFunc = function(mutationList, observer){
-		var target = mutationList[0].target;
+		let moCallbackFunc = function(mutationList, observer){
+			let target = mutationList[0].target;
 			
 			$(target).find("tr").each(function(idx, item){
 				markerSetter(markerFinder(item),idx+1);
 			});
 		};
-	var mo = new MutationObserver(moCallbackFunc);
+		let mo = new MutationObserver(moCallbackFunc);
 		mo.observe(tbody, {childList : true});
 	}
+	
+}