안녕하세요. 그레이프시티입니다.
먼저 문의 답변이 지연된 점 죄송 드립니다.
RESTCollectionView은 기존 CollectionView 클래스를 확장하여 CRUD 기능을 지원하고 있습니다. 여기서 CollectionView 클래스는 Wijmo가 제공하는 모든 UI 컨트롤에서 데이터를 매우 쉽게 관리할 수 있는 일련의 기능을 제공해주는 클래스며 기본 데이터 바인딩 인터페이스인 ICollecitonView에서 파생되었습니다.
CRUD 기능을 사용하기 위해 RESTCollectionView를 확장하는 클래스를 생성 후, 메서드에 대한 재정의를 추가하셔야 합니다. 해당 REST CollectionView 데모 중 가상 데이터 생성 및 API 테스트를 할 수 있는 기능을 제공하는 JSONPlaceholder 데모 기준으로 설명드리도록 하겠습니다.
먼저, 기본적으로 FlexGrid에 데이터 바인딩을 하기 위해서는 itemsSource 속성을 이용하는데 데이터는 RESTCollectionView에서 확장한 ResCollectionViewJson를 통해 가져옵니다.
<wj-flex-grid
(...)
:itemsSource="view"
>
</wj-flex-grid>
data: function () {
return {
view: new RestCollectionViewJson('todos', {
key: 'id',
pageSize: 8
})
}
}, 위의 코드와 같이 전달된 인자들은 아래와 같이 RestCollectionViewJson의 생성자에서 테이블 이름인 'tobos'와 key 및 pageSize와 같은 옵션들이 전달됩니다. (rest-colllection-view-json.js 참고)
constructor(tableName, options) {
super();
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;
}
그 다음 getItems 메서드가 호출되고 Promise 객체 내에서 url 및 테이블 이름을 가지고 HTTP 요청을 수행할 httpRequest 메서드에 URL을 전달합니다. httpRequet를 통해 성공적으로 데이터를 가져온 경우, 해당 데이터를 JSON.parse 하여 파싱 처리를 해주며 (여기서 jsonReviver()는 JSON 업데이트 처리를 해줍니다.) 결과적으로 파싱 처리된 데이터가 그리드에 바인딩되게 됩니다.
async getItems() {
// 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: async xhr => {
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
});
});
}
- RestCollectionView
- CollectionView
- itemsSource
관련하여 API 문서를 전달 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.
감사합니다.
그레이프시티 드림
작성일 2022-06-15 20:01 조회 1,191회
댓글 0건
1 답변
