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

Question

对于这个问题，我可能会投反对票，但是。就这样了。

我正在使用 datatables. Is it possible to show working edit and delete buttons on right click like the example here? I am not good at jquery. I would appreciate if anyone can send a sample. The only working example I found is 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';
            }}
        }
    });
},

已更新 fiddle -> http://jsfiddle.net/0f9Ljfjr/900/

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

调用您自己的方法

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

how to show edit and delete buttons on datatables when right click to rows?

ajax

jquery

contextmenu

right-click

datatables