WebGrid中的上下文菜单

Question

I am using WebGrid in my MVC project and I want to add a context menu on right click (on row click) in that WebGrid. 我在MVC项目中使用WebGrid，并且想在该WebGrid中的右键单击（在行单击上）添加一个上下文菜单。 So, could anyone please help me how to add a context menu in my webgrid and on selection of a context menu item, how to retrieve the id? 因此，任何人都可以帮助我如何在我的Webgrid中添加上下文菜单，以及在选择上下文菜单项时如何检索ID？ Following is the code of more detail: 以下是更详细的代码：

@using (Html.BeginForm("save", "Inventory"))
{
    var grid = new WebGrid(Model.products, canSort: false, canPage: true, rowsPerPage: 3);
    int rowNum = 0;

    <div>
        @grid.GetHtml(tableStyle: "webGrid", alternatingRowStyle: "alt", headerStyle: "header",
            selectedRowStyle: "select",
        columns: grid.Columns
            (
               grid.Column("RowNumber", format: item => rowNum = rowNum + 1, style: "rowno"),

               grid.Column("Id", 
               format: (item) => Html.TextBox("products[" + (rowNum - 1).ToString() + "].Id", 
                   (object)item.Id, new { @readonly = "readonly" }), 
                   style: "id"),

              grid.Column("Name", format: (item) => Html.TextBox("products[" + (rowNum - 1).ToString() + "].Name", (object)item.Id), style:"name"),
                                                                                                                      grid.Column("Description", format: (item) => Html.TextBox("products[" + (rowNum - 1).ToString() + "].Description", (object)item.Description), style: "desc"),
                                                                                                          grid.Column("Quantity", format: (item) => Html.TextBox("products[" + (rowNum - 1).ToString() + "].Quantity", (object)item.Quantity), style: "qty"),
                                                                                                          grid.Column("QualityType", format: @item => Html.DropDownList("products[" + (rowNum - 1).ToString() + "].QualityType", (IEnumerable<SelectListItem>)Model.products[rowNum - 1].QualityTypeModel), style: "qlty")
                  ), mode: WebGridPagerModes.Numeric)

    </div>
    <input type="submit" value="Submit">
}

Answer 1

Recently I implemented a similar task, using jQuery Context Menu . 最近，我使用jQuery Context Menu实现了类似的任务。 Here is the result 这是结果

@{
    @model IEnumerable<TestWebGirdContextMenu.Models.User>
}

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.4.3/jquery.contextMenu.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.4.3/jquery.contextMenu.min.js" type="text/javascript"></script>

    <div class="container">
        <h2>WebGrid Context Menu</h2>
        <div class="row">
            <div class="col-lg-12">
                @{
                    var grid = new WebGrid(Model);
                }

                @grid.GetHtml(htmlAttributes: new { id = "webGrid" })
            </div>
        </div>
    </div>

    <script>
        $(function () {
            $.contextMenu({
                selector: "#webGrid tbody tr",
                callback: function (key, options) {
                    var m = "clicked: " + key;
                    window.console && console.log(m) || alert(m);
                },
                items: {
                    "edit": { name: "Edit", icon: "edit" },
                    "cut": { name: "Cut", icon: "cut" },
                    "copy": { name: "Copy", icon: "copy" },
                    "paste": { name: "Paste", icon: "paste" },
                    "delete": { name: "Delete", icon: "delete" },
                    "sep1": "---------",
                    "quit": {
                        name: "Quit", icon: function () {
                            return 'context-menu-icon context-menu-icon-quit';
                        }
                    }
                }
            });

            $('.context-menu-one').on('click', function (e) {
                console.log('clicked', this);
            });
        });
    </script>

</body>

Demo jQuery Context Menu 演示jQuery上下文菜单

WebGrid中的上下文菜单

问题描述

1 个解决方案

解决方案1
0 2017-03-08 13:39:53

WebGrid中的上下文菜单

问题描述

1 个解决方案

解决方案1 0 2017-03-08 13:39:53

解决方案1
0 2017-03-08 13:39:53