[]
데이터가 서버에 있는 경우, httpRequest 메서드를 사용하여 데이터를 검색할 수 있습니다. 서버에서 응답을 받으면, CollectionView의 sourceCollection 배열을 응답 값으로 설정하거나 새 데이터를 sourceCollection 배열에 추가합니다. 이 Collection View에 FlexGrid(또는 모든 컨트롤)를 바인딩하면 sourceCollection의 모든 데이터 또는 변경 사항을 표시할 수 있습니다.
import * as wjCore from '@mescius/wijmo';
import * as wjGrid from '@mescius/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를 캡슐화할 수도 있습니다.
CRUD 작업을 보다 완벽하게 지원하는 완전한 예는, Breeze 및 OData 샘플을 보거나 RestCollectionView 클래스의 소스 코드를 확인하시길 바랍니다.