데이터 갱신

주문 수량이 바뀌었을 때 표 전체를 다시 만들 필요는 없습니다. 변경된 주문의 ID와 새 값을 전달하면 해당 행을 갱신할 수 있습니다.

직접 해보기

1. 변경 전 값 확인

   초기화 후 첫 주문 ORD-0001을 보세요. 수량은 10이고 합계는 1,200입니다.

2. 샘플 업데이트 누르기

   표 위의 샘플 업데이트를 누르면 첫 주문의 수량이 10만큼 늘어납니다. 한 번 누른 뒤 수량 20, 합계 2,400인지 확인하세요.

3. 처리 결과 읽기

   표 아래 applyTransaction() 결과에서 갱신 결과를 확인하세요. 다시 누르면 10씩 더해지고 실행 취소로 변경을 되돌릴 수 있습니다.

이 예제는 브라우저의 샘플 데이터를 갱신합니다. 실제 서버 저장은 앱에서 별도로 연결해야 합니다. 새 조회 결과 전체를 보여 줄 때는 rowData에 새 배열을 전달하세요.

알아두면 쉬운 용어

applyTransaction

추가·수정·삭제할 행을 묶어 Grid에 전달하는 메서드입니다.

getRowId

각 행의 고유 ID를 알려 주는 함수입니다. 정렬 후 위치가 바뀌어도 같은 행을 찾는 기준이 됩니다.

핵심 API 예시

등록된 Grid 요소를 grid로 참조하는 앱 코드입니다.

// getRowId가 같은 주문을 찾는 기준입니다.
const row = grid.rowData[0];
if (row) {
  const result = await grid.applyTransaction({
    update: [{ ...row, quantity: Number(row.quantity) + 10 }]
  });
  console.log(result);
}