javascript - 数据表子行形式

我正在使用this示例，但在子行中，我有一个表单。问题是，如果子行已关闭，则它不会提交来自子行的输入。现在我看到datatables正在使用：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');
    }

现在这让我觉得它只是在隐藏它并在隐藏时显示它，它应该仍然存在并提交，但这并不是因为它们可能使用的是由datatables made函数或其他东西。当子行被“隐藏”时，我如何才能真正提交子行中的输入字段？当我打开那排的时候，它工作得很好。

最佳答案

不幸的是，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 listener添加到输入框中

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

显然，您可以保存包含所需字段的对象数组，而不是全名数组。
希望对你有帮助，再见。

关于javascript - 数据表子行形式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43776649/