Контекстное меню в WebGrid

Я использую WebGrid в своем проекте MVC, и я хочу добавить контекстное меню по щелчку правой кнопкой мыши (по щелчку строки) в этом WebGrid. Итак, может ли кто-нибудь помочь мне, как добавить контекстное меню в свой веб-ресурс и выбор пункта контекстного меню, как получить идентификатор? Ниже приводится код более подробно:Контекстное меню в WebGrid

@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"> 
}

источник

2015-07-20 Vikash Singh

Недавно я осуществил аналогичную задачу, используя jQuery Context Menu. Вот результат

@{ 
    @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

источник

2017-03-08 13:39:53

Контекстное меню в WebGrid

ответ

Смежные вопросы