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

回答

相關問題