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的节点

添加
删除
修改

我该怎么做？

Answer 1

有很多JQuery Context Menu options on this link。

我刚刚挑选了最多分的jQuery contextMenu。

我在使用UL / LI的treeview示例中创建了一个JSFeed fork，并使用Context-Menu创建了这个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代码中，配置上下文菜单。

selector属性将上下文菜单放在<span>类型的每个元素中，并使class值属性为“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); 
},

在MVC中将自定义右键菜单添加到treeview的节点

1 个答案: