1

我正在使用 DataTables jquery 来制作漂亮的表格，并使用 python 的变形来轻松地从模式中生成我的表单元素。DataTables 导出功能不能很好地处理生成的表单元素。

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

首先，一个标准<input>。这里的预期输出只是with some brand

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

其次，一个文本区域（这实际上是 DataTables 默认情况下唯一正确处理的，因为它剥离了 HTML 以获取“仅文本内容”）。这里的预期输出是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，它带来了一个日期选择器。这里的预期输出是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* 函数）吗？

4

1 回答 1

0

像往常一样，输入问题的行为为我提供了有帮助的洞察力。根据此处接受的关于从 HTML 字符串创建 DOM 的答案，以及观察到所有可见输入都具有 class 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
        }
    }
}
于 2017-02-22T18:33:28.363 回答