從slickgrid保存數據

Question

任何人都可以告訴我如何識別我在slickgrid中添加或編輯/更新的行。我正嘗試使用Jquery AJAX將數據保存到數據庫。我正在使用dataview選項。 我只需要保存/更新那些新添加/更新的行。

在此先感謝。

Answer 1

您需要確保的第一件事是每行都使用服務器端的唯一標識進行初始化（例如，數據庫中行的主鍵值）。

然後你就可以使用grid.onAddNewRow事件如下

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

當用戶點擊保存按鈕，只需將editedRows對象發佈到服務器。然後，您的php腳本可以遍歷提交的行標識並更新dv中所有更改的行。

注意：我的代碼未經測試，但您應該檢查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建議，

創建一個數組來保存所有更改然後張貼陣列到服務器，如下

//#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 
    }); 

，你將需要在您的網頁上的2鍵，

1. 保存所有更改批量保存（包括編輯和添加新）
2. 刪除所選按鈕來刪除選定的行