contextmenu() 与数据表？

Question

我想添加一些上下文菜单事件，例如 filter、nofilter 和 delete，这是我的代码。

$("#albums_minimal").contextmenu({
  delegate: " .dataTable td",
  menu: [{
      title: "Filter",
      cmd: "filter"
    },
    {
      title: "Remove filter",
      cmd: "nofilter"
    },
    {
      title: "Delete",
      cmd: "delete"
    },
  ],
  select: function(event, ui) {
    var celltext = ui.target.text();
    var colvindex = ui.target.parent().children().index(ui.target);
    var colindex = $('table thead tr th:eq(' + colvindex + ')'.data('column-index'));
    switch (ui.cmd) {

      case "filter":
        table
          .column(colindex)
          .search('^' + celltext + '$', true)
          .draw();
        break;
      case "nofilter":
        table
          .search('')
          .column().search('')
          .draw();
        break;
      case "delete":
        $(ui.target).parent().remove();
        break;

    }
  },
  beforeOpen: function(event, ui) {
    var $menu = ui.menu,
      $target = ui.target,
      extraData = ui.extraData;
    ui.menu.zIndex(0);
  }
});

<div class="col-sm-12">
  <table id="albums_minimal" class=" table table-striped table-bordered" style="width:100%" data-ajax="/api/albums/?format=datatables">
    <thead>
      <tr>
        <th data-data="rank">Rank</th>
        <th data-data="artist_name" data-name="artist.name">Artist</th>
        <th data-data="name">Album name</th>
      </tr>
    </thead>
  </table>
</div>

我关注了这个link：http://jsfiddle.net/rathore_gee/5vdb7t0L/

它不适用于我上面的代码。

我应该怎么做才能运行成功？

Answer 1

而不是使用 jQuery UI 也许我们可以从一些简单的开始。我不太确定您的代码试图做什么或您的目标是什么，但我相信您可以将其构建到此中。

看到 fiddle 使用 boostrap 4 而没有 jquery UI 东西。

https://jsfiddle.net/joshmoto/p1qa8gnL/3

jQuery

$('td').on('contextmenu', function(e) {

  var top = e.pageY - 10;
  var left = e.pageX - 10;

  $("#context-menu").css({
    display: "block",
    top: top,
    left: left
  });

  return false;

}).on("click", function() {

  $("context-menu").hide();

});

$("#context-menu a").on("click", function() {

  $(this).parent().hide();

});

HTML

<div class="container mt-3">
  <div class="row">
    <div class="col-sm-12">
      <table id="albums_minimal" class=" table table-striped table-bordered" style="width:100%" data-ajax="/api/albums/?format=datatables">
        <thead>
          <tr>
            <th data-data="rank">Rank</th>
            <th data-data="artist_name" data-name="artist.name">Artist</th>
            <th data-data="name">Album name</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>83%</td>
            <td>Joyce Muniz</td>
            <td>Malicia EP</td>
          </tr>
          <tr>
            <td>96%</td>
            <td>Kiwi</td>
            <td>Rabbit Hole EP</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="context-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

contextmenu() 与数据表？

contextmenu() with datatables?

jquery

contextmenu