[Tabulator] cell & row click event 동시에!

2021.07.18 - [공부기록/JQUERY] - [Tabulator] 라이브러리 옵션들(반응형 레이아웃, 아이콘 사용)

 

위 포스팅에서 아이콘을 사용해서 edit, delete 기능을 구현했다. 바로 cellClick 함수를 이용해서~

그리고 행을 클릭하면 해당 행의 상세보기 화면을 띄우는 기능을 구현하고자 했다.

이때 cellClick과 rowClick의 이벤트가 동시에 발생하는 문제를 막기 위해 다음과 같이 작성해준다.

table = new Tabulator("#dic", {
	layout:"fitDataFill",
	placeholder:"데이터가 존재하지 않습니다.",
	columns : [
		{ formatter:"responsiveCollapse", width:50, minWidth:50, hozAlign:"center", resizable:false, headerSort:false,
			cellClick: function(e, cell) {
				e.stopPropagation();
			}
		},
		{ title: "순번", field : "DIC_ENT_ID", sorter: "number" },
		...
		{ formatter: editorIcon, width:50, minWidth:50, hozAlign:"center", resizable:false, headerSort:false,
			cellClick:function(e, cell){
				e.stopPropagation();
				
		} },
		{ formatter: deleteIcon, width:50, minWidth:50, hozAlign:"center", resizable:false, headerSort:false,
			cellClick:function(e, cell){
				e.stopPropagation();
				console.log(cell);
				if(confirm("삭제하시겠습니까?")){
					cell._cell.row.delete();
					//db에 delete 요청
					...
				}
		} }
	],
	responsiveLayout:"collapse",
	responsiveLayoutCollapseStartOpen:false,
	rowClick: function(e, row) {
		//상세보기
	}
});

 

cellClick 이벤트를 발생시키는 cell에 e.stopPropagation()으로 전파를 막아주면 된다.