REST CollectionView

Wijmo의 RESTCollectionView 클래스는 CollectionView 클래스를 확장하여 REST 기능을 CollectionView에 통합할 수 있도록 합니다.

RESTCollectionView는 CRUD 기능을 지원합니다. 이 옵션을 사용하려면 RESTCollectionView를 확장하는 클래스를 만들고 다음 메서드에 대한 재정의를 추가하십시오.

getItems: 서버에서 항목 목록을 가져옵니다. 목록을 정렬, 필터링 및 페이징할 수 있습니다.
addItems: 서버의 컬렉션에 항목을 추가합니다.
patchItem: 서버의 컬렉션에 있는 항목을 편집합니다.
deleteItem: 서버의 컬렉션에서 항목을 삭제합니다. 기본적으로 클래스는 서버에서 정렬, 필터링 및 페이징을 수행해야 합니다.

REST 서비스가 이러한 작업을 지원하지 않는 경우 sortOnServer, pageOnServer 또는 filterOnServer 속성이 false로 설정되어 있는지 확인하고 대신 클라이언트에서 해당 작업이 수행됩니다.

RESTCollectionView 확장

RESTCollectionView 클래스를 확장하여 데이터 소스와 직접 요청하는 사용자 지정 RESTCollectionView 클래스를 만들 수 있습니다. 예를 들어 RESTCollectionView 클래스를 확장하여 JSONPlaceholder 소스에 직접 요청하는 사용자 지정RESTCollectionViewOData를 생성할 수 있습니다.입니다.

먼저, 변수를 초기화하고 CRUD operation에서 사용할 수 있는 몇 가지 방법을 만들어야 합니다.

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 key() 메서드는 업데이트 operation에 의해 사용되고 _getWriteUrl()는 URL을 구성하며 jsonReviver()는 JSON을 업데이트합니다.

RESTCollectionViewOData 클래스는 Wijmo와 함께 제공되는 ODataCollectionView 클래스와 유사하게 작동합니다. 서버 기반 정렬, 필터링 및 페이지화는 물론 CRUD operation을 지원합니다. 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
        })
    });
}

계산된 필드

OData