时间戳

首页 > 解决方案 > 将数据从动态生成的 HTML 表/网格保存到数据库

javascript - 将数据从动态生成的 HTML 表/网格保存到数据库

问题描述

我正在开发一个 Web 应用程序，其中一个要求是用户将数据输入到动态生成的 HTML 网格/表格中。管理员用户可以登录 Django Admin 界面并创建一些条目，这些条目将代表网格的列和行，然后根据这些值生成动态网格。在此示例中，管理员用户输入“Store #1”、Store #2”等作为行，并输入“Chips”、“Chocolates”和“Soda”作为列。然后使用这些行和列通过以下代码生成在 Django 模板中呈现的网格：

<table class="tg">
<thead>
    <th rowspan="3"></th>
  <tr>
    <td class="tg-title" colspan="4">Inventory</td>
  </tr>
  <tr>
    {% for i in items %}
      <td class="tg-column">{{ i }}</td>
    {% endfor %}
  </tr>
</thead>

<tbody>
{% for i in stores %}
  <tr>
      <td class="tg-column">{{ i }}</td>
    {% for i in items %}
      <td class="tg-cell"><input type="number" min="0" max="255" value="0"></td>
    {% endfor %}
  </tr>
 {% endfor %}

  <tr>
    <td class="tg-totals">Totals</td>
    {% for i in items %}
      <td class="tg-totals-values">0</td>
    {% endfor %}
  </tr>
</tbody>
</table>

上面的代码呈现如下：

在此处输入图像描述

从视觉上看，这很好，但我一生都无法弄清楚我应该如何将此表单保存到数据库表中。这里的问题是用户将来可能会查看此条目，因此如果将来加载，则需要将其“放回”到与此处看到的相同的网格中。我不知道该怎么做——每个输入字段都需要有自己的“id=”字段吗？甚至可以使用真正动态的网格来做到这一点吗？如果有 100 家商店，每家商店有 10 件商品怎么办？

标签： javascripthtmldjango

解决方案

这取决于您的数据库技术是什么，如果有 JSON 字段（MySQL 5.7+ 或 Postgres 的新版本），那么它会很有帮助，因为您的模型看起来像这样

     class Data(models.Model):
           name = models.CharField(max_length=255)
           values = jsonfield()

然后，您可以将每列的名称作为键存储在 JSON 字段中，这将使您能够在使用该get函数时动态添加新列。

为了保存数据，您需要编写一个 JS 代码将网格转换为适当的 JSON 对象并通过请求发送它，在后端，视图可以加载 JSON 并将其保存到数据库中。

此外，JS 函数可以智能地仅发送更新的行以减少所需的数据大小和请求处理时间。

推荐阅读