在模态关闭后，在Datatables.net网格中单击行

Question

我正在使用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。

“编辑”按钮启动一个模态窗口，该窗口使用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);
});

一旦用户单击模态窗口的Save按钮，就会在服务器上调用一个Action，它返回一个字符串结果。

问题：如何将此字符串结果设置为单击的行的其中一列？换句话说，在模态关闭后的这一点上，我如何找出点击了哪一行？

我知道如何检测被点击的行 - 我正在使用下面的内容。但是在模态窗口关闭后它无法正常工作。即使我将其封装在'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>

Answer 1

您好，在您的dataTable声明中放置了一个默认内容列，如下所示：

 "columns": [
                   {"data": "id"},
                   {"data": "fullname"},
                   {"data": "address"},
                   {"data": "company"},
                   {"data": "Cars"},
                   {
                className: "center",
                defaultContent:"<a name='idClient' class='btn btn-info' ><span class='glyphicon glyphicon-list-alt'></span> Show Cars Info</a>"
              }
               ]

以及你应该这样做的事件：

    // The click event to get the data into a new DataTable inside the modal
             //note: you have to declare the dataTable like this
             //exampleTable = $('#exampleTable').DataTable({ your stuff });
               $('#exampleTable tbody').on( 'click', 'a', function () {
                  var data = '';
                  data = exampleTable.row( $(this).parents('tr') ).data();
                  console.log(data);
                  var carId= data['id'];
                  console.log(carId);
})

希望能帮助到你

Answer 2

我解释您的请求的方式是您启动Modal，进行更改，并通过$.ajax调用将值提交给服务器，随后服务器返回一个字符串值，该值需要在datatable的特定列中设置。

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

<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();
  });

希望这可以帮助。

You can also check a JsFiddle I did for a more similar requirement.