Question

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

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

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

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

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

1 个答案: