复杂超文本标记语言的DataTables导出(python deform)

Question

我使用python处理漂亮的表，使用DataTables的deform从模式轻松地生成表单元素。DataTables导出功能无法很好地处理生成的表单元素。

因此，我需要使用DataTables' export function来正确地生成我的导出。实际上，我可以在我的应用程序中想到四种类型的单元格(按复杂度递增的顺序排列)，该函数需要处理所有这些单元格。

首先，一个标准的<input>。此处的预期输出将仅为with some brand

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

其次，文本区域(因为它是strips away HTML to get 'only text contents'，这实际上是DataTables在默认情况下唯一正确处理的区域)。此处的预期输出为a short description

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

第三，一堆div，我用它在单元格的一侧放置一个垃圾桶/删除图标，否则这与第一种情况相同。如果这是唯一不能解决的情况，我不介意将图标移到它自己的单元格中，那样只会更丑陋。此处的预期输出为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等)，而且看起来字符串处理也不是合适的方法。我可以使用这些单元格和标准的HTML访问(所有的getElement*函数)来创建一个JS 'page‘吗？

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