DataTables Export für komplexe HTML (Python Deform)

Question

Ich benutze DataTables jquery für schön aussehende Tabellen und Python deform zum einfachen Generieren meiner Formularelemente aus dem Schema. Die Exportfunktionalität von DataTables spielt nicht gut mit den generierten Formularelementen.

Aus diesem Grund muss ich DataTables' export function verwenden, um meine Exporte ordnungsgemäß zu generieren. Es gibt tatsächlich vier Arten von Zellen, die ich mir in meiner Anwendung vorstellen kann (in der Reihenfolge zunehmender Komplexität angeordnet), und die Funktion müsste mit allen von ihnen umgehen.

Erstens, ein Standard <input>. Erwartete Ausgabe hier wäre nur with some brand

<input name="brand" value="with some brand" id="deformField1168" class=" form-control " type="text"> 

Zweitens wird ein Textfeld (das ist eigentlich der einzige Tables behandelt standardmäßig korrekt, wie es strips away HTML to get 'only text contents'). Erwartete Ausgabe hier wäre a short description

<textarea id="deformField1169" name="description" rows="2" class=" form-control ">a short description</textarea> 

Drittens ein Stapel von divs, die ich verwende, um einen Papierkorb legen/Löschen-Symbol auf einer Seite einer Zelle, andernfalls ist die gleiche wie der erste Fall ist. Wenn dies der einzige Fall ist, der nicht gelöst werden kann, macht es mir nichts aus, das Symbol in seine eigene Zelle zu verschieben, es ist nur hässlicher. Erwartete Ausgabe hier würde a_test_item

<div style="float: left; width: 85%; text-align: left"> 
    <input name="item_number" value="a_test_item" id="deformField1167" class=" form-control " type="text"> 
</div> 
<div style="float: right; width: 15%; text-align: right"> 
    <form class="form" action="" method="post" accept-charset="utf-8" enctype="multipart/form-data"> 
     <input name="id" value="1" type="hidden"> 
     <button type="submit" class="btn btn-default" name="delete"> 
      <span class="glyphicon glyphicon-trash"> 
     </span></button> 
    </form> 
</div> 

Vierte und letzte Mal gewesen sein, diesen Satz von versteckten Eingängen + Javascript, die eine Datepicker bringt. Erwartete Ausgabe hier wäre 2017-03-07

<input name="__start__" value="delivery_date:mapping" type="hidden"> 
<input name="date" value="2017-03-07" id="deformField1171" class=" form-control hasDatepicker" type="date"> 
<input name="__end__" value="delivery_date:mapping" type="hidden"> 
<script type="text/javascript"> 
    deform.addCallback(
    'deformField1171', 
    function deform_cb(oid) { 
     if (!Modernizr.inputtypes['date'] ||"date" != "date" || window.forceDateTimePolyfill){ 
     $('#' + oid).pickadate({"format": "yyyy-mm-dd", "selectMonths": true, "selectYears": true, "formatSubmit": "yyyy-mm-dd"}); 
     } 
    } 
    ); 
</script> 

Meine aktuelle exportOption Funktion sieht wie folgt aus: -

exportOptions: { 
    format: { 
     body: function (data, row, column, node) { 
      console.log(data) 
      return data 
     } 
    } 
} 

ich nie Javascript verwendet habe Strings vor (nur getElementByID etc.) zu verarbeiten, und es doesn Es scheint nicht so zu sein, dass die Verarbeitung von Streichern sowieso der richtige Weg ist. Kann ich mit diesen Zellen eine JS-Seite erstellen und den Standard-HTML-Zugriff verwenden (alle getElement * -Funktionen)?

Answer 1

Und wie üblich gibt mir gerade die Tatsache, die Frage zu tippen, einen Einblick, der hilft. Basierend auf the accepted answer here about creating a DOM from a HTML string, sowie der Beobachtung, dass alle sichtbaren Eingänge die Klasse form-control haben, hier ist die (peinlich einfache) Funktion, die ich geschrieben habe.

exportOptions: { 
    format: { 
     body: function (data, row, column, node) { 
      var div = document.createElement('div') 
      div.innerHTML = data 
      var value = div.getElementsByClassName('form-control')[0].value 
      return value 
     } 
    } 
}