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

FlexGrid를 OData에 바인딩

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


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


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


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


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


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


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

import * as wjOdata from '@mescius/wijmo.odata';
import * as wjGrid from '@mescius/wijmo.grid';
import * as wjGridFilter from '@mescius/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);