如何在Django中更新表单和更新表格单元格

时间:2019-09-03 00:12:40

标签: html django django-forms

我是Django和python的新手,试图学习和构建Web应用。

我想以表格格式向用户显示一些数据。用户应该能够在表视图中添加,删除和更新记录。

我能够实现添加,删除部分,但无法动手更新现有记录。

理想情况下,当我单击特定行的“编辑”按钮时,我希望以django形式在模式视图中填充行数据。但是甚至无法从可编辑的表格行中获取基本更新。这是我的示例代码。

我在下面的链接上尝试了此方法,但没有帮助..或者可能是我听不懂。 Django: updating database row via table cell

models.py


# Create your models here.

class customerDataModel(models.Model):
    customerName = models.CharField(max_length=200)
    custormerLocation = models.CharField(max_length=200)
    custormerAge = models.CharField(max_length=200)
    custormerLanguage = models.CharField(max_length=200)

    def __str__(self):
        return self.customerName

forms.py

from django import forms
from . models import customerDataModel


class addCustomerForm(forms.ModelForm):

    class Meta:
        model = customerDataModel
        fields = ('customerName', 'custormerLocation', 'custormerAge', 'custormerLanguage')

        widgets = {
            'customerName': forms.TextInput(
                attrs={
                    'class': 'form-control'
                    }
                ),
            'custormerLocation': forms.TextInput(
                attrs={
                    'class': 'form-control'
                    }
                ),
            'custormerAge': forms.TextInput(
                attrs={
                    'class': 'form-control'
                    }
                ),

            'custormerLanguage': forms.TextInput(
                attrs={
                    'class': 'form-control'
                    }
                ),


            }

views.py

from django.shortcuts import render
from . forms import addCustomerForm
from . models import customerDataModel
from django.http import HttpResponseRedirect
from django.urls import reverse

# Create your views here.

#from django.http import HttpResponse


def index(request):
    if request.method == 'POST':
        form = addCustomerForm(request.POST)
        if form.is_valid():
            # print("VALID")
            form.save()

    customer_table_data = customerDataModel.objects.all()
    form = addCustomerForm
    return render(request, 'index.html', {'customer_table_data' : customer_table_data ,'form' : form})
    #return HttpResponse("Hello, world. You're at the polls index.")


def delete_customer_row(request, id):
    customerDataModel.objects.filter(id=id).delete()
    return HttpResponseRedirect(reverse('index'))


def edit_customer_row(request, id):

    print('The value in ID is ', id)

    instance = customerDataModel.objects.get(id=id)
    if request.method == "POST":
        form = addCustomerForm(request.POST, instance=instance)
        if form.is_valid():
             print("VALID")
             form.save()
    return HttpResponseRedirect(reverse('index'))

template.html

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {background-color: #f2f2f2;}
</style>
</head>
<body>

<h2>Customer Information</h2>

<form method="POST">

    {% csrf_token %}
     {{ form }}

     <br>
     <button type="submit">Submit</button>
</form>



<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>Customer Name</th>
      <th>Location</th>
      <th>Age</th>
      <th>Laungage</th>
      <th>Action</th>
    </tr>



    {% for rowitem in customer_table_data %}

    <tr>
        <form action="{% url 'edit_customer_row' rowitem.id %}" method="post">
                {% csrf_token %}
        <td>{{rowitem.customerName}}</td>
        <td><div contenteditable>{{rowitem.custormerLocation}}</div></td>
        <td>{{rowitem.custormerAge}}</td>
        <td>{{rowitem.custormerLanguage}}</td>
        <!-- <td><a href="{% url 'edit_customer_row' rowitem.id %}" <button>edit</button></a></td> -->
        <td><input type="submit" value="edit"/></td>
        <td><a href="{% url 'delete_customer_row' rowitem.id %}" <button>delete</button></a></td>
        </form>
    </tr>

    {% endfor %}


  </table>
</div>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

该方法的问题是,当用户输入的数据在服务器上验证失败时,您将如何处理?如果您重定向回表视图,它将如何告诉用户为什么忽略了他的要求?

在某种程度上类似的情况下,我的方法是在表的底部(或顶部,如果愿意的话)使用最初隐藏的Django Form。使用一些Javascript从模式弹出窗口中填充表单的字段,并将其发布。在服务器端,一切按常规方式进行。如果验证失败,则表视图会返回表单错误,并且Javascript(在Jquery onReady上下文中)可以立即取消隐藏表单,并确保将错误消息显示为附加到先前输入的数据中。用户可以在表单中编辑其响应,也可以再次单击表格行以从头开始(模式将覆盖表单中显示的旧数据)。

涉及的工作在客户端JQuery端。我认为在Django端没有任何异常之处。

更简单的方法是第二次往返服务器。在表格中,每行上都有一个可点击的“更新”图标,这是指向常规FormView的链接,例如“ / foo / 44 / update”(模板中为{{url "foo:foo_update" pk=object.pk}}或类似名称),其中44为{该行中表示的对象的{1}}。

相关问题