概要と基本的な使い方

テーブルシートは、AutoSyncモードとBatchモードを使用して、データソースの自動更新と一括更新をサポートします。

デフォルトでは、テーブルシートはローカルのデータマネージャとデータを交換するだけです。変更したデータをリモートデータベースと同期させたい場合は、最初に AutoSync または Batch モードを有効にしてください。 このデモは Batch モードを使用しています。 AutoSyncモード このモードは、更新頻度が低いデータ操作のシナリオに適しています。行アクションのボタンやAPIを使って行を操作すると、対応する変更を伴うリクエストが開始され、直ちにサーバーに送信されます。 テーブルの初期化で AutoSync モードを有効にするには: Batchモード このモードは、データを頻繁に操作するシナリオに適しています。各行の操作を順番に保存し、すべての変更をコレクションにパッケージして、ネットワークリソースを節約するために、一度にサーバーに送信します。 テーブルの初期化で Batch モードを有効にして、BatchApiUrl を指定するには: その後、すべての変更を送信または破棄できます: 要求と応答 操作 要求タイプ 要求データ Response Data 更新 POST 更新されたデータ 更新されたデータ 読み込み GET データなし レコード配列 削除 DELETE 削除されたデータまたはデータ配列 制限なし 作成 POST 挿入されたデータ 挿入されたデータ 一括 POST オブジェクト配列。各オブジェクトには 'type' プロパティが含まれます。 この操作タイプは、'update'、'insert'、または 'delete' のいずれかです。 'dataItem' プロパティは現在のレコードです。 'sourceIndex' プロパティはレコードインデックスです。 オプションの 'oldDataItem' プロパティは、元のレコードです。 例: [ {"type":"delete","dataItem":{...}, "sourceIndex":5}, {"type":"insert","dataItem":{...}, "sourceIndex":3}, {"type":"update","dataItem":{...}, "oldDataItem":{...}, "oldDataItem":{...}, "sourceIndex":1}] オブジェクト配列。各オブジェクトには、操作の成功または失敗を示す 'succeed' プロパティと、現在のレコードで 'insert' 操作のみで使用する、オプションの 'data' プロパティが含まれます。 例: [{"succeed":true}, {"succeed":false}, {"succeed": true}]
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ var tableName = "Employee"; var baseApiUrl = getBaseApiUrl(); var apiUrl = baseApiUrl + "/" + tableName; var batchApiUrl = baseApiUrl + "/" + tableName + 'Collection'; var tablesheetName = 'MyTableSheet'; var spread, sheet, view, selections, table; window.onload = function() { spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 }); initSpread(spread); bindEvents(); }; function initSpread(spread) { spread.suspendPaint(); spread.clearSheets(); spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader; //init a data manager var dataManager = spread.dataManager(); myTable = dataManager.addTable("myTable", { remote: { read: { url: apiUrl }, update: { url: apiUrl, method: 'PUT' }, create: { url: apiUrl }, delete: { url: apiUrl }, batch: { url: batchApiUrl } }, batch: true, schema: { columns: { "Id": { dataType: "number" }, "LastName": { dataType: "string" }, "FirstName": { dataType: "string" }, "HomePhone": { dataType: "string" }, "Notes": { dataType: "string" } } } }); table = myTable; //init a table sheet sheet = spread.addSheetTab(0, tablesheetName, GC.Spread.Sheets.SheetType.tableSheet); var rowActions = GC.Spread.Sheets.TableSheet.BuiltInRowActions; var options = sheet.rowActionOptions(); options.push( rowActions.removeRow, rowActions.saveRow, rowActions.resetRow, ); sheet.rowActionOptions(options); //bind a view to the table sheet myTable.fetch().then(function() { view = myTable.addView("myView", [ { value: "Id", width: 50, caption: "ID" }, { value: "FirstName", width: 100, caption: "First Name" }, { value: "LastName", width: 100, caption: "Last Name" }, { value: "Title", width: 150, }, { value: "HomePhone", width: 150, caption: "Phone" }, { value: "Notes", width: 250, caption: "Notes" } ]); sheet.setDataView(view); }); spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function(e, args) { selections = args.newSelections; }); spread.resumePaint(); } function bindEvents() { var removeButton = document.getElementById('remove'); removeButton.addEventListener('click', function() { traverseSelectionsRowsWithOperation(function(row) { sheet.removeRow(row); }); }); var saveButton = document.getElementById('save'); saveButton.addEventListener('click', function() { traverseSelectionsRowsWithOperation(function(row) { sheet.saveRow(row); }); }); var resetButton = document.getElementById('reset'); resetButton.addEventListener('click', function() { traverseSelectionsRowsWithOperation(function(row) { sheet.resetRow(row); }); }); var saveAllButton = document.getElementById('save-all'); saveAllButton.addEventListener('click', function() { spread.commandManager().SaveAll.execute(spread, { sheetName: tablesheetName }); }); var submitButton = document.getElementById('submit'); submitButton.addEventListener('click', function() { sheet.submitChanges(); }); var discardButton = document.getElementById('discard'); discardButton.addEventListener('click', function() { sheet.cancelChanges(); }); } function traverseSelectionsRowsWithOperation(operation) { if (selections) { for (var i = 0; i < selections.length; i++) { var selection = selections[i]; var row = selection.row; var rowCount = selection.rowCount; for (var r = row + rowCount - 1; r >= row; r--) { operation(r); } } } } function getBaseApiUrl() { return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api'; }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="ja-jp" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill --> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div id="options-container" class="options-container"> <fieldset> <legend>アクティブな行の操作</legend> <div class="field-line"> <input id="remove" type="button" value="削除"> </div> <div class="field-line"> <input id="save" type="button" value="保存"> </div> <div class="field-line"> <input id="reset" type="button" value="リセット"> </div> </fieldset> <fieldset> <legend>すべての行の保存</legend> <div class="field-line"> <input id="save-all" type="button" value="すべて保存"> </div> </fieldset> <fieldset> <legend>一括操作</legend> <div class="field-line"> <input type="button" value="実行する" id="submit"> </div> <div class="field-line"> <input type="button" value="破棄する" id="discard"> </div> </fieldset> </div> </div> </body> </html>
body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } fieldset { padding: 6px; margin: 0; margin-top: 10px; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } fieldset span, fieldset input, fieldset select { display: inline-block; text-align: left; } fieldset input[type=text] { width: calc(100% - 58px); } fieldset input[type=button] { width: 100%; text-align: center; } fieldset select { width: calc(100% - 50px); } .field-line { margin-top: 4px; } .field-inline { display: inline-block; vertical-align: middle; } fieldset label.field-inline { width: 100px; } fieldset input.field-inline { width: calc(100% - 100px - 12px); } .required { color: red; font-weight: bold; } #fields { display: none; } #fields.show { display: block; }