將自定義右鍵單擊菜單添加到MVC中treeview的節點

Question

這是我的助手，用於生成樹視圖。 使用此我能夠在mvc5中生成樹視圖。

@helper GetTreeView(List<MvcTreeview.Models.Category> siteMenu, int parentID) 
{ 
foreach (var i in siteMenu.Where(a => a.ParentID.Equals(parentID))) 
{ 
    <li> 
     @{var submenu = siteMenu.Where(a => a.ParentID.Equals(i.ID)).Count();} 
     @if (submenu > 0) 
     { 
      <span class="collapse collapsible">&nbsp;</span> 
     } 
     else 
     { 
      <span style="width:15px; display:inline-block">&nbsp;</span> 
     } 
     <span id="Category"> 
      <a href="#" onclick="PassingFunction(@i.ID)">@i.CategoryName</a> 
      @*oncontextmenu="return false"*@ 
     </span> 

     @if (submenu > 0) 
     { 
      <ul> 
       @Treeview.GetTreeView(siteMenu, i.ID) 
       @* Recursive Call for Populate Sub items here*@ 
      </ul> 
     } 
    </li> 
} 
} 

這是我的看法顯示

@model List<MvcTreeview.Models.Category> 
    @{ 
    ViewBag.Title = "Simple"; 
    } 

    <div class="gridbox gridleft"> 
    <div class="left"> 
     <div style="padding:10px; background-color:#FAFAFA"> 
      <div class="treeview"> 
       @if (Model != null && Model.Count() > 0) 
       { 
        <ul> 
         @Treeview.GetTreeView(Model, Model.FirstOrDefault().ParentID) 
        </ul> 
       } 
      </div> 
     </div> 
    </div> 
</div> 
<div id="onSuccess"> 
</div> 
    @* Here We need some Jquery code for make this treeview collapsible *@ 
    @section Scripts{ 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul 
      $(".collapsible").click(function (e) { 
       e.preventDefault(); 
       $(this).toggleClass("collapse expand"); 
       $(this).closest('li').children('ul').slideToggle(); 
      }); 
     }); 



     function PassingFunction(clicked_id) { 
      url = '@Url.Action("Details", "TestDetails")'; 
      $.ajax({ 
       url: url, 
       type: 'GET', 
       data: { 'id': clicked_id }, 
       success: function (returnData) { 
        $("#onSuccess").html(returnData); 
        console.log(returnData); 

       }, 
       error: { 
       } 
      }); 
     } 



    </script> 
    } 

現在我想自定義功能添加到TreeView的節點

1. 添加
2. 刪除
3. 編輯

我該怎麼做？

Answer 1

有很多JQuery Context Menu options on this link。

我剛剛挑選了他們最多的分叉，jQuery contextMenu。

我在使用UL/LI樹狀的例子創建了一個JSFeed叉，創造了這個的jsfiddle與上下文菜單，以幫助您： http://jsfiddle.net/mqueirozcorreia/0h82qto6/

---

解釋代碼：

我已添加外部資源：

http://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.min.css 

https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js 

http://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.min.js 

所有的魔法都在javascript代碼，配置上下文菜單。

選擇器屬性將放上下文菜單中<span>類型的每個元件和具有值「的ContextMenuItem」類屬性：

selector: 'span.contextMenuItem', 

當用戶點擊下面運行的回調函數。在這個例子中，它警告/記錄選擇了什麼鍵和id屬性值。

callback: function(key, options) { 
    var m = "clicked: " + key + " on element of id " + options.$trigger.attr("id"); 
    window.console && console.log(m) || alert(m); 
},