16

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

4

3 回答 3

18

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

然后我保存的方法是在网格下方包含一个带有提交按钮和隐藏字段的表单。我捕获提交事件并使用JSON 插件序列化数组并将其放置在隐藏字段中。在服务器端，您将收到一个 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>
于 2010-07-18T03:43:58.363 回答
16

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

欲了解更多信息，并查看可以与 onCellChange 类似地使用的所有事件，请参阅SlickGrid 源代码开头的注释。

<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>
于 2010-11-18T21:27:50.853 回答
4

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

于 2010-07-22T07:19:36.753 回答