[javascript] SlickGrid의 행 합계 및 평균

01 Dec 2023

javascript

SlickGrid은 확장 가능하고 유연한 JavaScript 그리드 라이브러리입니다. 이 라이브러리를 사용하여 테이블 형태의 데이터를 표시하고 조작할 수 있습니다. 이 글에서는 SlickGrid을 사용하여 행의 합계와 평균을 계산하는 방법에 대해 알아보겠습니다.

SlickGrid에 행 합계 및 평균 추가

SlickGrid은 행을 그리기 전에 데이터를 변형하는 “formatter” 함수를 제공합니다. 이 함수를 사용하여 각 행의 데이터를 수정하고, 합계와 평균을 계산하도록 할 수 있습니다.

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

// 합계 및 평균을 저장할 객체
const totals = {
  sum: 0,
  count: 0,
  average: 0
};

// 행의 값을 합계와 총 개수에 추가하는 함수
function calculateTotals(row) {
  const value = dataView.getItem(row).value;
  
  totals.sum += value;
  totals.count++;
  totals.average = totals.sum / totals.count;
  
  return value;
}

// 합계 및 평균을 표시할 셀 형식 지정
const formatterWithTotals = function(row, cell, value, columnDef, dataContext) {
  if (row === dataView.getLength() - 1) {
    return `<strong>${totals.sum}</strong>`;
  }
  return value;
};

// 합계 및 평균 계산을 위해 데이터 뷰의 "onSetItems" 이벤트에 함수 연결
dataView.onSetItems.subscribe(function() {
  grid.updateRowCount();
  grid.render();
  
  // 새 데이터로 합계와 평균 재계산
  totals.sum = 0;
  totals.count = 0;
  dataView.getItems().forEach(function(item) {
    totals.sum += item.value;
    totals.count++;
  });
  totals.average = totals.sum / totals.count;
});

// 최초 그리드 초기화
grid.init();

// 행 합계와 평균을 계산하고 표시할 때 "calculateTotals" 함수를 사용하는 컬럼 정의
const columns = [
  { id: "value", name: "값", field: "value", width: 80, cssClass: "numeric", formatter: calculateTotals },
  { id: "total", name: "합계", field: "value", width: 80, cssClass: "numeric", formatter: formatterWithTotals }
];

위 코드에서는 calculateTotals 함수를 사용하여 각 행의 값을 합계와 총 개수에 추가하고, 합계와 평균을 계산합니다. 결과적으로 맨 마지막 행에는 합계가 표시됩니다. 합계를 표시할 때는 <strong> 태그로 감싸서 강조합니다.

아울러 데이터 뷰의 onSetItems 이벤트에 함수를 연결하여, 새로운 데이터로 합계와 평균을 재계산할 수 있도록 합니다.

마지막으로 columns 배열에 합계를 계산하는 함수 calculateTotals를 사용하여 컬럼을 정의하고, 행의 합계를 표시하는 셀 형식을 formatterWithTotals 함수로 지정합니다.

결론

SlickGrid을 사용하여 행의 합계와 평균을 계산하는 방법을 알아보았습니다. 코드를 사용하여 각 행의 값에 접근하고 합계와 평균을 계산할 수 있습니다. 이러한 기능을 사용하면 SlickGrid을 좀 더 유용하게 활용할 수 있습니다.

SlickGrid에 행 합계 및 평균 추가

결론

참고 자료