[javascript] SlickGrid의 데이터 변경 감지

01 Dec 2023

javascript

SlickGrid은 JavaScript로 구현된 고성능의 데이터 그리드 라이브러리입니다. 데이터 변경 감지는 사용자가 그리드 내의 데이터를 수정하거나 업데이트할 때 해당 변경 사항을 감지하는 기능을 의미합니다. 이 기능을 사용하면 화면에 표시된 데이터와 실제 데이터 소스 간의 일관성을 유지할 수 있습니다.

데이터 변경 감지 설정하기

데이터 변경 감지를 사용하기 위해서는 onCellChange 이벤트 핸들러를 등록해야 합니다. 아래는 onCellChange 이벤트 핸들러를 설정하는 예시 코드입니다.

grid.onCellChange.subscribe((e, args) => {
  // 데이터 변경 감지 이벤트 핸들러
  const updatedCell = args.item;
  console.log('변경된 데이터:', updatedCell);
  // 변경된 데이터 처리 로직 추가
});

위 코드에서 onCellChange 이벤트 핸들러는 셀이 변경될 때마다 호출됩니다. 변경된 셀 데이터는 args.item으로 전달되며, 이를 활용하여 변경된 데이터를 처리할 수 있습니다.

데이터 변경 감지 예시

아래는 데이터 변경 감지 기능을 사용한 예시 코드입니다.

const data = [
  { id: 1, name: 'John Doe', age: 30 },
  { id: 2, name: 'Jane Doe', age: 25 },
  { id: 3, name: 'Bob Smith', age: 40 },
];

const columns = [
  { id: 'id', name: 'ID', field: 'id' },
  { id: 'name', name: 'Name', field: 'name' },
  { id: 'age', name: 'Age', field: 'age' },
];

const options = {
  enableCellNavigation: true,
  enableColumnReorder: false,
};

const grid = new Slick.Grid("#myGrid", data, columns, options);

grid.onCellChange.subscribe((e, args) => {
  // 데이터 변경 감지 이벤트 핸들러
  const updatedCell = args.item;
  console.log('변경된 데이터:', updatedCell);
  // 변경된 데이터 처리 로직 추가
});

위 코드에서 data는 그리드에 표시될 데이터 배열을 의미합니다. columns는 표시할 열의 설정을 나타내는 배열이며, options는 그리드 옵션을 설정합니다. Slick.Grid를 생성한 후 onCellChange 이벤트 핸들러를 등록하여 데이터 변경 감지 기능을 사용할 수 있습니다.

결론

SlickGrid의 데이터 변경 감지 기능을 사용하면 그리드 내의 데이터 수정을 실시간으로 감지할 수 있습니다. 이를 통해 데이터의 일관성을 유지하고 업데이트에 필요한 로직을 수행할 수 있습니다.

데이터 변경 감지 설정하기

데이터 변경 감지 예시

결론

참고 자료