当前位置：文江博客话题详情

在 SlickGrid 中保存更改

发布于 2024-09-09 05:36:35 字数 79 浏览 2 评论 0 原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天暗了我发光 2024-09-16 05:36:35

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

The trick to saving the SlickGrid is to realise that the grid will update the array of data that you supplied when creating the grid as the cells are edited.

The way I then save that is to include a form with a submit button and a hidden field below the grid. I trap the submit event and use the JSON plugin to serialise the array and place it in the hidden field. On the server side you'll receive a JSON string which you can deserialise, loop through and write to the database.

Assuming your array of data is called "data" like the samples, the following should work for you:

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

回复收藏 0 原文

蘸点软妹酱 2024-09-16 05:36:35

为了完整起见，我们提供了一个演示 onCellChange 用法的最小示例，请参阅 Jim OHalloran 的帖子。

有关更多信息，并查看可与 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>

For completeness, a minimal example demonstrating the usage of onCellChange, referred to in Jim OHalloran's post.

For more information, and to see all events that can be utilized similarly to onCellChange, see comments at the beginning of the 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>

回复收藏 0 原文

骄傲 2024-09-16 05:36:35

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

回复收藏 0 原文

~没有更多了~

关于作者

ˉ厌

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

在 SlickGrid 中保存更改

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

不再见

真是无聊啊

樱娆

浅语花开

烛光

绻影浮沉

友情链接

在 SlickGrid 中保存更改

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

不再见

真是无聊啊

樱娆

浅语花开

烛光

绻影浮沉

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。