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 keyメソッドは更新操作によって使用され、_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
})
});
}