Commit @529f6c75b752095526450f6a86430572fa5fa7ce

정수빈 2024-09-09

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

@529f6c75b752095526450f6a86430572fa5fa7ce

9328e68

529f6c7

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

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

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


         }
     });
 
+    // 타뷸레이터 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);
+        	})
+        })    	
+    })
 
 
 	//받는사람 오류번호 삭제 처리해주기

 					
 					
 					
-					<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>

9328e68

529f6c7

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

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

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


 	    },
 	});
 
+	// 타뷸레이터 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());
+	});
+	
+	
 
 
 	$tableClip = new Tabulator("#tabulator_clip", {

9328e68

529f6c7

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

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

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


 /* 팝업 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;}

 .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 */

Add a comment

Open 0
Closed 0

List

...	...	@@ -87,6 +87,20 @@
87	87	}
88	88	});
89	89
	90	+ // 타뷸레이터 width값 변경 시 위에 select width 값 변경
	91	+ setTimeout(function(){
	92	+ $(".tabulator-col-resize-handle").on("mousedown",function(){
	93	+ $(this).on("mousemove",function(){
	94	+ //console.log("d")
	95	+ var colWid = $(this).prev(".tabulator-col-sorter-element").width();
	96	+ var colIdx = $(this).prev(".tabulator-col-sorter-element").index();
	97	+ colIdx = colIdx / 2;
	98	+ colIdx = colIdx - 1;
	99	+
	100	+ $(".select_adr_hd div").eq(colIdx).width(colWid);
	101	+ })
	102	+ })
	103	+ })
90	104
91	105
92	106	//받는사람 오류번호 삭제 처리해주기
...	...	@@ -561,7 +575,7 @@
561	575
562	576
563	577
564		- <div class="adr_excel" style="margin-top: 13px;">
	578	+ <div class="adr_excel" style="margin-top: 13px; overflow-x:auto;">
565	579	<!-- thead -->
566	580	<div class="adr_hd select_adr_hd" data-group="tableExcel">
567	581	<div style="width: 80px;"></div>

...	...	@@ -60,8 +60,31 @@
60	60	},
61	61	});
62	62
	63	+ // 타뷸레이터 width값 변경 시 위에 select width 값 변경
	64	+ var titleArray = ["A","B","C","D","E","F","G"];
63	65
	66	+ $tableExcel.on("columnWidth",function(column){
	67	+ //console.log(column._column.element)
	68	+ //console.log(column._column.width)
	69	+ //console.log(column._column.definition.title)
	70	+ var titleIndex = titleArray.indexOf(column._column.definition.title);
	71	+ titleIndex += 1;
	72	+ console.log(titleIndex)
	73	+ if(titleIndex != 0){
	74	+ $('.select_adr_hd>div').eq(titleIndex).css('width', column._column.width);
	75	+ }else{}
	76	+ });
	77	+
	78	+ $tableExcel.on("scrollHorizontal",function(left){
	79	+ $(".adr_excel").scrollLeft(left);
	80	+ })
64	81
	82	+
	83	+ $(".adr_excel").on("scroll",function(){
	84	+ $(".tabulator-tableholder").scrollLeft($(this).scrollLeft());
	85	+ });
	86	+
	87	+
65	88
66	89
67	90	$tableClip = new Tabulator("#tabulator_clip", {

...	...	@@ -74,7 +74,7 @@
74	74	/* 팝업 table */
75	75	/* thead */
76	76	.adr_excel {border: 1px solid #ccc; border-radius: 5px;}
77		-.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;}
	77	+.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;}
78	78	.adr_excel .adr_hd>div {border-bottom: 1px solid #9fa0a0; position: relative;}
79	79	.adr_excel .adr_hd>div::after {content: ""; background-color: #d4d4d4; width: 1px; height: 14px; position: absolute; top: 50%; transform: translateY(-50%); right: 0;}
80	80	.adr_excel .adr_hd .group_input:after {content: none;}
...	...	@@ -95,7 +95,7 @@
95	95	.adr_excel .adr_hd>div,.adr_excel .adr_bd>div{width:calc((100% - 40px)/7);}
96	96	.adr_excel .adr_hd>div:nth-child(1),.adr_excel .adr_bd>div:nth-child(1){width:40px;}
97	97	.adr_excel .adr_hd.select_adr_hd{background:#e0e0e0;}
98		-.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;}
	98	+.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;}
99	99	.adr_excel .adr_hd>div:last-child::after{display:none;}
100	100
101	101	/* 붙여넣기 colgroup */

Delete comment