[]
데모 테마 디자이너 도움말 API
다른 샘플 다운로드
(Showing Draft Content)

FlexGrid 클라이언트 측 데이터 바인딩

그리드의 itemsSource 속성을 일반 JavaScript 배열로 설정하면, 자동으로 내부 CollectionView를 만들고 이를 데이터 소스로 사용하므로 CollectionView를 직접 만들지 않고도 정렬 및 편집 기능을 제공합니다.


이 내부 뷰(View)는 그리드의 collectionView 속성에 의해 노출되며, 사용자가 직접 추가 기능을 필요로 하는 경우에 사용할 수 있습니다.


예를 들어 아래 그리드는 일반 배열에 바인딩되어 있습니다:

import * as wjCore from '@mescius/wijmo';
import * as wjGrid from '@mescius/wijmo.grid';

// create some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
var data = [];
for (var i = 0; i < countries.length; i++) {
  data.push({
    id: i,
    country: countries[i],
    sales: Math.random() * 10000,
    expenses: Math.random() * 5000
  });
}

// bind a grid to the raw data
var theGrid = new wjGrid.FlexGrid('#theGrid', {
    allowSorting: false,
    showSort: false,
    autoGenerateColumns: false,
    columns: [
        { binding: 'country', header: 'Country', width: '2*' },
        { binding: 'sales', header: 'Sales', width: '*', format: 'n2' },
        { binding: 'expenses', header: 'Expenses', width: '*', format: 'n2' }
    ],
    itemsSource: data
});

그리드의 collectionView 속성으로 데이터를 정렬할 수 있습니다.

  // sort the data by country
var sd = new wjCore.SortDescription('country', true);
theGrid.collectionView.sortDescriptions.push(sd);