fix: totalPopup tab broken, grid form change

src/main/webapp/WEB-INF/jsp/fims/biz/common/popup/fimsTotal_popup.jsp

@@ -257,13 +257,12 @@
 						</table>
 					</div>
 				</div>
-			</div>
 			<div id="tabs_2">
 				<div class="w_fix05">
 					<div class="w_fix03 gridGroup">
 						<div style="width: 100%; border:0px solid black">
 							<p class="title deco_01">처리상태 변동이력</p>
-							<div id="grid"></div>
+							<div id="grid_t0"></div>
 							<%--삭제조심--%>
 						</div>
 					</div>
@@ -362,8 +361,6 @@
 				</div>
 
 				</div>
-
-			</div>
 			<div id="tabs_3">
 				<div class="w_fix05 gridGroup">
 					<div style="width: 100%; border:0px solid black">
@@ -396,62 +393,169 @@
 </form>
 <script type="text/javaScript" language="javascript" defer="defer">
 
+	//전역변수선언
+	const ARR_INSTANCE = [null,null,null];
+	let CUR_TAB_SEQ = 0;
+
 	$(document).ready(function(){
 		fimsTotal_popup.init();
+
+		$("#popupTabs").tabs({active : 0});
 	});
 	/* *******************************
      * 사용자 등록관리 Functions
      ******************************* */
-	var fimsTotal_popup = {
+	const fimsTotal_popup = {
 		/* ========================
         * 초기화
         ======================== */
 		init : function(){
-			/**
-			 * Grid Config Settings
-			 */
-			//Grid Style Set
-			Grid.applyTheme('striped'); // Call API of static method
-
 
-			$("#popupTabs").tabs({active : 0});
 
-			//tab 클릭 이벤트
+			/* ******************************
-			$("#popupTabs").on("click", "li", function(){
+			 * Grid
-				var tab = parseInt($("#popupTabs .ui-tabs-active a").attr("id"));
+			 ****************************** */
-				var tabbb = $('#popupTabs').children('div').not($('#tabs_'+tab));
+			const tab0Columns = [	//Grid 컬럼 정보(명칭,매핑 field, 기타옵션 등)
-				$('#tabs_'+tab).show(500);
+				{
-				$('#sch_tab_id').val(tab);
+					header: '발송결과',
-				//ARR_INSTANCE[tab].refreshLayout();
+					name: 'sndng_result_code',
+					width: 150,
+					//editor: 'text',
+					sortable: true,
+					align: 'center',
+					filter: {
+						type: 'text',
+						showClearBtn: true
+					}
+				},
+				{
+					header: '오류내용',
+					name: 'error_cn',
+					width: 150,
+					//editor: 'text',
+					sortable: true,
+					align: 'center'
+				},
+				{
+					header: '미납자',
+					name: 'om_name',
+					minWidth: 120,
+					//editor: 'text',
+					sortable: true,
+					align: 'center'
+				},
+				{
+					header: '주민등록번호',
+					name: 'ihidnum',
+					width: 120,
+					//editor: 'text',
+					sortable: true,
+					align: 'center'
+				},
+				{
+					header: '차량번호',
+					name: 'mm_carno',
+					minWidth: 120,
+					//editor: 'text',
+					sortable: true,
+					align: 'center'
+				},
+				{
+					header: '요청일시',
+					name: 'requst_dt',
+					width: 150,
+					//editor: 'text',
+					sortable: true,
+					align: 'center'
+				},
+				{
+					header: '조회일시',
+					name: 'inqire_dt',
+					width: 150,
+					//editor: 'text',
+					sortable: true,
+					align: 'center'
+				},
+				{
+					header: '열람일시',
+					name: 'readng_dt',
+					width: 150,
+					//editor: 'text',
+					sortable: true,
+					align: 'center'
+				},
+				{
+					header: '등록일시',
+					name: 'regist_dt',
+					width: 150,
+					//editor: 'text',
+					sortable: true,
+					align: 'center'
+				}
+			];
+			//DataSource
+			let tab0Datasource = {
+				//initialRequest: false,  // 화면 load시 조회 안함 - default
+				api: {
+					readData: {
+						url: '<c:url value="/adm/send/rqst/mng/find.do"/>'
+						, serializer: (params) => fnAddPageInfo(document.frmSearch, params)
+					}
+				}
+			};
+			const tab0Options = {
+				el: 'grid_t0',
+				minBodyHeight: 250,
+				bodyHeight: 250,              //[선택]Grid 높이 (number(단위: px)|'auto'|'fitToParent')
+				rowHeaders: ['rowNum'],
+				pageOptions: {
+					perPage: 100,
+					type: 'scroll'
+				},
+				columns: tab0Columns,
+				columnOptions: {
+					frozenCount: 0								//고정컬럼 갯수
+					, minWidth: 80								//최소 사이즈
+				},
+			};
+			const tab1Options = $.extend(true, {}, tab0Options, {
+				el: 'grid_d1',
+				minBodyHeight: 100,
+				bodyHeight: 100,
 			});
-
+			const tab2Options = $.extend(true, {}, tab0Options, {
-			//조회 목록 클릭 Event 설정
+				el: 'grid_d2',
-			instance.on('click', function(ev) {
+				minBodyHeight: 100,
-				var props = {};
+				bodyHeight: 100,
-				props['rowKey'] = ev.rowKey;
+			});
-				props['grid'] = ev.instance;
+			const tab3Options = $.extend(true, {}, tab0Options, {
-
+				el: 'grid_m1',
-				console.log(props);
+				minBodyHeight: 250,
+				bodyHeight: 250,
 			});
 
-			//Grid 체크박스 checked EventListner
+			ARR_INSTANCE[0] = TuiGrid.of(tab0Options, tab0Datasource, (res) => {
-			instance.on('check', function(ev) {
+				ARR_TOTCNT[0] = res.data.pagination.totalCount;
-				//		      console.log('check!', ev);
 			});
-			//Grid 체크박스 unchecked EventListner
+			ARR_INSTANCE[1] = TuiGrid.of(tab1Options, tab0Datasource, (res) => {
-			instance.on('uncheck', function(ev) {
+				ARR_TOTCNT[1] = res.data.pagination.totalCount;
-				//		      console.log('uncheck!', ev);
 			});
-			//Grid 체크박스 focus이동 EventListner
+			ARR_INSTANCE[2] = TuiGrid.of(tab2Options, tab0Datasource, (res) => {
-			instance.on('focusChange', function(ev) {
+				ARR_TOTCNT[2] = res.data.pagination.totalCount;
-				//		      console.log('change focused cell!', ev);
 			});
-			//Grid 처리상태에 따른 콜백
+			ARR_INSTANCE[3] = TuiGrid.of(tab3Options, tab0Datasource, (res) => {
-			instance.on('successResponse', function(ev) {
+				ARR_TOTCNT[3] = res.data.pagination.totalCount;
-				//조회한 데이터 카운트
-				$('#totCnt span').text(JSON.parse(ev.xhr.response).data.pagination.totalCount);
 			});
 
+			//tab 클릭 이벤트
+			/*$("#popupTabs").on("click", "li", function(){
+				var tab = parseInt($("#popupTabs .ui-tabs-active a").attr("id"));
+				var tabbb = $('#popupTabs').children('div').not($('#tabs_'+tab));
+				$('#tabs_'+tab).show(500);
+				$('#sch_tab_id').val(tab);
+				//ARR_INSTANCE[tab].refreshLayout();
+			});*/
+
 			/**
 			 * Elements EventListener Settings
 			 */
@@ -644,315 +748,6 @@
 
 
 
-	/* ******************************
-     * Grid 환경 설정
-     ****************************** */
-	var GridConfig = new XitTuiGridConfig();
-	GridConfig = $.extend({}, GridConfig);
-	GridConfig.setOptGridId('grid');					//Grid를 출력할 Element ID(해당 Element에 Grid가 출력 됨)
-	GridConfig.setOptGridHeight(250);				//Grid 높이(단위: px)
-	GridConfig.setOptRowHeight(30);				//Grid row 높이(단위: px)  /*2021.09.23 박소영 as-is:GridConfig.setOptRowHeight(20) to-be:GridConfig.setOptRowHeight(30);*/
-	GridConfig.setOptRowHeaderType('rowNum');	//Row 첫번째 Cell 타입(rowNum: 순번, checkbox: 체크박스, '': 아무것도 출력 안함)
-	GridConfig.setOptPageOptions({				//페이징(Pagination) 옵션
-		/** 2022.04.22 최정민
-		 * 상세보기 페이지에 페이징 기능 제거
-		 */
-		//useClient: true							//Client Paging 여부(true 설정 시 클라이언트 자체 페이징 처리. 서버호출 X)
-		perPage: 100								//페이지당 표시 건수
-		, type: 'scroll'
-
-	});
-	GridConfig.setOptColumnOptions({				//컬럼고정 옵션
-		frozenCount: 0
-	});
-	GridConfig.setOptDataSource({					//DataSource
-		/* -----------------------
-        * DataSource Config Setting
-        *  -설정항목은 Global 적용 되며
-        *  -API별 적용을 원할 경우 각 API 안에 작성 가능(우선순위: 개별->글로벌)
-        ----------------------- */
-		//contentType: 'application/json',
-		//headers: { 'x-custom-header': 'custom-header' },
-		initialRequest: false, //디폴트 값은 true(false: 인스턴스 생성 시 요청은 보내지 않음. 이런 경우 "instance.reloadData()"를 사용하여 요청 가능)
-		//serializer: function(params) {
-		//return $(document.frmSearch).serialize();
-		// },
-		/* -----------------------
-        * DataSource API Setting
-        ----------------------- */
-		api: {
-			readData : {
-				url: '<c:url value="/adm/send/rqst/mng/find.do"/>', method: 'GET'
-				,initParams: {}
-				,serializer: function(params) {
-					var form = document.frmSearch;
-					var serializeParam = $(form).serialize();
-					for(var key in params){
-						if(key=='perPage'){
-							if(params[key]==undefined)
-								serializeParam +='&'+key+'=-1';
-							else
-								serializeParam +='&'+key+'='+params[key];
-						}else
-							serializeParam +='&'+key+'='+params[key];
-					}
-					return serializeParam;
-				}
-			}
-			,createData: { url: '', method: 'POST'}
-			,updateData: { url: '<c:url value="/adm/send/rqst/mng/proc.do"/>' , method: 'PUT'}
-			,modifyData: { url: '', method: 'PUT'}
-			,deleteData: { url: '', method: 'DELETE'}
-		}
-	});
-	/** 2022.04.22 최정민
-	 * 그리드 정렬기능(sortable: true) 추가, 셀수정기능 제거(editor: 'text' 주석)
-	 */
-	GridConfig.setOptColumns([	//Grid 컬럼 정보(명칭,매핑 field, 기타옵션 등)
-
-		{
-			header: '발송결과',
-			name: 'sndng_result_code',
-			width: 150,
-			//editor: 'text',
-			sortable: true,
-			align: 'center',
-			filter: {
-				type: 'text',
-				showClearBtn: true
-			}
-		},
-		{
-			header: '오류내용',
-			name: 'error_cn',
-			width: 150,
-			//editor: 'text',
-			sortable: true,
-			align: 'center'
-		},
-		{
-			header: '미납자',
-			name: 'om_name',
-			minWidth: 120,
-			//editor: 'text',
-			sortable: true,
-			align: 'center'
-		},
-		{
-			header: '주민등록번호',
-			name: 'ihidnum',
-			width: 120,
-			//editor: 'text',
-			sortable: true,
-			align: 'center'
-		},
-		{
-			header: '차량번호',
-			name: 'mm_carno',
-			minWidth: 120,
-			//editor: 'text',
-			sortable: true,
-			align: 'center'
-		},
-		{
-			header: '요청일시',
-			name: 'requst_dt',
-			width: 150,
-			//editor: 'text',
-			sortable: true,
-			align: 'center'
-		},
-		{
-			header: '조회일시',
-			name: 'inqire_dt',
-			width: 150,
-			//editor: 'text',
-			sortable: true,
-			align: 'center'
-		},
-		{
-			header: '열람일시',
-			name: 'readng_dt',
-			width: 150,
-			//editor: 'text',
-			sortable: true,
-			align: 'center'
-		},
-		{
-			header: '등록일시',
-			name: 'regist_dt',
-			width: 150,
-			//editor: 'text',
-			sortable: true,
-			align: 'center'
-		}
-	]);
-
-	var GridConfig_d1 = $.extend({}, GridConfig);	//Grid 인스턴스
-	/*var GridConfig_d1 = new XitTuiGridConfig();*/
-	GridConfig_d1.setOptGridId('grid_d1');
-	GridConfig_d1.setOptColumnOptions({					//컬럼고정 옵션
-		frozenCount: 0								//고정컬럼 갯수
-		, minWidth: 80								//최소 사이즈
-	});
-	GridConfig_d1.setOptGridHeight(100);				//Grid 높이(단위: px)
-	GridConfig_d1.setOptRowHeight(30);				//Grid row 높이(단위: px)  /*2021.09.23 박소영 as-is:GridConfig.setOptRowHeight(20) to-be:GridConfig.setOptRowHeight(30);*/
-	GridConfig_d1.setOptRowHeaderType('rowNum');	//Row 첫번째 Cell 타입(rowNum: 순번, checkbox: 체크박스, '': 아무것도 출력 안함)
-	GridConfig_d1.setOptPageOptions({				//페이징(Pagination) 옵션
-		/** 2022.04.22 최정민
-		 * 상세보기 페이지에 페이징 기능 제거
-		 */
-		//useClient: true							//Client Paging 여부(true 설정 시 클라이언트 자체 페이징 처리. 서버호출 X)
-		perPage: 100								//페이지당 표시 건수
-		, type: 'scroll'
-
-	});
-	GridConfig_d1.setOptColumns([						//Grid 컬럼 정보(명칭,매핑 field, 기타옵션 등)
-		{
-			header: '변경일시',
-			name: 'pvtcpt_road_sctn_nm',
-			width: 300,
-			sortable: true,
-			align: 'center',
-			sortingType: 'desc',
-//			filter: 'select',
-			/* renderer: {
-                type: XitButtonRenderer,
-                options: {
-                    value: '{0}',
-                    listColumns: ['cmpny_nm', 'cmpny', 'cmpny_id'],  //[0]: 항목값, [1]: 공통팝업종류, [2]: 공통팝업 파라미터
-                    callbackFnc: 'bustms1010302_list.fn_cmmnViewPopupBtn'
-                }
-            } */
-		},
-		{
-			header: '내용',
-			name: 'regist_dt',
-			width: 500,
-			//editor: 'text',
-			sortable: true,
-			align: 'left'
-		}
-	]);
-
-	var GridConfig_d2 = $.extend({}, GridConfig);	//Grid 인스턴스
-	GridConfig_d2.setOptGridId('grid_d2');
-	GridConfig_d2.setOptColumnOptions({					//컬럼고정 옵션
-		frozenCount: 0								//고정컬럼 갯수
-		, minWidth: 80								//최소 사이즈
-	});
-	GridConfig_d2.setOptGridHeight('auto');				//Grid 높이(단위: px)
-	GridConfig_d2.setOptRowHeight(30);				//Grid row 높이(단위: px)  /*2021.09.23 박소영 as-is:GridConfig.setOptRowHeight(20) to-be:GridConfig.setOptRowHeight(30);*/
-	GridConfig_d2.setOptRowHeaderType('rowNum');	//Row 첫번째 Cell 타입(rowNum: 순번, checkbox: 체크박스, '': 아무것도 출력 안함)
-	GridConfig_d2.setOptPageOptions({				//페이징(Pagination) 옵션
-		/** 2022.04.22 최정민
-		 * 상세보기 페이지에 페이징 기능 제거
-		 */
-		//useClient: true							//Client Paging 여부(true 설정 시 클라이언트 자체 페이징 처리. 서버호출 X)
-		perPage: 100								//페이지당 표시 건수
-		, type: 'scroll'
-
-	});
-
-	GridConfig_d2.setOptColumns([						//Grid 컬럼 정보(명칭,매핑 field, 기타옵션 등)
-		{
-			header: '구간',
-			name: 'pvtcpt_road_sctn_nm',
-			width: 120,
-			sortable: true,
-			align: 'center',
-			sortingType: 'desc',
-//			filter: 'select',
-			/* renderer: {
-                type: XitButtonRenderer,
-                options: {
-                    value: '{0}',
-                    listColumns: ['cmpny_nm', 'cmpny', 'cmpny_id'],  //[0]: 항목값, [1]: 공통팝업종류, [2]: 공통팝업 파라미터
-                    callbackFnc: 'bustms1010302_list.fn_cmmnViewPopupBtn'
-                }
-            } */
-
-		},
-		{
-			header: '내용',
-			name: 'regist_dt',
-			width: 200,
-			//editor: 'text',
-			sortable: true,
-			align: 'left'
-		},
-		{
-			header: '내용',
-			name: 'regist_dt',
-			width: 200,
-			//editor: 'text',
-			sortable: true,
-			align: 'left'
-		},
-		{
-			header: '내용',
-			name: 'regist_dt',
-			width: 200,
-			//editor: 'text',
-			sortable: true,
-			align: 'left'
-		},
-		{
-			header: '내용',
-			name: 'regist_dt',
-			width: 200,
-			//editor: 'text',
-			sortable: true,
-			align: 'left'
-		}
-	]);
-
-	var GridConfig_m1 = $.extend({}, GridConfig);	//Grid 인스턴스
-	GridConfig_m1.setOptGridId('grid_m1');
-	GridConfig_m1.setOptColumnOptions({					//컬럼고정 옵션
-		frozenCount: 0								//고정컬럼 갯수
-		, minWidth: 80								//최소 사이즈
-	});
-	GridConfig_m1.setOptGridHeight('auto');				//Grid 높이(단위: px)
-	GridConfig_m1.setOptRowHeight(30);				//Grid row 높이(단위: px)  /*2021.09.23 박소영 as-is:GridConfig.setOptRowHeight(20) to-be:GridConfig.setOptRowHeight(30);*/
-	GridConfig_m1.setOptRowHeaderType('rowNum');	//Row 첫번째 Cell 타입(rowNum: 순번, checkbox: 체크박스, '': 아무것도 출력 안함)
-	GridConfig_m1.setOptPageOptions({				//페이징(Pagination) 옵션
-		/** 2022.04.22 최정민
-		 * 상세보기 페이지에 페이징 기능 제거
-		 */
-		//useClient: true							//Client Paging 여부(true 설정 시 클라이언트 자체 페이징 처리. 서버호출 X)
-		perPage: 100								//페이지당 표시 건수
-		, type: 'scroll'
-
-	});
-	GridConfig_m1.setOptColumns([						//Grid 컬럼 정보(명칭,매핑 field, 기타옵션 등)
-		{
-			header: '구간',
-			name: 'pvtcpt_road_sctn_nm',
-			width: 120,
-			sortable: true,
-			align: 'center',
-			sortingType: 'desc',
-//			filter: 'select',
-			/* renderer: {
-                type: XitButtonRenderer,
-                options: {
-                    value: '{0}',
-                    listColumns: ['cmpny_nm', 'cmpny', 'cmpny_id'],  //[0]: 항목값, [1]: 공통팝업종류, [2]: 공통팝업 파라미터
-                    callbackFnc: 'bustms1010302_list.fn_cmmnViewPopupBtn'
-                }
-            } */
-		}
-	]);
-
-	var Grid = tui.Grid;
-	var instance_detail_0 = GridConfig.instance();
-	var instance_detail_1 = GridConfig_d1.instance();
-	var instance_detail_2 = GridConfig_d2.instance();
-	var instance_min_1 = GridConfig_m1.instance();
-
-
-
 	var originData = null;
 	console.log(originData);