24/09/09 주소록 대량등록 타뷸레이터 width 값 변경 시 위에 select 선택 div 동일하게 변경

src/main/webapp/WEB-INF/jsp/web/addr/include/addrListforExcel.jsp

@@ -87,6 +87,20 @@ $(document).ready(function(){
         }
     });
 
+    // 타뷸레이터 width값 변경 시 위에 select width 값 변경
+    setTimeout(function(){
+    	$(".tabulator-col-resize-handle").on("mousedown",function(){
+        	$(this).on("mousemove",function(){
+        		//console.log("d")
+        		var colWid = $(this).prev(".tabulator-col-sorter-element").width();
+        		var colIdx = $(this).prev(".tabulator-col-sorter-element").index();
+        		colIdx = colIdx / 2;
+        		colIdx = colIdx - 1;
+        		
+        		$(".select_adr_hd div").eq(colIdx).width(colWid);
+        	})
+        })    	
+    })
 
 
 	//받는사람 오류번호 삭제 처리해주기
@@ -561,7 +575,7 @@ $(document).on("click", "#duplicationChkAll", function(e) {
 					
 					
 					
-					<div class="adr_excel" style="margin-top: 13px;">
+					<div class="adr_excel" style="margin-top: 13px; overflow-x:auto;">
 						<!-- thead -->
 						<div class="adr_hd select_adr_hd" data-group="tableExcel">
 							<div style="width: 80px;"></div>

src/main/webapp/js/web/addr/init.js

@@ -60,6 +60,29 @@ $(document).ready(function(){
 	    },
 	});
 
+	// 타뷸레이터 width값 변경 시 위에 select width 값 변경
+	var titleArray = ["A","B","C","D","E","F","G"];
+	
+	$tableExcel.on("columnWidth",function(column){
+		//console.log(column._column.element)
+		//console.log(column._column.width)
+		//console.log(column._column.definition.title)
+		var titleIndex = titleArray.indexOf(column._column.definition.title);
+		titleIndex += 1;
+		console.log(titleIndex)
+		if(titleIndex != 0){
+			$('.select_adr_hd>div').eq(titleIndex).css('width', column._column.width);
+		}else{}
+	});
+	
+   $tableExcel.on("scrollHorizontal",function(left){
+	      $(".adr_excel").scrollLeft(left);
+   })
+
+	
+	$(".adr_excel").on("scroll",function(){
+		$(".tabulator-tableholder").scrollLeft($(this).scrollLeft());
+	});
 	
 	
 

src/main/webapp/publish/css/popupLayer.css

@@ -74,7 +74,7 @@
 /* 팝업 table */
 /* thead */
 .adr_excel {border: 1px solid #ccc; border-radius: 5px;}
-.adr_excel .adr_hd { display: flex; height: 36px; line-height: 36px; font-size: 16px; box-sizing: border-box; position: relative; z-index: 0; background-color: #e8e8e8; text-align: center; border-radius: 3px 3px 0 0;}
+.adr_excel .adr_hd { display: inline-flex; height: 36px; line-height: 36px; font-size: 16px; box-sizing: border-box; position: relative; z-index: 0; background-color: #e8e8e8; text-align: center; border-radius: 3px 3px 0 0;}
 .adr_excel .adr_hd>div {border-bottom: 1px solid #9fa0a0; position: relative;}
 .adr_excel .adr_hd>div::after {content: ""; background-color: #d4d4d4; width: 1px; height: 14px; position: absolute; top: 50%; transform: translateY(-50%); right: 0;}
 .adr_excel .adr_hd .group_input:after {content: none;}
@@ -95,7 +95,7 @@
 .adr_excel .adr_hd>div,.adr_excel .adr_bd>div{width:calc((100% - 40px)/7);}
 .adr_excel .adr_hd>div:nth-child(1),.adr_excel .adr_bd>div:nth-child(1){width:40px;}
 .adr_excel .adr_hd.select_adr_hd{background:#e0e0e0;}
-.adr_excel .adr_hd>div select{width:calc(100% - 8px);height:36px;background:transparent url(/publish/images/select_search.png) no-repeat 90% 15px;background-size:9%;margin:-8px 0 0 0;border:0;text-align:center;line-height:1.3;}
+.adr_excel .adr_hd>div select{width:calc(100% - 8px);height:36px;background:transparent url(/publish/images/select_search.png) no-repeat 90% 15px;background-size:16px auto;margin:-8px 0 0 0;border:0;text-align:center;line-height:1.3;}
 .adr_excel .adr_hd>div:last-child::after{display:none;}
 
 /* 붙여넣기 colgroup */