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 '@grapecity/wijmo.rest';
import { httpRequest, copy, asString, assert } from '@grapecity/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 '@grapecity/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
        })
    });
}