Сохранение изменений в SlickGrid - PullRequest
Новая
       41

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

16 голосов
/ 12 июля 2010

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

Ответы [ 3 ]

18 голосов
/ 18 июля 2010

Хитрость для сохранения SlickGrid заключается в том, чтобы понять, что сетка будет обновлять массив данных, предоставленный вами при создании сетки, по мере редактирования ячеек.Форма с кнопкой отправки и скрытым полем под сеткой.Я перехватываю событие submit и использую плагин 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>
16 голосов
/ 19 ноября 2010

Для полноты, минимальный пример, демонстрирующий использование onCellChange, упоминаемый в посте Джима Охаллорана.

Для получения дополнительной информации и просмотра всех событий, которые можно использовать аналогично 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>
4 голосов
/ 22 июля 2010

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

...