Wijmo는 기본적으로 CollectionView 클래스를 기본으로 하여, 다양한 데이터 바인딩을 지원합니다.
그 외에도 Odata, 클라우드 데이터 소스 등 다양한 데이터 바인딩을 위한 클래스를 제공합니다.

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

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

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

예를 들어 아래 그리드는 일반 배열에 바인딩됩니다.

import * as wjCore from '@grapecity/wijmo';
import * as wjGrid from '@grapecity/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);

FlexGrid 서버 측 데이터 바인딩

데이터가 서버에있는 경우 httpRequest 메서드를 사용하여 검색 할 수 있습니다.

서버에서 응답을 받으면 CollectionView의 sourceCollection 배열을 응답 값으로 설정하거나 새 데이터를 sourceCollection 배열에 추가합니다.

FlexGrid (또는 모든 컨트롤)를이 CollectionView에 바인딩하면 sourceCollection의 모든 데이터 또는 변경 사항을 표시 할 수 있습니다.

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

  // create an empty CollectionView and bind a new FlexGrid to it
  var serverView = new wjCore.CollectionView();
  var theGrid = new wjGrid.FlexGrid('#theGrid', {
    allowSorting: false,
    showSort: false,
    isReadOnly: true,
    itemsSource: serverView
  });

  // populate it with data from a server
  var url = 'https://services.odata.org/Northwind/Northwind.svc/Categories';
  var params = {
    $format: 'json',
    $select: 'CategoryID,CategoryName,Description'
  };
  wjCore.httpRequest(url, {
    data: params,
    success: function(xhr) {

      // got the data, assign it to the CollectionView
      var response = JSON.parse(xhr.response);
      var data = response.d ? response.d.results : response.value;

      // use the result as the sourceCollection
      serverView.sourceCollection = data;

      // append results to the sourceCollection
      // in case you want to load data in parts
      //serverView.deferUpdate(function () {
      //  data.forEach(function(item) {
      //        serverView.sourceCollection.push(item);
      //  });
      //});
    }
  });

데이터 서비스 API가 필터링, 정렬 및 페이징과 같은 명령을 지원하는 경우, 매개 변수를 httpRequest 호출에 추가하여이를 지원할 수 있습니다.

CollectionView를 확장하는 사용자 정의 클래스로 서버 API를 캡슐화할 수도 있습니다.

사용자 지정 서버 기반 CollectionView 클래스의 간단한 예제는 ServerCollectionView 샘플을 참조하십시오.

FlexGrid OData 바인딩

Wijmo에는 OData 소스 에 대한 지원을 제공하기 위해 CollectionView 를 확장 하는 ODataCollectionView 클래스가 포함되어 있습니다.

OData는 RESTful API를 빌드하고 사용하기 위한, 모범 사례 세트를 정의 하는 OASIS 표준입니다. OData는 요청 및 응답 헤더, 상태 코드, HTTP 메서드, URL 규칙, 미디어 유형, 페이로드 형식, 쿼리 옵션 등을 정의하는 다양한 접근 방식에 대해 걱정할 필요없이 RESTful API를 구축하는 동안 비즈니스 로직에 집중할 수 있도록 도와줍니다.

ODataCollectionView 클래스 를 사용하려면 데이터 서비스의 URL, 액세스하려는 테이블 이름, 검색하려는 필드와 같은 선택적 매개 변수 및 필터링, 정렬 및 페이징을 원하는지 여부를 전달하는 새 인스턴스를 작성하십시오. 서버 또는 클라이언트에서 수행됩니다.

데이터 소스가 쓰기를 지원하는 경우 키 필드도 포함해야 합니다.

아래의 예는 공개 (읽기 전용) OData 소스에서 로드된 Northwind 고객 목록을 보여줍니다.

그리드 위의 레코드 카운터는 데이터가 일괄 적으로 로드되는 방법을 보여줍니다. 이것은 OData 서버에 의해 수행됩니다.

이 예에서 필터링 및 정렬은 서버에서 수행됩니다.

import * as wjOdata from '@grapecity/wijmo.odata';
import * as wjGrid from '@grapecity/wijmo.grid';
import * as wjGridFilter from '@grapecity/wijmo.grid.filter';

// get customer list from Northwind OData service
  var url = 'https://services.odata.org/Northwind/Northwind.svc';
  var customers = new wjOdata.ODataCollectionView(url, 'Customers', {
      sortOnServer: true,
    filterOnServer: true
  });

  // show the data on a grid
    var itemCountElement = document.getElementById('itemCount');
  var theGrid = new wjGrid.FlexGrid('#theGrid', {
      itemsSource: customers, // ODataCollectionView
      isReadOnly: true, // this service is read-only
    loadedRows: function() {
        itemCountElement.innerHTML = theGrid.rows.length + ' items'
    }
  });

  // add a filter to the grid
  var f = new wjGrid.filter.FlexGridFilter(theGrid);

FlexGrid 가상 OData 바인딩

ODataCollectionView의 클래스 중 하나로, OData 소스 컨트롤을 연결하는 간단한 방법을 제공합니다. ODataCollectionView 를 만들면 소스에서 데이터로드가 시작됩니다.

ODataVirtualCollectionView는 확장 ODataCollectionView을 제공하기 위해 수요에 대한 데이터의 로딩을. 서버에서 데이터를 자동으로로드하지 않습니다. 대신 요청시 데이터 조각 (창)을 로드하기 위해 setWindow 메소드 에 의존합니다.

Example:

import * as wjCore from '@grapecity/wijmo';
import * as wjOdata from '@grapecity/wijmo.odata';
import * as wjGrid from '@grapecity/wijmo.grid';

// get order details into an ODataCollectionView
var url = 'https://services.odata.org/Northwind/Northwind.svc';
var table = 'Order_Details_Extendeds';

// get order details into a ODataVirtualCollectionView
var virtualDetails = new wjOdata.ODataVirtualCollectionView(url, table, {
    loaded: function(sender, e) {
        var el = document.getElementById('totalItemCount');
        el.innerHTML = wjCore.format('{totalItemCount:n0} items', sender);
    }
});

// show the data on a grid
var theVirtualGrid = new wjGrid.FlexGrid('#theVirtualGrid', {
    itemsSource: virtualDetails, // ODataVirtualCollectionView
    isReadOnly: true, // this service is read-only
    formatItem: function(s, e) { // show row indices in row headers
            if (e.panel.cellType == wjGrid.CellType.RowHeader) {
                e.cell.textContent = e.row + 1;
            }
    },
    scrollPositionChanged: function () {
        var rng = theVirtualGrid.viewRange;
        virtualDetails.setWindow(rng.row, rng.row2);
    }
});

다음 섹션으로 넘어가 다양한 데이터 바인딩 샘플을 확인해보세요.