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函数调用按钮的“动作”以检索模式主体的内容。

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

一旦用户单击模式窗口的“保存”按钮，服务器上的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

我解释您的请求的方式是您启动模态，进行更改并通过$.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.

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

2 个答案: