如何从上下文菜单将数据传递给模态？

Question

我有一个包含两列的表。我创建了两个条目的jQuery上下文菜单：编辑和删除。

如果我对某一行执行右键单击并单击编辑按钮，我想打开自举模式并将数据传递给它。

这里是我的上下文菜单代码：

<script type='text/javascript'> 
window.onload=function(){ 
    $(function() { 
     $(".context-menu-one").contextMenu({ 
      selector: 'td', 
      callback: function(key, options) { 
       switch (key) { 
        case 'edit': 
         var content = $(this).data('id'); 
         $('#myModal').modal('show'); 
         break; 

        case 'delete': 
         break; 
       } 
      }, 
      items: { 
       "edit": {name: "Modifier", icon: "edit"}, 
       "delete": {name: "Supprimer", icon: "delete"}, 
      } 
     }); 
     $('.context-menu-one').on('click', function(e){ 
      console.log('clicked', this); 
     }) 
    }); 
} 
</script> 

这是我的模态代码：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Test</h4> 
     </div> 
     <form class="my-form"> 
     <div class="modal-body">           
     <label>SDA 
      <input type="text" id="sda" name="sda" value="" required="required" class="form-control col-md-7 col-xs-12"> 
     </label> 
     <label>Service 
     <input type="text" id="service" name="service" value="" required="required" class="form-control col-md-7 col-xs-12"> 
     </label> 
     <label id="label-id"></label> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Clode</button> 
     <button type="button" class="btn btn-primary" id="add">Add</button> 
    </form> 
     </div> 
    </div> 
    </div> 

这里的PHP代码检索数据：

$reponse = $bdd->query("SELECT * FROM table"); 
    while ($donnees = $reponse->fetch()) { 

     echo ' 
     <tr> 
      <td data-id="'.$donnees[0].'">' . $donnees[1] . '</td> 
      <td data-id="'.$donnees[0].'">' . $donnees[2]. '</td> 
     </tr> 
    '; 
    } 

有人能告诉我这是做到这一点的最佳方式？

Answer 1

我已经找到了解决办法，这里的更新代码：

<script type='text/javascript'> 
window.onload=function(){ 
    $(function() { 
     $(".context-menu-one").contextMenu({ 
      selector: 'td', 
      callback: function(key, options) { 
       switch (key) { 
        case 'edit': 
        sda = $(this).parent().find("td:eq(0)").text(); 
        service = $(this).parent().find("td:eq(1)").text(); 
        $("#sda").val(sda); 
        $("#service").val(service); 
        $('#myModal').modal('show'); 
        break; 

        case 'delete': 
         break; 
       } 
      }, 
      items: { 
       "edit": {name: "Modifier", icon: "edit"}, 
       "delete": {name: "Supprimer", icon: "delete"}, 
      } 
     }); 
     $('.context-menu-one').on('click', function(e){ 
      console.log('clicked', this); 
     }) 
    }); 
} 
</script>