Datatables untergeordnete Zeilen bilden

Question

Ich verwende this Beispiel, aber innerhalb der untergeordneten Zeilen, habe ich ein Formular. Das Problem besteht darin, dass die Eingabe der untergeordneten Zeilen nicht gesendet wird, wenn die untergeordneten Zeilen geschlossen sind. Jetzt sehe ich, Datentabellen verwendet: show() und hide() Funktionen wie in diesem Code ihres Beispiel:

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

Nun, da macht ich denke, es ist nur um es zu verstecken und es zeigt so, wenn sein versteckt, es ist immer noch da sein sollte und eingereicht , aber es ist nicht, da sie wahrscheinlich eine Funktion für Databases made oder etwas verwenden. Wie würde ich es schaffen, dass ich tatsächlich die Eingabefelder in den untergeordneten Zeilen übermitteln kann, wenn die untergeordneten Zeilen "versteckt" sind? Es funktioniert gut, wenn ich die Reihe geöffnet habe.

Answer 1

Leider bietet JQuery DataTables keine Methode an, um die Informationen zu erhalten, die Sie benötigen, außerdem entfernt es die verdeckten Zeilen aus dem DOM.

Also, das einzige, was Sie tun können, ist die geänderten Werte im einzelnen Reihen in irgendeiner Variablen zu speichern und sie anschließend auf finden Sie lesen folgende bitte:

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>

Zusammengefasst Deklarieren

1) eine globale var die vollen Namen speichern

var fullnames = []; 

:

2) In der Funktion format,

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

3) Erstellen Sie den Hörer

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

4) lesen ihre Werte Schließlich onChange Zuhörer dem Eingabefeld hinzufügen, anschließend auf

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

Offensichtlich können Sie anstelle eines FullNames-Arrays ein Array von Objekten speichern, die alle benötigten Felder enthalten.

Ich hoffe, es hilft Ihnen, tschüss.