컬럼 크기조절 가능한 테이블 생성 함수 추가

src/main/webapp/resources/css/fims/framework/common/xit-core-extend.css

@@ -559,6 +559,14 @@ span.skeleton {
 	min-width: auto !important;
 }
 
+.resize-handle {
+	position: absolute; 
+	top: 0; width: 7px; height: 102%; 
+	background: transparent;
+	cursor: col-resize;
+}
+
+
 /* 배경색, 외곽선 */
 .traffic {
 

src/main/webapp/resources/js/fims/framework/cmm/componentization.js

@@ -286,19 +286,18 @@ function fnMakeSingleImageViewer(imgEl, fileInputEl, dataAttributeForFilePath, d
 **************************************************************************/
 function fnMakeDraggableDialog(dialogEl) {
 
+    var currentDialog;
     var currentPosX = 0, currentPosY = 0, previousPosX = 0, previousPosY = 0;
 
-	$(dialogEl).find(".modal-header")[0].onmousedown = fnDragMouseDown;
-
     function fnDragMouseDown(e) {
        
         e.preventDefault();
-       
+        
+        currentDialog = this.targetDialog;
         previousPosX = e.clientX;
         previousPosY = e.clientY;
 
         document.onmouseup = fnCloseDragElement;
-       
         document.onmousemove = fnElementDrag;
     }
 
@@ -312,12 +311,101 @@ function fnMakeDraggableDialog(dialogEl) {
         previousPosX = e.clientX;
         previousPosY = e.clientY;
       
-        dialogEl.style.top = (dialogEl.offsetTop - currentPosY) + 'px';
-        dialogEl.style.left = (dialogEl.offsetLeft - currentPosX) + 'px';
+        currentDialog.style.top = (currentDialog.offsetTop - currentPosY) + 'px';
+        currentDialog.style.left = (currentDialog.offsetLeft - currentPosX) + 'px';
     }
 
     function fnCloseDragElement() {
         document.onmouseup = null;
         document.onmousemove = null;
     }
+       
+	$(dialogEl).find(".modal-header")[0].targetDialog = dialogEl;
+	$(dialogEl).find(".modal-header")[0].onmousedown = fnDragMouseDown;
+}
+
+/**************************************************************************
+* 컬럼 크기 조절 테이블
+**************************************************************************/
+function fnMakeResizableTable(containerEl){
+	
+	var cur_container, cur_handle, cur_index, cur_col, cur_col_width;
+	var cursorStart = 0, dragStart = false;
+	
+	function fnMouseDown(e){
+		
+		e.preventDefault();
+		
+		cur_handle = this;
+		cur_container = cur_handle.tableContainer;
+		
+		cur_index = parseInt(cur_handle.getAttribute("data-resizecol"))-1;
+		
+		var thEls = $(cur_container.getElementsByTagName("table")[0]).find("th").not(".dummy-th");
+		cur_col = thEls[cur_index];
+		cur_col_width = cur_col.getBoundingClientRect().width;
+		
+		dragStart = true;
+		cursorStart = event.pageX;
+
+		document.onmouseup = fnCloseResize;
+		document.onmousemove = fnMouseMove;
+    
+	}
+
+	function fnMouseMove(e){
+		e.preventDefault();
+    	
+		if(dragStart){
+			var cursorPosition = event.pageX;
+			var mouseMoved = (cursorPosition - cursorStart);
+			var newWidth = cur_col_width + mouseMoved;
+			
+			if(newWidth > 30){
+				cur_col.style.width = newWidth+"px";
+			}
+		}
+	}
+    
+	function fnCloseResize(e){
+		document.onmousemove = null;
+		document.onmouseup = null;
+		cur_container.removeHandle();
+		cur_container.addHandle();
+	}
+	
+	containerEl.style.position = "relative";
+
+	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++){
+			widthAcc += thEls[i].getBoundingClientRect().width;
+			var yDiv = document.createElement("div");
+			yDiv.className = "resize-handle";
+			yDiv.setAttribute("data-resizecol",i+1);
+			yDiv.style.cssText = "left: "+widthAcc+"px;";
+			this.append(yDiv);
+		}
+		
+		handleEls = this.getElementsByClassName("resize-handle");
+		var handle_length = handleEls.length;
+		for(var i = 0; i < handle_length; i++){
+			handleEls[i].tableContainer = this;
+			handleEls[i].onmousedown = fnMouseDown;
+		}
+	};
+	
+	containerEl.removeHandle = function(){
+		$(this).find(".resize-handle").remove();
+	}
+	
+	containerEl.changeColumn = function(ths){
+		this.removeHandle();
+		$(this).find("table thead tr").html(ths);
+		this.addHandle();
+	}
+	
+	containerEl.addHandle();
 }