如何处理django表单中的复杂图形UI元素？

Question

我有一些复杂的GUI元素（比如可以突出显示多天的自定义日历），它与标准的django表单输入字段一起出现。我想处理这些复杂形式的数据I / O以及Django表单。

以前我会在保存或呈现Django表单后使用AJAX请求在我的HTML表单上处理这些自定义GUI元素，但这会导致一系列问题和自定义的AJAX编码。在Django表单中处理复杂交互小部件的好方法是什么？

Answer 1

不确定我是否完全理解，但您可以通过javascript将UI的值保存到表单上的隐藏元素中。这可以在UI中选择值或提交表单时完成。伪代码假设JQuery使用submit（）在发送提交数据之前保存：

$('#myForm').submit(function(){
  // get the value of your UI
  var calendarValue = calendarWidget.getValue()

  // #calendarData is the hidden field
  $('#calendarData').val(calendarValue)
})

这显然需要JS，但使用你的UI元素也是如此。

Answer 2

您的问题非常模糊，因此我建议您阅读writing a custom field上的Django文档，希望这有助于您入门。您可能还想研究编写自定义小部件。不幸的是，文档有点缺乏，但谷歌搜索带来了一些有用的博客文章，包括this one。

Answer 3

根据您将Django Form子类输出到HTML页面的方式，有三个选项。

第一个根本不涉及Form。任何html表单输入都将以request.POST结尾，因此您可以在那里访问它们。确实，它们不会绑定到您的Form子类，因此您必须使用自定义表单构造函数手动注入值，或者在使用request.POST实例化它之后在Form对象上设置一些属性。这可能是最不可取的选择，但我提到它以防你的用例真的不支持其他任何东西。

如果您手动输出HTML中的表单字段（例如：使用{{ myform.field }}而不仅仅是{{ myform }}，则第二个是一个选项。在这种情况下，请创建一个隐藏变量以包含您的值日历GUI工具（很可能，你的GUI工具已经提供/需要一个）。将这个隐藏的字段，正确的名称和ID添加到Form子类本身，确保它有一个隐藏的django表单小部件。如果有必要，使用javascript正如Rob建议填充隐藏字段。当表单发布时，它将正常绑定到您的表单子类，因为这次，您的Form子类上有一个具有该名称的字段。clean()的机制将正常工作。

第三个也是最好的选择是编写一个自定义的django字段;安德鲁的帖子有链接。 Django字段能够指定js和css要求，因此您可以自动为使用日历窗口小部件的任何页面封装这些依赖项。