在 SlickGrid 中保存更改答案

【问题标题】：Saving changes in SlickGrid在 SlickGrid 中保存更改
【发布时间】：2011-03-14 18:32:24
【问题描述】：

嗨，我正在查看 SlickGrid，我可以看到有关如何编辑单元格的示例，但是我是否保存了这些更改。我还没有找到一个例子来告诉我如何做到这一点。

【问题讨论】：

标签： javascript jquery jquery-ui grid slickgrid

【解决方案1】：

保存 SlickGrid 的技巧是要意识到网格将在编辑单元格时更新您在创建网格时提供的数据数组。

然后我保存的方法是在网格下方包含一个带有提交按钮和隐藏字段的表单。我捕获提交事件并使用JSON plugin 序列化数组并将其放置在隐藏字段中。在服务器端，您将收到一个 JSON 字符串，您可以将其反序列化、循环并写入数据库。

假设您的数据数组像示例一样被称为“数据”，那么以下内容应该适合您：

<form action="?" method="POST">
  <input type="submit" value="Save">
  <input type="hidden" name="data" value="">
</form>
<script>
  $(function() {
    $("form").submit(
      function() {
        $("input[name='data']").val($.JSON.encode(data));
      }
    );
  });
</script>

【讨论】：

嗨，吉姆，这就是我的想法。以为可能有其他一些实现，但猜不出来。没关系，谢谢。
这只是在我单击保存按钮后给我带来了一个空白网格。我做错了什么？
只想补充一点，这些天使用浏览器默认的JSON.stringify 应该没问题。除非您需要支持一些非常旧的浏览器，否则无需走 jQuery 插件路线。
谢谢，是的，现在应该不需要使用 jQuery 来 JSONify 了。

【解决方案2】：

为了完整起见，在 Jim OHalloran 的帖子中引用了一个演示 onCellChange 用法的最小示例。

如需更多信息，以及查看所有可与 onCellChange 类似使用的事件，请参阅SlickGrid source 开头的 cmets。

<head>
  <!-- boilerplate omitted ... -->
  <script type="text/javascript">
      var grid;

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

      var columns = [
          {id: "item_key", name: "Key",   field: "item_key" },
          {id: "value",    name: "value", field: "value",   editor: LongTextCellEditor }
      ];

      var data = [
          {item_key: "item1", value: "val1"},
          {item_key: "item2", value: "val2"},
      ];

      $(document).ready(function () {
          grid = new Slick.Grid($("#myGrid"), data, columns, options);

         //Earlier code for earlier version of slickgrid
         // grid.onCellChange = function (currentRow, currentCell, item) {
         //      alert(currentRow+":"+currentCell+"> key="+item['item_key']+", value="+item['value']);

          //Updated code as per comment.
          grid.onCellChange.subscribe(function (e,args) { 
                 console.log(args); 
             });

          };
      });
  </script>

</head>
<body>
  <div id="myGrid" style="height:10em;"> </div>
</body>

【讨论】：

此方法的 API 略有变化：grid.onCellChange.subscribe(function (e,args) { console.log(arguments); }); Args 是一个包含单元格、行、网格对象和已编辑项的对象。
@Iclark 你能解释一下我将如何针对特定单元格进行数据库更新吗？由于您的数据基本上是键值对，其中键必须与列字段键值匹配，我看不到如何提供单元格元素的唯一 ID，以便将该元素与数据库实体匹配？如何将我的单元格元素的唯一 ID 传递到当我进行数据库更新时我只更新已更改单元格中的元素而不是整个网格？
好一个。我使用 javascript hashtable 的实现来收集修改的行 (mojavelinux.com/articles/javascript_hashes.html)

【解决方案3】：

虽然我个人使用 JSON 序列化并在隐藏字段方法 from my previous answer 中提交，但另一种方法可能是在单元格值更改后捕获由 SlickGrid 触发的 onCellChange 事件，并对服务器进行 Ajax 调用以保存改变的值。这将导致向服务器发送大量小型 Ajax 请求（这可能会增加负载），但会在进行更改后立即更新服务器。

【讨论】：

我已经以这种方式实现了一个示例，但我更喜欢处理批量更新的第一个示例，但我可以看到两者的好处，很高兴看到至少还有其他人在使用它；）
我自己更喜欢批处理方法，但我想我会为了完整性添加另一个想法:)
比批处理方法 imo 更好更可靠。
各位朋友，服务器端接收到json后，如何知道grid中的chages是什么。我的意思是您正在删除所有旧数据并将新数据保存到数据库中。
如果您在 onCellChange 事件中执行 Ajax 请求，那么可以安全地假设一切都发生了变化。如果您使用我的其他方法，那么您可以加载旧数据并确定发生了什么变化，或者无论如何都更新所有记录。