slickgridからのデータの保存

Question

誰でも教えてくださいslickgridでを追加または編集した行を特定する方法を教えてください。私はDBにJQuery AJAXを使用してデータを保存しようとしています。私はdataviewオプションを使用しています。 新しく追加/更新された行だけを保存/更新する必要があります。

ありがとうございます。

Answer 1

最初に確認する必要があるのは、各行がサーバー側の一意のID（データベースの行の主キー値など）で初期化されていることです。

var editedRows = {} 
grid.onAddNewRow.subscribe(function(e, args) { 
      var item = args.item; 
      editedRows[item.id] = item; 
     }); 

を次のように

その後、ユーザーが保存ボタンをクリックすると、あなたは、単にサーバへeditedRowsオブジェクトを投稿grid.onAddNewRowイベントを使用することができます。あなたのPHPスクリプトは、送信された行IDを繰り返し、dvsのすべての変更された行を更新することができます

注：私のコードはテストされていませんが、http://mleibman.github.com/SlickGrid/examples/example3-editing.htmlにチェックを入れて、slickgridで編集を理解する必要があります。

Answer 2

あなたはいつでもonCellChangeイベントをグリッドにフックできます。

grid.onCellChange = function (row, col, dataRow) { 
    // enter your code here 
} 

（row、col）は現在のセルであり、dataRowはその行のデータを含みます。

Answer 3

私はそれを古いポストを見ることができますが、私は同じ問題を持っていたので、すべての変更を保持する配列を作成

、あなたがfbuchinger勧告に従う必要があります私は最終的に

をどうやっ共有について考えましたそして、あなたがあなたのページに2のボタンを持っている必要があります

//#region standard set of options and vars always there 

    var grid; 
    var data = []; 
    var columns = []; 
    var editedRows = []; //array to hold all changes 

    var options = { 
     editable: true, 
     enableAddRow: true, 
     enableCellNavigation: true, 
     asyncEditorLoading: false, 
     autoEdit: true , 
     showFooterRow: true, 
    }; 

    var checkboxSelector = new Slick.CheckboxSelectColumn({ 
     cssClass: "slick-cell-checkboxsel" 
    }); 

    columns.push(checkboxSelector.getColumnDefinition()); // check box first 
    // define columns 
    columns.push(
     { id: "ID", name: "ID", field: "id", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator, focusable: false }, 
     { id: "Name", name: "Name", field: "name", width: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator, minWidth: 70, sortable: true, toolTip: "Full Name" }, 
     { id: "IsActive", name: "Is-Active", field: "IsActive", width: 120, cssClass: "cell-title", editor: Slick.Editors.Checkbox, formatter: Slick.Formatters.Checkmark, validator: requiredFieldValidator }); 

    //#endregion 
    //#region using data part 
    $(function() { 
     // get data 
     $.getJSON('/acActivity/getAcActivityList', function (Resultdata) { 
      data = Resultdata;    
      grid = new Slick.Grid("#SlickGrid", data, columns, options); 

      grid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: false })); 

      // add plug ins 
      grid.registerPlugin(new Slick.AutoTooltips({ enableForHeaderCells: true })); 
      grid.registerPlugin(checkboxSelector); 
      var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options); 


      grid.onAddNewRow.subscribe(function (e, args) { 

       var item = args.item; 
       // create an id for new lines and items 
       var id = Math.random * 10000 * -1; 
       item.id = id; 
       editedRows.push(item); 

       grid.invalidateRow(data.length); 
       data.push(item); 
       grid.updateRowCount(); 
       grid.render(); 
      }); 

      grid.onCellChange.subscribe(function (e, args) { 

       // only add after last column in the row 
       if (args.cell == args.grid.getColumns() - 1) 
        editedRows.push(args.item); 


      }); 

     }).fail(function() { 
      alert('Data retrieval Error'); 
     }); 

     //#region send data back t oserver 
     $('#Savebtn').click(function() { 
      console.log(editedRows); 

      var UpdatedRows = JSON.stringify({ 'acActivityed': editedRows }); 
      console.log(UpdatedRows); 

      $.ajax({ 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       url: "/acActivity/Edit", 
       traditional: true, //must be tru for arrray to be send 
       data: { 'arrayOfValues': UpdatedRows }, 
       dataType: "json", 
       success: function (data) { 
        // here comes your response after calling the server 
        alert('Suceeded'); 
       }, 
       error: function (jqXHR, textStatus, errorThrown) { 
        alert("error : " + jqXHR.responseText); 
       } 
      }); 
     }); 
     //#endregion 

     //#region deleted all selected 
     $('#DeleteSelectedbtn').on('click', function() { 
      if (confirm("Are you sure to delete All Selected ?????")) { 
       var selectedData = []; 
       var selectedIndexes; 

        selectedIndexes = grid.getSelectedRows(); 
        jQuery.each(selectedIndexes, function (index, value) { 
         selectedData.push(grid.getDataItem(value).id); 
        }); 
        console.log(selectedData); 
        var SelectedIds = selectedData.join(',') ; 
        console.log(SelectedIds); 
       $.ajax({ 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        url: "/acActivity/DeleteSelected", 
        data: JSON.stringify({ "ids": SelectedIds }), 
        dataType: "json", 
        success: function (data) { 
         grid.render(); 
        }, 
        error: function (err) { 
         alert("error : " + err); 
        } 
       }); 
      } 
     }); 
     //#endregion 
    }); 

次のようにサーバーに戻って、そのアレイを投稿

バルクは、選択された行

を削除する

削除選択したボタンを（両方の編集をして、新しい追加）保存するよう

は、すべての変更を保存するには