[javascript] SlickGrid의 행 체크 박스 동기화

01 Dec 2023

javascript

SlickGrid는 사용자가 테이블 형식의 데이터를 효율적으로 표시하고 조작할 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 테이블의 각 행을 체크 박스로 선택할 수 있습니다. 그러나 행 체크 박스의 동기화는 몇 가지 문제를 야기할 수 있습니다.

SlickGrid에서 행 체크 박스의 동기화 문제는 주로 다음과 같은 상황에서 발생합니다:

사용자가 한 행을 체크한 후 스크롤하여 다른 행을 볼 때, 체크된 행의 상태가 유지되지 않는다.
체크된 행을 다시 확인할 필요 없이 빠르게 찾아볼 수 있는 기능이 부족하다.

이러한 문제를 해결하기 위해 다음과 같은 방법을 사용해야 합니다:

1. 체크 상태 저장하기

체크된 행의 상태를 별도의 배열이나 객체에 저장해야 합니다. 이 배열 또는 객체는 체크된 행의 인덱스를 키로 사용하고, 체크 상태를 값으로 저장합니다. 체크 박스를 클릭할 때마다 이 배열 또는 객체를 업데이트합니다.

예시 코드:

let checkedRows = {}; // 체크된 행의 인덱스를 저장할 객체

function onCheckboxSelect(e, args) {
  const rowIndex = args.row; // 체크된 행의 인덱스
  const isChecked = args.checked; // 체크 상태

  if (isChecked) {
    checkedRows[rowIndex] = true; // 체크된 행 인덱스를 객체에 저장
  } else {
    delete checkedRows[rowIndex]; // 체크 해제된 행 인덱스를 객체에서 삭제
  }
}

2. 스크롤 이벤트 처리하기

사용자가 스크롤하여 다른 행을 볼 때, 체크된 행의 상태를 유지하기 위해 스크롤 이벤트를 처리해야 합니다. 스크롤 이벤트가 발생할 때마다 체크된 행의 상태를 확인하고, 체크된 행에 해당하는 체크 박스를 다시 선택해야 합니다.

예시 코드:

grid.onScroll.subscribe(function(e, args) {
  for (const rowIndex in checkedRows) {
    const rowNode = grid.getDataItem(rowIndex); // 체크된 행의 데이터 객체 가져오기
    const cellNode = grid.getCellNode(rowIndex, 0); // 체크 박스가 있는 셀 가져오기
    const checkbox = cellNode.querySelector('input[type="checkbox"]'); // 체크 박스 요소 찾기
    checkbox.checked = true; // 체크 박스 선택 상태로 변경
    rowNode.checkboxSelect = true; // 데이터 객체에 체크 상태 표시
  }
});

위의 예시 코드에서 grid는 SlickGrid 인스턴스를 나타내며, checkboxSelect는 데이터 객체의 체크 상태를 나타내는 속성입니다.

3. 빠른 검색 기능 추가하기

체크된 행을 빠르게 찾아볼 수 있는 검색 기능을 추가하는 것도 도움이 될 수 있습니다. 이를 위해 사용자가 검색어를 입력하면, 체크된 행 중에서 해당 검색어를 포함하는 행을 필터링하여 보여줍니다.

예시 코드:

function filterCheckedRows(searchTerm) {
  const filteredRows = [];
  
  for (const rowIndex in checkedRows) {
    const rowNode = grid.getDataItem(rowIndex); // 체크된 행의 데이터 객체 가져오기

    if (rowNode.name.includes(searchTerm)) { // 검색어와 일치하는 경우
      filteredRows.push(rowNode);
    }
  }

  grid.setData(filteredRows); // 필터링된 행만 보여주기
}

위의 예시 코드에서 name은 체크된 행의 데이터 객체에서 검색어를 찾을 속성입니다. grid.setData() 함수는 필터링된 행만 보여주도록 SlickGrid의 데이터를 업데이트하는 함수입니다.

결론

SlickGrid에서 행 체크 박스의 동기화 문제를 해결하기 위해 체크 상태를 저장하고, 스크롤 이벤트를 처리하며, 빠른 검색 기능을 추가할 수 있습니다. 이를 통해 사용자는 체크 박스의 상태를 편리하게 유지하고 필요한 행을 빠르게 찾아볼 수 있게 됩니다.

참고 자료:

SlickGrid GitHub 레포지토리