javascript - 数据表子行形式

Question

我正在使用 this示例，但在子行中，我有一个表单。问题是，如果子行关闭，它不会提交子行的输入。现在我看到数据表正在使用:show() 和 hide() 函数，如他们的示例代码所示:

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

现在这让我觉得它只是隐藏它并显示它，所以当它隐藏时，它应该仍然存在并提交，但这不是因为他们可能正在使用数据表生成的函数或其他东西。当子行“隐藏”时，我如何才能真正提交子行中的输入字段？当我打开该行时它工作正常。

Answer 1

不幸的是，JQuery DataTables 没有提供任何方法来获取您需要的信息，而且它会从 DOM 中删除隐藏的行。

因此，您唯一可以做的就是将修改后的值存储在某个变量的详细行中，并在提交时读取它们，请参见以下内容:

var dataSet = [
    {
    "id" : 1,
    "name" : "Tiger Nixon",
    "position" : "Edinburgh",
    "salary" : "5421"
    },
    {
    "id" : 2,
    "name" : "Ludovico Moro",
    "position" : "Milan",
    "salary" : "8670"
    },
    {
    "id" : 3,
    "name" : "Julio Iglesias",
    "position" : "Madrid",
    "salary" : "12500"
    }
];

var fullnames = [];

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "data": dataSet,
        "columns": [
            {
                "className": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "salary" }
        ],
        "order": [[1, 'asc']]
    } );
    
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
    
} );

function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td><input type="text" class="fullname" id="' + d.id + '" value="' + d.name + '" onchange="javascript:inputChange(this.id, this.value)"></td>'+
        '</tr>'+
    '</table>';
}

$("#form1").submit(function( event ) {
  $.each(fullnames, function(index, value){
    if(fullnames[index]){
      console.log("Modified record " + index + ", new value is: " + value);
    }
  });
  event.preventDefault();  
});

function inputChange(id, val){
  fullnames[id] = val;
}

td.details-control {
    background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css" rel="stylesheet"/>
<form id="form1">
  <table id="example" class="display" cellspacing="0" width="100%">
      <thead>
          <tr>
              <th></th>
              <th>Name</th>
              <th>Position</th>
              <th>Salary</th>
          </tr>
      </thead>
      <tfoot>
          <tr>
              <th></th>
              <th>Name</th>
              <th>Position</th>
              <th>Salary</th>
          </tr>
      </tfoot>
  </table>
  <input type="submit">
</form>

总结:

1) 声明一个全局变量来存储全名

var fullnames = [];

2)在format函数中，给输入框添加onchange监听

onchange="javascript:inputChange(this.id, this.value)"

3) 创建监听器

function inputChange(id, val){
  fullnames[id] = val;
}

4) 最后，在提交时读取它的值

$.each(fullnames, function(index, value){
        if(fullnames[index]){
          console.log("Modified record " + index + ", new value is: " + value);
        }
      });

显然，您可以保存一个包含所有所需字段的对象数组，而不是全名数组。

希望对你有帮助，再见。