Question

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

Answer 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>

Answer 2

为了完整性，这是一个演示onCellChange用法的最小例子，在Jim OHalloran的帖子中提到。

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

<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>

Answer 3

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

保存SlickGrid中的更改

3 个答案: