RealGrid2 튜토리얼
데이터 채우고 가져오기

데이터 채우고 가져오기

이전 단계에서 그리드에 데이터를 표시하기 위한 준비로 필드와 컬럼을 생성하는 방법을 알아보았습니다. 이번에는 그리드에 데이터를 채우거나 그리드의 값을 가져오는 방법을 알아보겠습니다.

그리드에 데이터 채우기

그리드가 준비된 상태에서 데이터를 표시하려면 DataProvider에 데이터를 넣어주면 됩니다. DataProvider에 데이터를 넣는 방법은 여러가지가 있지만 가장 일반적인 방법은 setRows()함수를 이용하는 것입니다.

LocalDataProvider.setRows()

setRows()함수를 이용해 값을 채우는 코드를 작성해 보겠습니다.

provider.setRows([
  {
    KorName: '박영호',
    Gender: '남',
    Age: '71',
    Phone: '(025)6563-2802',
    ProductId: '198160731-00008',
    KorCountry: '모잠비크',
    OrderDate: '2021-01-16',
    CardNumber: '5587-2139-9692-3644',
    Monetary: 'EUR',
    StartDate: '2018-02-25',
    EndDate: '2021-08-12',
    ToMonth: '23',
    Month: '41',
    Year: '3',
    InterestRate: '0.15',
    SaveCost: '51000',
    SaveMaturity: '14950650',
    CurrentSave: '9304950',
    Rating: '5',
    BusinessProficiency: '59',
    Address: '서울특별시 강서구 공항동 45-89',
  },
]);

setRows() 함수로 데이터를 채운 그리드

그리드에 데이터를 채우는 더 자세한 방법은 아래 가이드를 참고하세요.

그리드의 데이터를 가져오는 방법

그리드의 데이터를 가져오는 방법은 DataProvider의 다양한 함수들을 이용할 수 있습니다. DataProvider에 들어 있는 데이터를 가져오기 위해 getRows() 함수를 사용하는 방법을 알아보겠습니다.

우선 가져온 데이터를 화면에 표시하기 위해 resultViewer라는 id를 가진 <pre> 태그 요소를 하나 만들어 두겠습니다.

<pre id="resultViewer"></pre>

DataProvider의 getRows() 함수를 인자없이 호출하면 DataProvider에 있는 모든 데이터를 Array of Array 형식으로 돌려줍니다.

// getRows 함수로 provider의 값 가져오기
const rows = provider.getRows();
document.getElementById('resultViewer').innerHTML = JSON.stringify(rows, 1);

DataProvider의 값을 가져오는 더 자세한 방법은 아래 가이드를 참고하세요.

GridView를 통해 데이터 가져오기

그리드의 값을 가져오는 방법은 DataProvider뿐만 아니라 GridView에도 여러가지 함수가 준비되어 있습니다.

GridView의 getValues()함수를 통해서도 그리드의 데이터를 가져올수 있습니다.

// getRows 함수로 provider의 값 가져오기
const rows = provider.getValues(1);
document.getElementById('resultViewer').innerHTML = JSON.stringify(rows, 1);

RowId와 ItemIndex 이해하기

DataProvider의 getRows(startRow: number, endRow: number) 와 GridView 의 getValues(itemIndex: number) 함수는 모두 그리드의 데이터를 가져오기 위한 함수입니다. 하지만, 두 함수에 넘겨주는 number 타입의 인자가 의미 하는 것은 조금 다릅니다.

행을 의미하는 number 타입의 속성인 DataProvider의 RowId 와 GridView의 ItemIndex를 이해하기 위해

부분을 참고하세요.

이번 단계에서는 그리드에 데이터를 채우고, 채운 데이터를 가져오는 함수들에 대해 알아봤습니다. 다음 단계, 그리드 조작하기에서는 데이터가 채워진 그리드를 조작하는 방법들에 대해 알아보겠습니다.

그리드 준비하기그리드 조작하기