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(); 
     }); 
    });