时间戳

首页 > 解决方案 > 模式关闭后在 Datatables.net 网格中单击行

jquery - 模式关闭后在 Datatables.net 网格中单击行

问题描述

我正在使用 Datatables.net 来显示付款表。

在每一行中，最后一列包含一个编辑按钮。

<button type="button" class="btn btn-link" data-toggle="modal" data-target="#modalCategoryTypeEditor" data-action="@Url.Action("EditCategory", new { @item.PaymentId })">Edit</button>

该按钮包含一个 data-action 属性和一个指向 Action 的链接。

Edit 按钮启动一个模态窗口，它使用 jQuery Load 函数调用按钮的 Action 来检索模态体的内容。

$('#modalCategoryTypeEditor').on('show.bs.modal', function (event) {
    var toggleModal = $(event.relatedTarget) // Button that triggered the modal
    var actionUrl = toggleModal.data('action') // Extract info from data-* attributes

    $(this).find('.modal-body').load(actionUrl);
});

一旦用户单击模态窗口的保存按钮，就会在服务器上调用一个操作，该操作返回一个字符串结果。

问题：如何将此字符串结果设置为单击的行的列之一？也就是说，此时modal关闭后，此时我如何找出点击了哪一行？

我知道如何检测被点击的行——我正在使用下面的。但是在模态窗口关闭后它不起作用。即使我将它封装在 'hide.bs.modal' 事件中。

$('#payments_list tbody').on('click', 'tr', function () {
     console.log(table.cell(table.row(this).data()));
});

编辑：

为了澄清，我知道如何获取属于被点击行的记录的 ID。然后我启动我的模态窗口，在其中进行更改，并将更改发送到服务器以进行保存。服务器返回一个字符串响应，我需要使用这个字符串来填充被点击的行中的一个单元格。问题是服务器响应发生在行点击事件之后很久。换句话说，处理行点击事件的函数启动了模态框，就这样，函数结束了。

$('#exampleTable tbody').on( 'click', 'a', function () {
    var data = '';
    data = exampleTable.row( $(this).parents('tr') ).data();
    console.log(data);
    var carId= data['id'];

    $('#exampleModal').modal();
})

// function that gets called after ajax form post completes
var onCompleted = function() {
    // How do I find out which row was clicked at this point
}

// form inside modal
<form id="formInsideModal" method="post" data-ajax-complete="onCompleted" data-ajax="true" data-ajax-method="post" >
    // some input fields to be saved
    <button type="submit" id="saveBtnInsideModal">Submit</button>
</form>

标签： jquerydatatablesbootstrap-modal

解决方案

我解释您的请求的方式是您启动模态，进行更改，然后通过$.ajax调用将值提交给服务器，随后服务器返回一个字符串值，该值需要在datatable.

首先，我将在 Modal 中设置一个属性为data-rowindexas（这是我创建的示例模态；您可以自己更改它）：

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="YourModal" data-rowindex="-1">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Amend</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="recipient-position" class="control-label">Position:</label>
            <input type="text" class="form-control" id="recipient-position">
          </div>
        </form>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" id="YourModalSubmitButton" data-rowindex="-1" data-comment="" data-context="" data-tag="">Submit</button>
        </div>
      </div>
    </div>
  </div>

单击编辑按钮后，您需要识别行的索引。

table.on("click", "tr", function() {
    var tr = $(this).closest('tr');
    var row = table.row(tr);
    var idx = row.index();

    //Set the row index to the Modal's data attribute
    $('#YourModal').data('rowindex', idx);

  });

您可以在此处检查是否已应用索引值：

$('#YourModal').on('show.bs.modal', function(event) {
    var rIdx = $(this).data('rowindex');

    var modal = $(this);
//I set the rowindex value back to a data attribute in the submit button of the modal
    modal.find('#YourModalSubmitButton').data('request', rIdx);
    modal.find('.modal-title').html('The Row You Selected is ' + rIdx);
  });

然后在您的模态的提交按钮上单击执行此操作：

$('#YourModal').find('#YourModalSubmitButton').click(function(event) {
    event.preventDefault();
    var target = $(event.target); // Button that triggered the modal
    var idx= target.data('rowindex');
    //To get value from Form elements
    var formElementVal = $('#YourModal').find('#Form-element-value').val();


//do your ajax call here get the result
    table.cell({
      row: idx,
      column: 1
    }).data(formElementVal).draw();
  });

希望这可以帮助。

您还可以检查我为更类似的要求所做的 JsFiddle。

推荐阅读