Menu contextuel dans WebGrid

J'utilise WebGrid dans mon projet MVC et je souhaite ajouter un menu contextuel sur un clic droit (sur un clic de ligne) dans ce WebGrid. Donc, quelqu'un pourrait m'aider s'il vous plaît comment ajouter un menu contextuel dans mon webgrid et sur la sélection d'un élément de menu contextuel, comment récupérer l'ID? Voici le code de détail:Menu contextuel dans 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"> 
}

Source

2015-07-20 Vikash Singh

Récemment, je mis en œuvre une tâche similaire, en utilisant jQuery Context Menu. Voici le résultat

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

Source

2017-03-08 13:39:53

Menu contextuel dans WebGrid

Répondre

Questions connexes