Saving changes in SlickGrid

2019-01-13 08:32发布

站内问答 / JavaScript
926 3 5

HI, I'm looking at SlickGrid and I can see example on how to edit the cell, however do I save these changes. I have yet to find an example that tells me how to do this.

3条回答
Deceive 欺骗
2楼-- · 2019-01-13 09:05

While I'm personally using the JSON serialize and submit in a hidden field approach from my previous answer another approach could be to trap the onCellChange event fired by SlickGrid after a cell value has changed and make an Ajax call to the server to save the changed value. This will result in lots of small Ajax requests to the server (which may increase load) but updates the server as soon as changes are made.

查看更多
0人赞 添加讨论(0) 举报
萌系小妹纸
3楼-- · 2019-01-13 09:24

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人赞 添加讨论(0) 举报
Viruses.
4楼-- · 2019-01-13 09:28

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人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)