Wijmo의 RESTCollectionView
Wijmo의 RESTCollectionView 클래스는 CollectionView 클래스를 확장하여 REST 기능을 __CollectionView__에 통합할 수 있도록 하며, 더 나아가 확장을 통해 CollectionView 클래스를 사용하는 모든 컨트롤을 사용할 수 있도록 합니다.
__RESTCollectionView__는 CRUD 기능을 지원합니다. 이 옵션을 사용하려면 __RESTCollectionView__를 확장하는 클래스를 만들고 다음 메서드에 대한 재정의를 추가하시길 바랍니다:
getItems: 서버에서 항목 목록을 가져옵니다. 목록을 정렬, 필터링 및 페이징 할 수 있습니다.
addItems: 서버의 컬렉션에 항목을 추가합니다.
patchItem: 서버의 컬렉션에 있는 항목을 편집합니다.
deleteItem: 서버의 컬렉션에서 항목을 삭제합니다.
기본적으로 클래스는 서버에서 정렬, 필터링 및 페이징을 수행해야 합니다.
REST 서비스가 이러한 작업을 지원하지 않는 경우 sortOnServer, pageOnServer 또는 filterOnServer 속성이 __false__로 설정되고, 해당 작업이 클라이언트에서 대신 수행되는지 확인하시길 바랍니다.
RESTCollectionView 확장
RESTCollectionView 클래스를 확장하여 데이터 소스와 직접 통신하는 사용자 지정 RESTCollectionView 클래스를 만들 수 있습니다. 예를 들어 RESTCollectionView 클래스를 확장하여 JSONPlaceholder 소스와 통신하는 사용자 지정 RESTCollectionViewOData 클래스를 만들 수 있습니다.
먼저 변수를 초기화하고 CRUD 작업에서 사용할 수 있는 몇 가지 메서드을 만들어야 합니다:
import { RESTCollectionView } from '@mescius/wijmo.rest';
import { httpRequest, copy, asString, assert } from '@mescius/wijmo';
export class RESTCollectionViewJSON extends RESTCollectionView {
constructor(tableName, options) {
super();
this._url = 'https://jsonplaceholder.typicode.com/';
this._tbl = asString(tableName);
copy(this, options);
// this source does not support server-side pagination, sorting, or filtering.
this.pageOnServer = false;
this.sortOnServer = false;
this.filterOnServer = false;
}
/**
* Gets or the name of the key field.
*
* Key fields are required for update operations (add/remove/delete).
*/
get key() {
return this._key;
}
set key(value) {
this._key = asString(value);
}
// ** implementation
_getWriteUrl(item) {
let url = this._url + this._tbl;
assert(this.key != null, 'write operations require keys');
return url + '/' + item[this.key];
}
_jsonReviver(key, value) {
if (typeof value === 'string' && _rxDate.test(value)) {
value = value.indexOf('/Date(') == 0 // verbosejson
? new Date(parseInt(value.substr(6)))
: new Date(value);
}
return value;
}
}get/set 키() 메서드는 업데이트 작업에 사용되고, _getWriteUrl()은 URL을 구성하며 jsonReviver()는 JSON을 업데이트합니다.
RESTCollectionViewOData 클래스는 Wijmo와 함께 나오는 ODataCollectionView 클래스와 유사하게 작동합니다. CRUD 작업과 서버 기반 정렬, 필터링 및 페이지 지정을 지원합니다. CRUD 기능을 사용하기 위해선 CRUD 메서드를 재정의해야 합니다:
getItems() {
return __awaiter(this, void 0, void 0, function* () {
// cancel any pending requests
if (this._pendingRequest) {
//console.log('aborting pending request');
this._pendingRequest.abort();
}
return new Promise(resolve => {
let url = this._url + this._tbl;
this._pendingRequest = httpRequest(url, {
success: (xhr) => __awaiter(this, void 0, void 0, function* () {
let arr = JSON.parse(xhr.responseText, this._jsonReviver);
resolve(arr);
}),
error: xhr => this._raiseError(xhr.responseText, false),
complete: xhr => this._pendingRequest = null // no pending requests
});
});
});
}
addItem(item) {
return new Promise(resolve => {
let url = this._url + this._tbl;
let requestHeaders = {
'Content-Type': 'application/json; charset=UTF-8'
};
if (this.requestHeaders) {
for (let k in this.requestHeaders) {
requestHeaders[k] = this.requestHeaders[k];
}
}
let newItem = {};
for (let k in item) {
if (k != this.key) {
newItem[k] = item[k];
}
}
httpRequest(url, {
method: 'POST',
requestHeaders: requestHeaders,
data: newItem,
success: xhr => {
let newItem = JSON.parse(xhr.responseText, this._jsonReviver);
item[this.key] = newItem[this.key];
this.refresh();
},
error: xhr => this._raiseError(xhr.responseText, true)
});
});
}
patchItem(item) {
return new Promise((resolve) => {
let url = this._getWriteUrl(item);
httpRequest(url, {
method: 'PUT',
requestHeaders: this.requestHeaders,
data: item,
success: xhr => resolve(item),
error: xhr => this._raiseError(xhr.responseText, true)
});
});
}
deleteItem(item) {
return new Promise(resolve => {
let url = this._getWriteUrl(item);
httpRequest(url, {
method: 'DELETE',
requestHeaders: this.requestHeaders,
success: xhr => {
resolve(item);
},
error: xhr => this._raiseError(xhr.responseText, true)
});
});
}이제 JavaScript 파일에서 RESTCollectionView를 호출하여 FlexGrid 컨트롤을 위한 데이터 소스로 사용할 수 있습니다.
// Extended RESTCollectionView class
import { RESTCollectionViewJSON } from './rest-collection-view-json';
import { FlexGrid } from '@mescius/wijmo.grid';
function init() {
// create the grid to show the data
let theGrid = new FlexGrid('#theGrid', {
allowAddNew: true,
allowDelete: true,
showMarquee: true,
selectionMode: 'MultiRange',
deferResizing: true,
alternatingRowStep: 0,
// create RESTCollectionViewJSON
itemsSource: new RESTCollectionViewJSON('todos', {
key: 'id',
pageSize: 8
})
});
}