在 HTML 页面中设置 JSONField答案

【问题标题】：Set up JSONField in HTML page在 HTML 页面中设置 JSONField
【发布时间】：2021-10-26 14:11:36
【问题描述】：

我已经创建了这个模型

class RoadConstruction(models.Model):
    fromCity = models.CharField(max_length=200, null=True)
    toCity = models.CharField(max_length=200, null=True)
    status = models.CharField(max_length=200, null=True)
    date_updated = models.DateTimeField(auto_now_add=True, null=True)
    jsonData = models.JSONField(null=True) 
    profile = models.ForeignKey(Profile, null=True, on_delete=models.SET_NULL)

所以当我使用表单并将表单添加到我的 html 页面时，它会为 jsonData 生成一个文本区域。但这里有一个问题，我知道如何正确定义 JSONField 的内容，但问题是 JSON 将是动态的，这完全取决于提交表单的用户。所以，我无法修复 JSONField。

我将举例说明我对 JSONField 的期望。

fromCity、toCity、status 是不言自明的，因为它可以很容易地用 Forms 实现。

在xyz.html页面中最初会有一行空表单。

colA	colB	colC
valueA	valueB	valueC

这里假设用户给出了上述输入，即valueA、valueB、valueC。所以我希望将数据存储在 JSONField 中

[
    {
        'colA': valueA,
        'colB': valueB,
        'colC': valueC,
    }
]

还有一个添加按钮，可以像这样添加一个新行，然后用户可以填写它。 |科尔A |科尔B |科尔C | |-----|------|------| |值A1 |值B1 |值C1 | |值A2 |值B2 |值C2 |

那么 JSONField 应该是这样的：

[
    {
        'colA': valueA1,
        'colB': valueB1,
        'colC': valueC1,
    },
    {
        'colA': valueA2,
        'colB': valueB2,
        'colC': valueC2,
    }
]

因此用户可以根据需要添加行。

那么，我应该如何实现这种类型的东西呢？如果直接使用 ModelForms，那么它会显示 textarea，我不能指望我的网站用户知道 JSON。我应该如何让它动态地获取尽可能多的值并将其存储到 jsondata 中，然后我可以轻松地将其保存在数据库中？

XYZ.HTML

<form action="" method="POST">
    {% csrf_token %}
    {{form}}
    <input type="submit" value="Submit">
</form>

显示jsonData对应的textarea。

【问题讨论】：

您可以在后端进行 - Django 在用户的视线之外。
@bichanna 是的！但是怎么做呢？如何将xyz.html页面中存在的表单中的所有数据编译成JSON，然后赋值给JSONField？
你能给我们看看你的xyz.html的例子吗
@bichanna 我添加了 xyz.html
您希望您的用户如何输入类似文本字段的字段（jsonfield）？

标签： python django django-forms

【解决方案1】：

总是搜索django packages，更一般地说，谷歌“Django + 与手头任务相关的关键字”

Django-JSON-widget 看起来很相关，但我刚刚找到它，无法提供任何进一步的评论。

我还想到，您描述的 JSON 的受限形式直接映射到 Django Formset，模板化为三列。一旦formset.is_valid()，您只需从集合中的每个表单中挑选出已清理的数据并将其组装成一个字典列表，然后您可以将其存储在 JSONField 中。

【讨论】：