[{"id":"7720ca38-fc98-4fd8-a3a5-3c0e730c3c72","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"247ded67-b050-4436-be40-fe7b0eeabef7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"9a8c377f-1f1e-476e-b487-c2339da9bed3","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5e8e6db2-89b9-4184-bbdc-301ee676869e","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e04b598e-b0d8-4054-bdac-5143d90b3d51","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"edb028d0-a8cc-42b2-acda-42a5515729f0","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2adde444-20a6-43d7-8896-2b445877327a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6ab8ced2-6c7a-41b6-b861-ba066bd40f40","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"0c34aedd-80a3-470b-a0f6-c327a4346be7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"717a5892-fa23-499b-a61d-cff228943aaf","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"bd9be971-69fc-4793-ad6d-234be7a93048","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a1e8d38f-43d8-4b3e-b747-3fbf7656fcd9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d6995fdf-76ee-421f-9e7a-3fb324d14bbb","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"64fa3155-4543-4acd-83b7-f9860fd46673","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"698413bd-0b16-4287-baec-644d98a411d1","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7e4393a0-21ef-438b-981b-325b64db5baa","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]}]
テーブルシートは、行の作成、読み込み、更新、削除などの行の操作でデータソースとやり取りする機能を提供します。行の操作により編集した行をデータベースに容易に同期できます。
次のテーブルシートクラスのメソッドを行の操作として使用できます。
メソッド | 説明 |
---|---|
テーブルシートに新規行を追加します。 | |
指定された行をテーブルシートから削除します。 | |
指定されたテーブルシート行の変更(更新行と挿入行を含め)をデータマネジャーに保存します。 | |
テーブルシートの指定された行の変更をリセットします。 |
次の図は、実際の行操作を示しています。
テーブルシートでデータを変更するにはデータマネジャーと連携して処理します。変更されたデータをリモートデータベースと同期させるには、自動更新やバッチ更新を有効にする必要があります。
addTableメソッドを使用する際に、自動同期モードやバッチモードのプロパティを設定します。次は、自動同期モードやバッチ同期モードを設定する方法を説明します。
autoSync モードでは、変更がリモートソースに自動的に同期されます。このモードは、データ変更の操作がそれほど頻繁に行われない場合に適しています。
var myTable = dataManager.addTable("myTable", {
// ... その他の設定
autoSync: true // 自動同期モードを有効にします。
});
batch モードでは、 submitChanges メソッドを手動で呼び出すことにより、変更をリモートソースに同期します。 このモードは、主にデータが頻繁に操作されるシナリオに適しています。
var myTable = dataManager.addTable("myTable", {
// ... その他の設定
batch: true, // バッチモードを有効にします。
remote: {
// ... その他の設定
batch: {
url: BatchApiUrl // api urlを指定します。
}
}
});
// すべての変更を保存します。
tablesheet.submitChanges();
// または、すべての変更を廃棄します。
tablesheet.cancelChanges();
テーブルシートは、リモート要求オプションを構成するための自己定義関数をサポートしています。 デフォルトでは、テーブルシートはオブジェクトによってリモート要求を構成します。要求を手動で処理する場合は、オブジェクトを関数に置き換えると、データの変更が関数に渡されます。
自己定義関数を使用する場合、自動同期モードとバッチモードには次のパラメータがあります。
autoSync: create、update、delete関数のパラメータはデータ項目であり、戻り値はリモートからのデータ項目をラップするPromiseです。 read関数の戻り値は、データ項目をラップするPromiseです。
batch: batch関数のパラメータにはデータの変更があり、関数の戻り値はリモートからの成功情報をラップするPromiseです。
次のサンプルコードは、カスタムリクエスト関数を作成して実装する方法を示します。
// カスタムリクエスト関数を作成します。
function sendRequest(url, options) {
options.method = options.method || 'POST';
options.headers = { 'Content-Type': 'application/json; charset=utf-8' };
if (options.body) {
options.body = JSON.stringify(options.body);
}
return fetch(url, options).then(resp => {
if (resp.ok) {
return resp.json();
} else {
throw resp.statusText;
}
});
}
// データマネジャーを初期化します。
var dataManager = spread.dataManager();
myTable = dataManager.addTable("myTable", {
remote: {
read: function () {
return sendRequest(apiUrl, { method: 'GET' });
},
update: function (item) {
return sendRequest(apiUrl, { body: item, method: 'PUT' });
},
create: function (item) {
return sendRequest(apiUrl, { body: item });
},
delete: function (item) {
return sendRequest(apiUrl, { body: item, method: 'DELETE' });
},
batch: function (changes) {
return sendRequest(batchApiUrl, { body: changes });
}
},
batch: true,
onFailed: function(type, args) {
console.log("error", type, args);
}
});
サーバーが接続エラー(HTTP 404、HTTP 500など)やデータベースのエラー(主キーの重複、更新に失敗したなど)を返した場合、テーブルシートはユーザーにコールバックを介して処理させるか、エラーを表示します。
行ヘッダには赤いアラームアイコンが表示され、ユーザーがその上にカーソルを合わせると、エラーのヒントが表示されます。
テーブルシートでは、TableSheetクラスのgetChangesメソッドを使用して、変更がサーバーに保存される前に、変更される内容について、以下の情報を取得することができます。
データ項目: 現在のデータまたは変更後の新しいデータ。
古いデータ項目: 変更前の元のデータ(オプション)。
インデックス: テーブルシートの変更された行インデックス。
変更のタイプ: 同期モードに応じて、「update」、「insert」または「delete」。
autoSyncモードでは、 getChanges メソッドは「update」または「insert」を返します。 しかし、batchモードでは、 getChanges メソッドは「update」、「insert」または「delete」を返します。