16

こんにちは、私は SlickGrid を見ています。セルを編集する方法の例を見ることができますが、これらの変更を保存しますか。これを行う方法を教えてくれる例をまだ見つけていません。

4

3 に答える 3

18

SlickGridを保存する秘訣は、セルの編集時にグリッドの作成時に指定したデータの配列がグリッドによって更新されることを理解することです。

次に保存する方法は、送信ボタンとグリッドの下の非表示フィールドを含むフォームを含めることです。送信イベントをトラップし、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>
于 2010-07-18T03:43:58.363 に答える
16

完全を期すために、Jim OHalloran の投稿で言及されている 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>
于 2010-11-18T21:27:50.853 に答える
4

私は個人的にJSONシリアライズを使用しており、以前の回答の非表示フィールドアプローチで送信しますが、別のアプローチは、セル値が変更された後にSlickGridによって発生したonCellChangeイベントをトラップし、サーバーにAjax呼び出しを行って変更を保存することです。価値。これにより、サーバーへの小さな Ajax リクエストが大量に発生します (負荷が増加する可能性があります) が、変更が行われるとすぐにサーバーが更新されます。

于 2010-07-22T07:19:36.753 に答える