SlickGridのコンテキストメニューで行の追加と削除のサンプル

SlickGridでマルチカラムソートを試すの続きです。

本家ではSlickGrid example 7: Eventsにコンテキストメニューのサンプルがあります。

私が書いたサンプルは
https://github.com/hnakamur/slickgrid_example/tree/006c62a3decc109fa5789e44eb409883649953d8
にあります。

コンテキストメニューは以下のようにマークアップします。

index.html

<ul id="contextMenu">
<li data="add">本を追加</li>
<li data="delete">本を削除</li>
</ul> 

コンテキストメニューのcssは以下のようにします。

css/example.css

# contextMenu {
  position: absolute;
  display: none;

  background: #e1efc7;
  border: 1px solid gray;
  padding: 2px;
  min-width: 100px;
  -moz-box-shadow: 2px 2px 2px silver;
  -webkit-box-shadow: 2px 2px 2px silver;
  z-index: 99999;
}

# contextMenu li:hover {
  background-color: white;
}

grid.onContextMenuにコンテキストメニューを開くときの処理を記述し、 $("#contextMenu").clickにメニューが選択された時の処理を記述します。

js/sample.js

  grid.onContextMenu.subscribe(function (e) {
    e.preventDefault();
    var cell = grid.getCellFromEvent(e);
    $("#contextMenu")
        .data("row", cell.row)
        .css("top", e.pageY)
        .css("left", e.pageX)
        .show();

    $("body").one("click", function () {
      $("#contextMenu").hide();
    });
  });

  $("#contextMenu").click(function (e) {
    if (!$(e.target).is("li")) {
      return;
    }
    if (!grid.getEditorLock().commitCurrentEdit()) {
      return;
    }
    var menu = $(e.target).attr("data");
    if (menu === "delete") {
      dataView.beginUpdate();
      var rows = grid.getSelectedRows();
      var cids = $.map(rows, function (row, i) {
        return data[row].cid;
      });
      $.each(cids, function (i, cid) {
        dataView.deleteItem(cid);
      });
      dataView.endUpdate();
      grid.setSelectedRows([]);
    } else if (menu === "add") {
      var count = grid.getSelectedRows().length;
      var row = $(this).data("row") + 1;
      for (var i = 0; i < count; i++) {
        dataView.insertItem(row + i, {cid: nextCid++});
      }
    }
  });

grid.getSelectedRows()で現在選択されている行インデクスの配列が返ります。昇順ではなく選択された順序になっているようです。

DataViewで行を削除するときはUpdating dataに書かれているようにdataView.deleteItem()を使います。

行を削除すると行インデクスがずれるので、選択されている行インデクスに対応するDataViewのデータIDをひと通り求めてから消すようにしています。

また、行を追加する処理ではGoogleDrive - Google Spreadsheetで一度に複数行を追加する - Qiita [キータ]を参考に、現在選択されている行数と同じ行数を追加するようにしてみました。一気にたくさんの行を追加したいときに便利です。