保存更改SlickGrid

18

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

来源

2010-07-18 03:43:58

+0

嗨吉姆，这是我的想法。认为可能有其他一些实现，但不要猜测。这很好，谢谢。 – Rubans 2010-07-21 13:00:28

+0

这在我点击保存按钮后给我一个空白的网格。我究竟做错了什么？ – randomizertech 2013-03-19 15:53:23

+0

只是想补充说，使用浏览器的默认['JSON.stringify']（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify）应该是没问题的这些天。除非您需要支持一些非常老的浏览器，否则不需要使用jQuery插件路线。 – user128216 2016-05-16 14:43:59

4

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

来源

2010-07-22 07:19:36

+0

我已经实现了一个例子，但我宁愿你的第一个例子批量更新处理，但我可以看到两者的好处，很高兴看到至少有别的地方使用它;） – Rubans 2010-07-22 11:20:26

+0

我更喜欢批处理方法我自己，但我想我会补充完整性的其他想法:) – 2010-08-15 05:32:56

+0

比批处理方法更好，更可靠。 – EarlyPoster 2010-11-03 11:27:30

16

为了说明完整性，演示了Jim OHalloran的帖子中提到的onCellChange的用法。

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

来源

2010-11-18 21:27:50 lclark

+4

这个方法的API略有改变： 'grid.onCellChange.subscribe（功能（即，参数）{ 的console.log（参数）; }）;' 参数数量是与所述单元格，行一个对象，网格对象和编辑的项目。 – Solsys 2012-04-18 14:40:09

+0

@Iclark你能解释我将如何针对数据库更新的特定单元格？由于你的数据基本上是一个关键值对，其中键必须与列字段键值匹配，所以我没有看到如何提供我的单元元素的唯一ID，以便我可以将该元素与数据库实体匹配？我如何将我的单元格元素的唯一ID传递到我更新数据库的位置时只更新已更改的单元格中的元素，而不更新整个网格？ – Marko 2013-10-19 14:53:37

+0

不错的一个。我使用JavaScript哈希表的实现来收集修改的行（http://www.mojavelinux.com/articles/javascript_hashes.html） – Amit 2013-11-07 05:44:57

保存更改SlickGrid

回答

相关问题