Экспорт DataTables для сложного HTML (деформирование python)

Question

Я использую jQuery DataTables для красиво выглядящих таблиц и деформирования python для простого создания элементов формы из схемы. Функциональность экспорта данных DataTables не очень хороша с генерируемыми элементами формы.

Из-за этого мне нужно использовать DataTables' export function для правильного создания моего экспорта. На самом деле есть четыре типа ячеек, которые я могу придумать в своем приложении (упорядоченные в порядке возрастания сложности), и функция должна будет обрабатывать все из них.

Во-первых, стандарт <input>. Ожидаемый результат здесь будет просто with some brand

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

Во-вторых, текстовое поле (это на самом деле только один DataTables обрабатывает правильно по умолчанию, как это strips away HTML to get 'only text contents'). Ожидаемый результат здесь будет a short description

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

В-третьих, стопка дивы, который я использую, чтобы разместить мусор/удалить значок с одной стороны ячейки, в противном случае это так же, как в первом случае. Если это единственный случай, который не может быть разрешен, я не против переместить значок в свою собственную ячейку, это просто уродливо. Ожидаемый результат здесь будет 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> 

Четвертый и последний, этот набор скрытых входов + JavaScript, который приносит вверх DatePicker. Ожидаемый результат здесь будет 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> 

Моя текущая функция exportOption выглядит следующим образом: -

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

Я никогда не использовал JavaScript для обработки строк до (только в getElementByID и т.д.), и это Безразлично Похоже, что обработка строк - это способ пойти в любом случае. Могу ли я создать JS-страницу с использованием этих ячеек и использовать стандартный доступ к HTML (все функции getElement *)?

Answer 1

И как обычно сам факт ввода вопроса дает мне понимание, которое помогает. Основываясь на the accepted answer here about creating a DOM from a HTML string, а также наблюдение, что все видимые входные данные имеют класс form-control, вот что (смущающе простая) функция, которую я написал.

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