Сохранение изменений в SlickGrid

HI, Я смотрю на SlickGrid, и я могу увидеть пример того, как редактировать ячейку, однако я сохраняю эти изменения. Мне еще предстоит найти пример, который подскажет мне, как это сделать.

Ответ 1

Трюк для сохранения 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>

Ответ 2

Для полноты - минимальный пример, демонстрирующий использование 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>

Ответ 3

В то время как я лично использую сериализацию JSON и отправляю в скрытом полевом подходе из моего предыдущего ответа, другой подход может заключаться в том, чтобы уловить событие onCellChange, запущенное SlickGrid после значение ячейки изменилось и сделать вызов Ajax серверу для сохранения измененного значения. Это приведет к большому количеству небольших запросов Ajax на сервер (что может увеличить нагрузку), но обновляет сервер сразу после внесения изменений.