Slickgrid - 如何修改id值

Question

我只是開始把握Slickgrid（帶有一個asp.net MVC後端）作爲一個簡單的開始，我想我們把它作爲一個Key/Value對系統的編輯網格設置。我的工作確定爲添加，但更新工作正常，除非我們編輯密鑰。

因爲我們已經改變了鍵值，它總是看起來像一個新的鍵/值對，而不是修改現有的項目。所以我的問題是，我怎麼讓後端知道我正在修改什麼項目？

我想我可以添加一個額外的字段（持有原始ID）到數據視圖，但我有點想知道如果我缺少一些功能，使這更容易。

$(function() { 
    var grid; 
    var columns = [{ 
     id: "id", 
     name: "Name", 
     field: "id", 
     editor: Slick.Editors.Text 
    }, { 
     id: "Value", 
     name: "Value", 
     field: "Value", 
     editor: Slick.Editors.Text 
    }, ]; 

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

    var dataView = new Slick.Data.DataView(); 
    grid = new Slick.Grid("#myGrid", dataView, columns, options); 

    grid.setSelectionModel(new Slick.CellSelectionModel()); 

    grid.onCellChange.subscribe(function(e, args) { 
     var row = dataView.getItem(args.row); 
     var value = row[grid.getColumns()[args.cell].field]; 
     var id = row[grid.getColumns()[0].field]; 

     var data = { 
      value: value, 
      id: id 
     }; 
     var url = "@Url.Action("Update", "SystemSettings")"; 

     $.ajax({ 
      type: "POST", 
      url: url, 
      data: data, 
      dataType: "json", 
      success: function(a) { 
       if (a.status != "ok") { 
        alert(a.msg); 
        undo(); 
       } else { 
        alert(a.msg); 
       } 
       return false; 
      } 
     }); 
    }); 

    grid.onAddNewRow.subscribe(function(e, args) { 
     var item = { 
      "id": dataView.length, 
      "value": "New value" 
     }; 
     $.extend(item, args.item); 
     dataView.addItem(item); 
    }); 

    dataView.onRowCountChanged.subscribe(function(e, args) { 
     grid.updateRowCount(); 
     grid.render(); 
    }); 

    dataView.onRowsChanged.subscribe(function(e, args) { 
     grid.invalidateRows(args.rows); 
     grid.render(); 
    }); 

    $.getJSON('@Url.Action("GetAll", "SystemSettings")', function(data) { 
     dataView.beginUpdate(); 
     dataView.setItems(data); 
     dataView.endUpdate(); 
    }); 
}); 

我的要求是爲網格，允許用戶能夠執行數據庫表上的所有基本CRUD功能。那麼，我是否正朝着這個方向前進，還是應該做一些不同的事情。

Answer 1

所以，我想我並沒有完全理解數據視圖如何從網格中斷開。所以我決定將關鍵字段兩次作爲（不可編輯的）標識字段存儲一次，並且一次作爲可編輯的名稱字段。

一旦我意識到，我可以檢測到關鍵領域的舊&新版本：

$(function() { 
     var grid; 
     var columns = [ 
      { id: "name", name: "Name", field: "name", editor: Slick.Editors.Text }, 
      { id: "value", name: "Value", field: "value", editor: Slick.Editors.Text }, 
     ]; 

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

     var dataView = new Slick.Data.DataView(); 
     grid = new Slick.Grid("#myGrid", dataView, columns, options); 

     grid.setSelectionModel(new Slick.CellSelectionModel()); 

     grid.onCellChange.subscribe(function (e, args) { 
      var row = dataView.getItem(args.row); 
      var id = row["id"]; 
      var value = row["value"]; 
      var name = row["name"]; 

      var data = { value: value, id: id, name: name }; 
      var url = "@Url.Action("Update", "SystemSettings")"; 

      $.ajax({ 
       type: "POST", 
       url: url, 
       data: data, 
       dataType: "json", 
       success: function (a) { 
        if (a.status != "ok") { 
         alert(a.msg); 
         undo(); 
        } else { 
         alert(a.msg); 
        } 
        return false; 
       } 
      }); 
     }); 

     grid.onAddNewRow.subscribe(function (e, args) { 
      var item = { "id": args["name"], "value": "New value" }; 
      $.extend(item, args.item); 
      dataView.addItem(item); 
     }); 

     dataView.onRowCountChanged.subscribe(function (e, args) { 
      grid.updateRowCount(); 
      grid.render(); 
     }); 

     dataView.onRowsChanged.subscribe(function (e, args) { 
      grid.invalidateRows(args.rows); 
      grid.render(); 
     }); 

     $.getJSON('@Url.Action("GetAll", "SystemSettings")', function (data) { 
      dataView.beginUpdate(); 
      dataView.setItems(data); 
      dataView.endUpdate(); 
     }); 
    });