使用引導3下拉菜單作爲上下文菜單爲多級asp網格

Question

我使用引導3和Asp.net gridview。我一直在使用這個解決方案example in fiddle

<table id="myTable" class="table table-hover"> 

我的問題是，我有一個網格嵌套或者多級網格創建上下文菜單我的GridView。我想爲每個級別設置不同的上下文菜單。這種解決方案有可能。

Answer 1

是的，您的網頁上的不同表格可能有不同的上下文菜單，這只是您如何處理它的問題。

這裏有兩個選項，一個簡單，一個更復雜一點。

1：多重選擇器

只需改變你叫contextMenu jQuery選擇。 這裏是示出了用於所述第一表和所述第二嵌套表不同的上下文菜單的一個示例：http://jsfiddle.net/Sly_cardinal/46sHX/1/

// Only add this context menu to cells that are 
// a direct descendent of #myTable 
$("#myTable > tbody > tr > td").contextMenu({ 
    menuSelector: "#contextMenu", 
    menuSelected: function (invokedOn, selectedMenu) { 
     var msg = "You selected the menu item '" + selectedMenu.text() + 
      "' on the value '" + invokedOn.text() + "'"; 
     alert(msg); 
    } 
}); 

// Only add this context menu to cells that are in a table 
// that is nested inside #myTable 
$("#myTable td > table td").contextMenu({ 
    menuSelector: "#contextMenu2", 
    menuSelected: function (invokedOn, selectedMenu) { 
     var msg = "You selected the menu item '" + selectedMenu.text() + 
      "' on the value '" + invokedOn.text() + "'"; 
     alert(msg); 
    } 
}); 

---

2：動態menuSelector

更復雜的選項需要改變您的上下文菜單插件允許menuSelector屬性成爲接收單擊元素並返回應顯示的上下文菜單的選擇器的函數。

這裏的改變contextMenu插件：

(function ($, window) { 

    $.fn.contextMenu = function (settings) { 

     return this.each(function() { 
      var selector; 

      // Open context menu 
      $(this).on("contextmenu", function (e) { 
       selector = $(getMenuSelector(e, settings.menuSelector)) 

       //open menu 
       $(selector) 
        .data("invokedOn", $(e.target)) 
        .show() 
        .css({ 
         position: "absolute", 
         left: getLeftLocation(e, selector), 
         top: getTopLocation(e, selector) 
        }); 

       //add click listener on menu 
       ContextMenuClickHandler(); 

       return false; 
      }); 

      // click handler for context menu 
      function ContextMenuClickHandler() { 
       $(selector) 
        .off('click') 
        .on('click', function (e) { 
         $(this).hide(); 

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

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

      } 

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

     function getMenuSelector(e, menuSelector){ 
      var selector = menuSelector; 
      if ($.isFunction(menuSelector)){ 
       selector = menuSelector.call(null, e); 
      } 
      return selector; 
     } 

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

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

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

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

    }; 
})(jQuery, window); 

$("#myTable td").contextMenu({ 
    menuSelector: function(e){ 
     // Do something with the clicked element to work out what to show 
     var selector = "#contextMenu"; 
     if ($(e.target).closest('table').is('table table')){ 
      selector = '#contextMenu2'; 
     } 
     return selector; 
    }, 
    menuSelected: function (invokedOn, selectedMenu) { 
     var msg = "You selected the menu item '" + selectedMenu.text() + 
      "' on the value '" + invokedOn.text() + "'"; 
     alert(msg); 
    } 
}); 

而這裏的顯示它小提琴的工作：http://jsfiddle.net/Sly_cardinal/d8EfA/

我建議要通過原始和修改過的版本，看看它是如何工作的。