Spread.Viewsでは、CRUD（作成、読み取り、更新、削除）データ操作において、サーバーとの動的なデータ同期がサポートされます。CRUDを有効にするには、これらの操作に関するdataViewをトリガするコールバックメソッドを実装します。

このコールバックメソッドには、トランスポートプロトコルとして、1つのパラメータだけを指定できます。このパラメータは、コールバック時での実際のサーバー操作に使用できます。コールバックが成功した場合はparams.success();を、そうでない場合はparams.failed()を呼び出します。

次の表は、トランスポートの種類とそれぞれの用途を示します。

トランスポート	用途
create	データアイテムの作成に使用します。このコールバックは、グリッド内に新規アイテムを追加した後に呼び出されます。実装するには、autoAddRowを含め、dataView.data.insertDataItemsを呼び出します。
loadRange	データの更新に使用します。このコールバックは、次の場合に呼び出されます。 1. ページングモードで新規データが要求された場合。 2. ページングモードではなく、最終位置付近まで画面がスクロールされ、コントロールオプションloadOnDemandがtrueに設定されている場合。
update	データアイテムの更新に使用します。このコールバックは、グリッド内のアイテムを更新した後に呼び出されます。編集後、dataView.data.updateDataItemを呼び出します。
delete	データアイテムの削除に使用します。このコールバックは、グリッドからアイテムを削除した後に呼び出されます。これには、アクション列で行を削除し、dataView.data.removeDataItemsを呼び出します。

CRUD機能を実装する手順は、次のとおりです。

サンプルコード

以下のファイルへの参照を追加します。

<script src="[Your Script Path]/gc.spread.views.paging.10.0.0.min.js" type="text/javascript"></script>
<script src="[Your Script Path]/pageui.js" type="text/javascript"></script>

列定義、およびアクション列のプレゼンター定義を追加します。

CRUDを定義する各関数を追加します。

   var dataView;
        var currentPageDataSource;
        var itemsTotalCount;
       var baseUrl = '//spread.cloudapp.net:8081/api/records';
       var dataSource = {
            loadRange: function(params) {
                $.ajax({
                    //pageSize and startPageIndex only works when paging component is     referenced, if control
                    //do find the paging component, pageSize and pageIndex will be     undefined.
                    url: getRecords(params.pageIndex == undefined ? undefined : (params.pageSize * params.pageIndex), params.pageSize),
                    crossDomain: true,
                    success: function(result) {
                        currentPageDataSource = result.m_Item2;
                        itemsTotalCount = result.m_Item1;
                        params.success(currentPageDataSource, itemsTotalCount);
                    },
                    error: function(xhr, status) {
                        params.failed();
                        if (status !== 'abort') {
                            alert('Failed to load data from remote web site.');
                        }
                    }
                });
            },
            create: function(params) {
                var dataItem = _.clone(params.dataItem);
                $.ajax({
                    url: baseUrl,
                    type: 'POST',
                    data: JSON.stringify(dataItem),
                    success: function(data) {
                        dataItem['Transaction_Id'] = data['Transaction_Id'];
                        params.success(dataItem);
                    },
                    error: function(xhr, status) {
                        params.failed();
                        alert("add item on server side failed");
                    }
                });
            },
            delete: function(params) {
                    $.ajax({
                    url: baseUrl + '/' + params.dataItem['Transaction_Id'],
                    type: 'DELETE',
                    success: function(data) {
                        params.success();
                    },
                    error: function(xhr, status) {
                        params.failed();
                        alert('delete item on server side failed');
                    }
                });
            },
            update: function(params) {
                $.ajax({
                    url: baseUrl + '/' + params.dataItem['Transaction_Id'],
                    type: 'PUT',
                    data: JSON.stringify(params.dataItem),
                        success: function(data) {
                        params.success();
                    },
                    error: function(xhr, status) {
                        params.failed();
                        alert('update item on server side failed.');
                    }
                });
            }
        };

DIVタグのグリッドIDを呼び出し、コードを初期化します。

  $(document).ready(function() {
            dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), dataSource, columns, new GC.Spread.Views.Plugins.GridLayout({
                colWidth: 80,
                showColHeader: false,
                showRowHeader: false,
                rowHeight: 36,
                pageSize: 10,
                allowEditing: true,
                editMode: 'popup',
                autoAddRowPosition: 'top',
                headerRow: {
                    visible: true,
                    height: 40,
                    separateColumn: false,
                    renderer: '<button id="btnAddNew"><span class="add-icon"></    span><span> Add new record</span></button>'
                }
            }));

            dataView.editing.addHandler(function(sender, args) {
                if (args.status === 'endEditing' && args.isNewRow || args.status === 'cancelEditing') {
                    if (dataView.options.allowAutoAddRow) {
                        dataView.options.allowAutoAddRow = false;
                        dataView.invalidate();
                    }
                }
            });

            $('#btnAddNew').on('click', function() {
                var addNewRecordID = dataView.uid + '-autorow';
                dataView.startEditing(addNewRecordID);
            });

            var pageController = dataView.data.pageController;
            var pager = new PageUI('#page-nav', pageController.getStatus());

            pager.goToFirstEvent.addHandler(function() {
                pageController.first();
            });

            pager.goToPreviousEvent.addHandler(function() {
                pageController.previous();
            });

            pager.goToNextEvent.addHandler(function() {
                pageController.next();
            });

            pager.goToLastEvent.addHandler(function() {
                pageController.last();
            });

            pager.goToPageEvent.addHandler(function(e) {
                pageController.goToPage(e.newPage);
            });

            pageController.statusChanged.addHandler(function(sender, newStatus) {
                pager.updateStatus(newStatus);
            });
        });

        //action column handler
        function deleteItem(args) {
            var rowId = dataView.getRowId(args.hitInfo);
            var dataItem = dataView.getItem(rowId);
            if (dataItem && dataItem.item) {
                var sourceIndex = dataItem.item.sourceIndex;
                if (sourceIndex >= 0) {
                    dataView.data.removeDataItems(sourceIndex);
                }
            }
        }

        function getRecords(start, count) {
            var result = [];
            if (start != undefined) {
                result.push('start=' + start);
            }
            if (count != undefined) {
                result.push('count=' + count);
            }

            if (result.length > 0) {
                return baseUrl + '?' + result.join('&');
            }
            return baseUrl;
        }

参照

getRowId
getItem
allowAutoAddRow
pageController