Tabulator 타블레이터 그리드(테이블) 2개

그리드1 :

tableTempData = [
			{ORIGIN:"남구", DETINATION:"남구", passage:"999,999", GRP_ID:"01"},
			{ORIGIN:"동구", DETINATION:"남구", passage:"999,999", GRP_ID:"02"},
			{ORIGIN:"서구", DETINATION:"남구", passage:"999,999", GRP_ID:"03"}
		];
		dsrcOD.grid1 = new Tabulator('#'+dsrcOD.pv+'Grid_od',{
			data : tableTempData,
			placeholder:"No Data Set",
			movableRows:true,
			movableRowsConnectedTables:'#'+dsrcOD.pv+'Grid',
		  movableRowsReceiver: "add",
			columns: [ // visible:false
				{ field: "ORIGIN",     title: "시작지점", width: "33%", },
				{ field: "DETINATION", title: "종료지점", width: "33%", },
				{ field: "passage",    title: "통행수",  width: "33%", },
			],
		});
		
		//Grid row 클릭
		dsrcOD.grid1.on("rowClick", function(e, row){
			//e - the click event object
      //row - row component
			//console.log("[1] rowClick : e : ",e);
			//console.log("[1] rowClick : row : ",row._row.data);
			//console.log("[1] rowClick : row.getData() : ", row.getData());
		  dsrcOD.selectOdRouteInfo(row.getData().GRP_ID);
			
		});
		 
		//Grid rowSelected 클릭
		dsrcOD.grid1.on("rowSelected", function(row){
			//console.log("[2] rowSelected : row_row.data :", row._row.data); // component
		});

 

 

그리드2 :

 

tableTempData = [
			{ROAD_ID:"SWROAD0001", ORIGIN:"남구", O_MCUID:"270", O_MCUNM:"매암사거리", DETINATION:"남구", D_MCUID:"244", D_MCUNM:"신두왕삼거리", TOTAL:"67644", passage:"543",Route:"414"   },
			{ROAD_ID:"SWROAD0002", ORIGIN:"남구", O_MCUID:"244", O_MCUNM:"신두왕삼거리", DETINATION:"남구", D_MCUID:"214", D_MCUNM:"변전소사거리", TOTAL:"67644", passage:"516",Route:"487"  },
	    {ROAD_ID:"SWROAD0003", ORIGIN:"남구", O_MCUID:"244", O_MCUNM:"신두왕삼거리", DETINATION:"남구", D_MCUID:"270", D_MCUNM:"매암사거리", TOTAL:"67644", passage:"460",Route:"421"   },
		];
		dsrcOD.grid2 = new Tabulator('#'+dsrcOD.pv+'Grid_route', {
      //layout:"fitColumns",
			// resizableRows:true,
			data : tableTempData,
			placeholder:"No Data Set",
			movableRows:true,
			columns: [ 
					{ field: "ORIGIN",  title: "시작지점",    width: "15%", },
					{ field: "O_MCUID", title: "시작MCU ID",},
		      { field: "O_MCUNM", title: "시작MCU 명", },
		      { field: "DETINATION", title: "종료지점", width: "15%", },
		      { field: "D_MCUID", title: "종료MCU ID", },
		      { field: "D_MCUNM", title: "종료MCU 명", },
		      { field: "TOTAL", title: "TOTAL",      },
		      { field: "passage", title: "통행수",     },
		      { field: "Route", title: "경로수",       }
				]
      }); 
			//[1] dsrcOD.grid2.on("rowSelected", function(row){ dsrcOD.rowClick(row); });
			//[2] dsrcOD.grid2.on("rowSelected", function(row){ dsrcOD.focusLnk(row); });
			
			dsrcOD.grid2.on("rowClick", function(e, row){
				const rwData = dsrcOD.grid2.getSelectedData()[0]; // 무조건 0
				console.log("initGrid_route : rwData : ",rwData);
				if(rwData){
					console.log("짠");
					//dsrcOD.lsMap.removePolyAll();
					//[1] dsrcOD.focusLnk(rwData.ROAD_ID);
					//[2] dsrcOD.focusLnk(rwData);
					dsrcOD.setUpDownGrid("SWROAD0003"); // ROAD_ID
				}else{
					console.log(" else 짠");
					//dsrcOD.lsMap.remove.removePolyAll();
				}
		});

 

rowClick : 메소드 만든것. (위에 코드들도 모두 다 객체 리터럴 안에 있었 코드들 )

 

rowClick: function(row){
		row = row.getData();
		console.log("rowClick :::::::::::::::::::"+row);
		console.log("rowClick :::::::::::::::::::"+JSON.stringify(row));
		console.log("---"+row.ROAD_ID);
		
		dsrcOD.selected[dsrcOD.key] = row.ROAD_ID; 
		dsrcOD.data = null;
		
		// 오른쪽 상단 도로축id 및 도로축명 (this.pv = dsrcOD, mgmtTmpl = mgmtTemplate.js)
		//mgmtTmpl.setFormData(this.pv, row);
		//도로 종류 선택
		$("#roadKndCd").val(row.ROAD_KND_CD).prop("selected", true);
		//데이터 수정으로 초기화
		mgmtTmpl.closeRegist(this.pv);
		
		//this.changeMarker(row.ROAD_KND_CD);	//도로종류에 따라 마커 변경
		//this.setRoadCrsrdGrid(row.ROAD_ID);
		this.setUpDownGrid(row.ROAD_ID);
	}