jQuery数据表上下文菜单不出现

Question

我使用datatables.net以下显示上下文菜单右键单击表行。添加此代码后，网页的默认功能已禁用，但上下文菜单没有出现。怎么了？

"fnDrawCallback": function() { 
      $('#example tr').on('mouseenter', function() {  
       $(this).contextMenu({ 
        menu: 'productionRightClickMenu' 
       }, 
      function (action, el, pos) { 
       alert("hi");   
      }); 
      }); 
     } 

，我在网格上使用通常的上下文菜单我使用的服务器端处理的数据表后无法正常工作。（使用客户端处理上下文菜单可与下面的代码。）

//Function for context menu 
(function ($, window) { 

    $.fn.contextMenu = function (settings) { 

     return this.each(function() { 

      // Open context menu 
      $(this).on("contextmenu", function (e) { 
       //open menu 
       $(settings.menuSelector) 
        .data("invokedOn", $(e.target)) 
        .show() 
        .css({ 
         position: "absolute", 
         left: getLeftLocation(e), 
         top: getTopLocation(e) 
        }) 
        .off('click') 
        .on('click', function (e) { 
         $(this).hide(); 

         var $invokedOn = $(this).data("invokedOn"); 
         var $selectedMenu = $(e.target); 

         settings.menuSelected.call(this, $invokedOn, $selectedMenu); 
        }); 

       return false; 
      }); 

      //make sure menu closes on any click 
      $(document).click(function() { 
       $(settings.menuSelector).hide(); 
      }); 
     }); 

     function getLeftLocation(e) { 
      var mouseWidth = e.pageX; 
      var pageWidth = $(window).width(); 
      var menuWidth = $(settings.menuSelector).width(); 

      // opening menu would pass the side of the page 
      if (mouseWidth + menuWidth > pageWidth && 
       menuWidth < mouseWidth) { 
       return mouseWidth - menuWidth; 
      } 
      return mouseWidth; 
     } 

     function getTopLocation(e) { 
      var mouseHeight = e.pageY; 
      var pageHeight = $(window).height(); 
      var menuHeight = $(settings.menuSelector).height(); 

      // opening menu would pass the bottom of the page 
      if (mouseHeight + menuHeight > pageHeight && 
       menuHeight < mouseHeight) { 
       return mouseHeight - menuHeight; 
      } 
      return mouseHeight; 
     } 

    }; 
})(jQuery, window); 
    //for context menu 

//$(document).on('keydown', '.inputs', function (e) { 

$("#example td").contextMenu({ 
    menuSelector: "#contextMenu", 
    menuSelected: function (invokedOn, selectedMenu) { 
     var value = invokedOn.parent().children(':first').text(); 

     $.ajax({ 
      url: "../xyz/GetItemInfoDetails", 
      type: 'POST', 
      dataType: 'json', 
      data: { "item_id": value }, 
      success: function (data) { 
       if (data.ItemID != null) { 

        $("#value_itemId").html(data.ItemID); 
        $("#value_ItemDescription").html(data.ItemDescription); 
        $("#value_ItemGroup").html(data.ItemGroup); 
        $("#value_ItemCategory").html(data.ItemCategory); 
        $("#value_ItemUnitOfMesure").html(data.ItemUnitOfMesure); 
       } 
      } 
     }); 
     $("#itemdetailsmodal").modal('show'); 

    } 
}); 

Answer 1

在实例化数据表时使用fnRowCallback选项。然后在它的函数里面创建你的上下文菜单。

"fnRowCallback": function (nRow){ 
    $(nRow).on('mousenter', function() {  
      $(this).contextMenu({ 
       menu: 'productionRightClickMenu' 
      }, 
     function (action, el, pos) { 
      alert("hi");   
     }); 
    }); 
} 

事端这样可以与nRow是一个回调到所选择的行中的工作表中