tabulator rowSelected와 rowClick 차이

tabulator rowSelected와 rowClick 차이를 Chat GPT에게 물어봤다.

---

Tabulator 라이브러리에서 "rowSelected"와 "rowClick"은 행(로우)과 관련된 다른 이벤트입니다. 이 두 이벤트는 행을 선택하거나 클릭할 때 발생하며, 각각 다른 동작을 수행하도록 사용됩니다.

1. **rowClick 이벤트**:

   - **발생 시점**: 이 이벤트는 사용자가 행을 클릭했을 때 발생합니다.
   - **발생 조건**: 사용자가 어떤 행을 클릭했을 때만 이벤트가 발생합니다.
   - **주요 용도**: 주로 행을 클릭했을 때 발생하는 동작을 처리하는 데 사용됩니다. 예를 들어, 클릭한 행의 데이터를 가져와 상세 정보를 표시하거나 다른 동작을 수행하는 데 활용됩니다.

2. **rowSelected 이벤트**:

   - **발생 시점**: 이 이벤트는 행이 선택되거나 선택 해제될 때 발생합니다.
   - **발생 조건**: 행이 선택되거나 선택 해제될 때 이벤트가 발생합니다.
   - **주요 용도**: 주로 행의 선택 상태를 변경할 때 발생하는 동작을 처리하는 데 사용됩니다. 선택한 행을 모아 특정 작업을 수행하거나, 선택된 행의 데이터를 처리하는 데 활용됩니다.

간단히 말하면, "rowClick"은 사용자가 행을 클릭할 때 어떤 동작을 수행하기 위해 사용되며, "rowSelected"는 행의 선택 상태를 변경할 때 동작을 수행하기 위해 사용됩니다. 이러한 이벤트들은 사용자 인터페이스와 상호작용하거나 데이터를 표시하는 과정에서 매우 유용합니다.

 

rowClick 예시 :

testAnls.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());
testAnls.selectOdRouteInfo(row.getData().test_ID);
});

 

rowSelected 예시 :

testAnls.grid1.on("rowSelected", function(row){
//console.log("[2] rowSelected : row_row.data :", row._row.data); // component
});

---

공식문서 : 

row selected : https://tabulator.info/docs/5.5/events#select

Tabulator - Events

rowClick https://tabulator.info/docs/5.5/events#row

Tabulator - Events