javascript - Bootstrap模型ajax

Question

我有一个包含数据的 Bootstrap 表。需要编辑该数据并设置一些未随表格显示的字段的值。

我向每一行添加了一个编辑按钮和一个模式表单。该按钮正在加载模态表单，没有任何问题。

我有 3 个问题。

1. 如何使用与关联的行的数据加载模态按钮。
2. 保存时如何将模态中编辑的数据保存起来 单击按钮。
3. 如何在模式关闭后刷新表格 单击“保存”按钮时。

我假设我最好有一个教程，但如果我能找到一个教程，我就会很危险。

表代码只是基本的 Bootstrap 表。

按钮的当前代码。

<button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#checkInModal">Check In</button>

模式的当前代码。 (为了简洁起见，我删除了代码片段中的所有字段。)

  <!-- Modal -->
    <div class="modal fade" id="checkInModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <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">Check In</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

查看this jsfiddle

问题 1:您需要识别父行并获取所需的数据并设置输入的值。像handlebars甚至underscore.js这样的框架提供了模板的使用，这使得填充DOM的过程变得更简单。

var elButton = $(this);
var id = elButton.data('id');
var row = elButton.closest('tr');        
var data = {
    firstName: row.find('.firstName').text(),
    lastName: row.find('.lastName').text(),
    handle: row.find('.handle').text(),
    id: id        
}

问题 2:(注意:我假设您指的是数据库)。您需要以与我们对行所做的方式大致相同的方式从模式中收集数据。从模态中选择您想要保存的值，然后通过 HTTP 请求将它们发送到您的服务器。

var data = {
    firstName: $('#firstName').val(),
    lastName: $('#lastName').val(),
    handle: $('#handle').val(),
    checkinId: $('#checkinId').val()
};

$.ajax({
    type: "POST",
    url: "http://yoururl.io/api/location",
    data: data
});

问题 3:(注意:我假设您的数据来自数据源)。您可以拥有一个使用 HTTP 请求加载数据的函数。只需再次调用此函数即可从数据源中提取最新数据。

// Populate the table
$.ajax({
    type: "GET",
    url: "http://yoururl.io/api/location",
    success: function(data) {
        // Populate the table. e.g. loop over all data items in request response
        // and create a td for each item
    }

});