FlexGrid 서버 측 데이터 바인딩

데이터가 서버에 있는 경우, httpRequest 메서드를 사용하여 데이터를 검색할 수 있습니다. 서버에서 응답을 받으면, CollectionView의 sourceCollection 배열을 응답 값으로 설정하거나 새 데이터를 sourceCollection 배열에 추가합니다. 이 Collection View에 FlexGrid(또는 모든 컨트롤)를 바인딩하면 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 샘플을 참조하시길 바랍니다.

CRUD 작업을 보다 완벽하게 지원하는 완전한 예는, Breeze 및 OData 샘플을 보거나 ODataCollectionView 클래스의 소스 코드를 확인하시길 바랍니다.