2016-10-03 4 views
0

私は2つの列を含むテーブルを持っています。編集と削除の2つのエントリを持つ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> 
    '; 
    } 

誰かがある教えてもらえますこれを行う最善の方法は?

+0

、およびからの? – Franco

+0

私のデータ(VARCHAR型)はMySQLに格納されます。ありがとう – Julien

+0

もしそうなら、あなたはデータベースからデータを取得するクエリを持っている 'php'コードも投稿しなければなりません。 – Franco

答えて

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> 
あなたがモーダルに渡したいんデータ
関連する問題