如何從上下文菜單將數據傳遞給模態？

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>