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是一個回調到所選擇的行中的工作表中