javascript - Django 框架，网格行中的增删改查

Question

我一直在为我的妻子在 djanog 3.0 中开发一个应用程序。为网格建立并运行了一个很好的模态 ajax crud，但她不喜欢模态效果，她只想在行内进行编辑，并且总是在底部有一个空行用于新条目。

我看过 table2 和 jqgrid，但没能找到类似的东西。我现在一直在使用 editablegrid.net js 网格，我可以显示数据并进行编辑，但不能保存编辑后的数据。 Editablegrid 是我妻子想要做的一个很好的例子，没有空的新行，但应该能够破解它。

显然我无法从中创建一行，所以我需要弄清楚如何以 json 之类的方式使我的数据串行。然后我还需要 CSRF token 作为 json 的一部分，对吗？

当我以开发嵌入式 C 为生时，我已经超出了自己的能力范围，而这一切都是我们自学的。

问题是:对于这样的事情最好的网格是什么？有可能吗？django 适合这样的事情吗？我应该转向 REST API 并看看其他一些技术，比如 React 吗？

编辑1:我尝试了@Raiyan 的建议，如下所示:

{% for person in persons %}
<form id="F{{ person.pk}}" method="post" action="{% url 'person-update' person.pk %}" class="js-ajax-update-form" update-table-name="ajax-table">
  {% csrf_token %}
  <tr>
    <td>{{ person.title }}</td>
    <td>{{ person.first_name }}</td>
    <td>{{ person.last_name }}</td>
    <td>{{ person.id_number }}</td>
  </tr>
</form>
{% endfor %}

但是如果我打开页面并查看 html，它看起来像这样:

<form method="post"></form>
<input type="hidden" name="csrfmiddlewaretoken" value="IREdUDr8bplgvDrtmMSSjOua2NL98SXnoeIGdX1mN0nY2hpQTByW0FfJZxvO5kCw">
<tr id="R2">
    <td>Mr.</td>
    <td>John</td>
    <td>Doe</td>
        <td>123456789</td>
</tr>
</tbody>

由于某种原因，表单标记在表格行和输入之前关闭。我还改编了一个简单的 CRUD books app 来尝试获得所需的行为，但没有任何错误，但表单标签也会立即关闭。对于 CRUD 应用程序，我将 fbv View 更改为:

def book_list(request, template_name='books_fbv/book_list.html'):
    books = Book.objects.all()
    forms = []
    for index, book in enumerate(books):
        forms.append(BookForm(request.POST or None, instance=book, prefix="form_{}".format(index)))
    data = {}
    data['object_list'] = forms

    if request.method == 'POST':
        for form in forms:
            if form.is_valid():
                action = form.save(commit=False)
                action.save()
    return render(request, template_name, data)  

和 html 到:

<table>
    <thead>
        ...
    </thead>
    <tbody>
        {% for book in object_list %}
        <form method="POST">
            {% csrf_token %}
        <tr>
            <td>{{ book.name }}</td>  
            <td>{{ book.pages }}</td>
        </tr>
        </form>
        {% endfor %}
    </tbody>
</table>

知道为什么表单标签会这样关闭吗？

Answer 1

Django 非常适合这样的项目。

Obviously I’ll not be able to make a row a from

我想你可以，除非我误解了什么。您可以使用 Django 模板将每一行呈现为单独的表单。实现可能如下所示:

{% for row in rows %}
<form method="post">
<tr>
  <td>...</td>
  ...
</tr>
</form>
{% endfor %}

您是对的，您需要处理 CSRF token 。 Django 允许您使用模板中的 {% csrf_token %} 在渲染的 HTML 中的任何位置插入 CSRF token 。一个非常简单的表单如下所示:

<form method="post">{% csrf_token %}... </form>

在您的情况下，每个行形式将如下所示:

{% for row in rows %}
<form method="post">
{% csrf_token %}
<tr>
  <td>...</td>
  ...
</tr>
</form>
{% endfor %}

在这里阅读更多相关信息: https://docs.djangoproject.com/en/3.0/ref/csrf/#how-to-use-it

希望这有帮助。