Question

我正在尝试使用类似于此处代码的可扩展和可折叠行来实现数据表：

https://datatables.net/examples/api/row_details.html

我已经获得了扩展和折叠行的代码，但是当点击details.control图标时，我在将扩展行的值传递给我的函数时遇到了困难。例如。单击展开图标（详细信息控制）后，我尝试展开行并使用依赖于某些父行数据的ajax请求获取的数据填充该行。因此，需要将一些父行数据传递给我的ajax调用。如何获取所述行数据。我的代码如下：

$('#myTable').on('click', 'td.details-control', function () {
   var tr = $(this).closest('tr');
   var row = oTable.row(tr);
// need to get row data here somehow
   var rowId = ?????

   if (row.child.isShown()) {
       // This row is already open - close it
       row.child.hide();
       tr.removeClass('shown');
   } else {
       // Open this row
       format(row.child,rowid);
       tr.addClass('shown');
   }
 });


  function format(callback, id) {
   $.ajax({
       url: "@Url.Action("foo", "bar")/"+ id,
       dataType: "json",
       complete: function (response) {
           var data = JSON.parse(response.responseText);
           var thead = '', tbody = '';
           for (var key in data[0]) {
               //thead += '<th>' + key + '</th>';
           }

           $.each(data, function (i, d) {
               for (var x = 0; x < d.length ; x++)
               {
                   tbody += '<tr><td style="width:290px">' + d[x].Description + '</td><td style="width:210px">' + d[x].BalanceBroughtForward + '</td><td style="width:100px">' + d[x].Payments + '</td><td style="width:100px">' +
                 '</td></tr>';

               }
           });
           callback($('<table>' + thead + tbody + '</table>')).show();
       },
       error: function () {
           $('#output').html('Bummer: there was an error!');
       }
   });

Answer 1

在阅读了datatables api文档并通过反复试验后，我设法通过以下方式使其工作：

  $('#myTable').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = oTable.row(tr);
        var rowdata = (oTable.row(tr).data());
        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            console.log( oTable.row(tr).data());
            // Open this row
            format(row.child, oTable.row(tr).data());
            tr.addClass('shown');
        }
    });

欢迎任何更好，更优雅的解决方案。欢呼声。

jQuery Datatables.net可折叠的可扩展行 - 传递参数

1 个答案: