Bootstrap:用于动态编辑数据的模式对话框 [英] Bootstrap: Modal dialog for editing data dynamically

问题描述

这个问题可能是重复的，但是我不知道要寻找我要寻找的解决方案的任何关键词.

This question might be a duplicate but I did not know any good key words to search for to find the solution I am looking for.

我正在一个向用户显示表格的网站上.该表在一列中包含用户可以编辑的注释.为此，我为该列中的每一行添加了一个按钮，以打开引导模式对话框，用户可以在其中编辑与特定行关联的注释.我还有一个JavaScript函数"saveNote(recordId)"，它从模式对话框的输入字段中读取输入的文本，然后通过ajax发布将其发送到服务器.

I am working on a website which shows a table to the user. In one column the table contains notes that the user can edit. To do so, I added a button for every row in that column to open a bootstrap modal dialog where the user can edit the note associated with the specific row. I also have a JavaScript-function "saveNote(recordId)" which reads the entered text from the input field in the modal dialog and then sends it to the server via an ajax post.

现在我的问题是:如何以及在哪里存储当前正在编辑的行的ID，以便可以将其传递给saveNote()函数?我在引导程序文档中找到了一个示例，但该示例仅涉及将数据动态传递到模式对话框(

Now my question is: How and where can I store the id of the row that is currently being edited so that I can pass it to the saveNote()-function? I found an example in the bootstrap documentation but that only covers passing data dynamically to the modal dialog (Varying modal content). Is there any common way to do this in a modal dialog or do I need a global variable for that in JavaScript?

推荐答案

基本上，将每行的 id 放入行按钮的 data-id 属性.然后将模态绑定到 show.bs.modal 事件，然后使用 $(e.relatedTarget).data('id')获得 data-id打开模态的按钮.查看评论以获取其他解释

Basically, put the id of each row to the data-id attribute of the row button. Then bind the modal to the show.bs.modal event then use $(e.relatedTarget).data('id') to get the data-id of the button that opened the modal. Check the comments for some other explanation

$(function() {
  $('#exampleModal').on('show.bs.modal', function(e) {
    $('.modalTextInput').val('');
    let btn = $(e.relatedTarget); // e.related here is the element that opened the modal, specifically the row button
    let id = btn.data('id'); // this is how you get the of any `data` attribute of an element
    $('.saveEdit').data('id', id); // then pass it to the button inside the modal
  })

  $('.saveEdit').on('click', function() {
    let id = $(this).data('id'); // the rest is just the same
    saveNote(id);
    $('#exampleModal').modal('toggle'); // this is to close the modal after clicking the modal button
  })
})

function saveNote(id) {
  let text = $('.modalTextInput').val();
  $('.recentNote').data('note', text);
  console.log($('.recentNote').data('note'));
  console.log(text + ' --> ' + id);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input class="modalTextInput form-control" placeholder="Text Here" />
      </div>
      <div class="modal-footer">
        <button type="button" class="saveEdit btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<table class="table table-bordered">
  <tbody>
    <tr>
      <td>Some data here</td>
      <td>
        <button class="btn btn-success btn-sm" data-id="1" data-toggle="modal" data-target="#exampleModal">Edit</button>
      </td>
    </tr>
    <tr>
      <td>Another data here</td>
      <td>
        <button class="btn btn-success btn-sm" data-id="2" data-toggle="modal" data-target="#exampleModal">Edit</button>
      </td>
    </tr>
    <tr>
      <td>More data here</td>
      <td>
        <button class="btn btn-success btn-sm" data-id="3" data-toggle="modal" data-target="#exampleModal">Edit</button>
      </td>
    </tr>
  </tbody>
</table>

<p class="recentNote"></p>

这篇关于Bootstrap:用于动态编辑数据的模式对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！