右键单击行时如何在数据表上显示编辑和删除按钮？

Question

我可能会在这个问题上投反对票，但是。就这样吧。

我正在使用datatables。是否可以像示例here 一样在右键单击时显示有效的编辑和删除按钮？我不擅长jquery。如果有人可以发送样品，我将不胜感激。我发现的唯一工作示例是this。但这不是我想要达到的目标。

点击事件示例：https://datatables.net/examples/advanced_init/events_live.html

Answer 1

这是对第一个示例中使用的 javascript 的修改：

$(document).ready( function () {
  var oTable = $('#example').dataTable({
    "bJQueryUI": true,
    "sDom": 'l<"H"Rf>t<"F"ip>'
  });
  $(document).contextmenu({
    delegate: ".dataTable td",
    menu: [
      {title: "Delete", cmd: "delete"},
      {title: "Edit", cmd: "edit"}
    ],
    select: function(event, ui) {
        switch(ui.cmd){
            case "delete":
                $(ui.target).parent().remove();
                break;
            case "edit":
              $(ui.target).html(
                $('<input type="text"/>').val(
                  $(ui.target).text()
                ).bind( "keypress focusout",function (e) {
                  if (e.type=="keypress"?(e.keyCode ==13?true:false):true) {
                      $(this).parent().html(
                        $(this).val()
                      );
                    }
                  })
              );
                break;
        }
    },
    beforeOpen: function(event, ui) {
        var $menu = ui.menu,
            $target = ui.target
        ui.menu.zIndex(0);
    }
  });
} );

工作示例已在此处发布：

http://live.datatables.net/munonapo/1/embed

Answer 2

您可以在drawCallback 处理程序中初始化上下文菜单，并在$.contextMenu 自己的回调中从单击的行中检索id：

drawCallback : function() {
  $.contextMenu({
        selector: 'tbody tr td', 
        callback: function(key, options) {
            var id = options.$trigger[0].parentElement.id;
            var m = "clicked: " + key + ' ' + id;
            window.console && console.log(m) || alert(m); 
            /*
             switch (key) {
               case 'delete' :
                 yourDeleteMethod(id); break;
               case 'edit' :
                 yourEditMethod(id); break;
               ...
              }
            */ 
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"},
           copy: {name: "Copy", icon: "copy"},
            "paste": {name: "Paste", icon: "paste"},
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: function(){
                return 'context-menu-icon context-menu-icon-quit';
            }}
        }
    });
},

更新小提琴 -> http://jsfiddle.net/0f9Ljfjr/900/

由于选择器设置为tbody tr td，id 将始终可以通过options.$trigger[0].parentElement.id 找到。现在您只需要响应您需要的任何操作，并使用检索到的id 调用您自己的方法。