【发布时间】：2018-02-28 21:43:46
【问题描述】：
在我的应用中，我有一个名为 products 的页面。在此页面中，我将数据库中的记录显示在表格中。
表格的每一行都有两个按钮，用于添加和编辑特定行中的记录。
添加和编辑将通过我的模型创建的名为 Product 的表单来实现。 此表单将以模式显示，当单击添加或编辑按钮时显示。
我已经实现了添加和编辑功能，在单独的页面上显示表单，而不是在模式中。
下面是我的模型：
# models.py
from django.db import models
class Manufacturer(models.Model):
name = models.CharField(max_length=264)
def __str__(self):
return self.name
class Meta:
ordering = ["name"]
class Product(models.Model):
title = models.CharField(max_length=264)
description = models.CharField(max_length=1000, blank=True, null=True)
year_manufactured = models.PositiveIntegerField(blank=True, null=True)
manufacturer = models.ForeignKey(Manufacturer, on_delete=models.CASCADE)
def __str__(self):
return self.title
class Meta:
ordering = ["title"]
这是我的 urls.py：
from django.conf.urls import url
from . import views
app_name = "products"
urlpatterns = [url(r'^products', views.ProductsView.as_view(), name="products"),
url(r"^product/new", views.add_new_product_view, name="add_new_product"),
url(r"^product/(?P<id>[0-9]+)/edit/", views.edit_product_view, name="edit_product")]
以下是我的看法：
from django.views.generic import DetailView, ListView, TemplateView
from django.http import JsonResponse
from django.shortcuts import render, get_object_or_404
from . import models
from products.forms import AddNewProductForm, EditProductForm
def index(request):
return render(request, 'products/products.html')
class ProductsView(ListView):
context_object_name = "products"
model = models.Product
template_name = "products/products.html"
form = AddNewProductForm()
def get_context_data(self, **kwargs):
context = super(ProductsView, self).get_context_data(**kwargs)
context["products"] = models.Product.objects.all().order_by("title")
context["form"] = self.form
return context
def add_new_product_view(request):
if request.method == "POST":
form = AddNewProductForm(request.POST)
if form.is_valid():
form.save(commit=True)
return JsonResponse({'msg': 'Data saved'})
else:
print("ERROR FORM INVALID")
return JsonResponse({'msg': 'ERROR FORM INVALID'})
else:
form = AddNewProductForm()
return JsonResponse({'form': form})
def edit_product_view(request, id):
instance = get_object_or_404(models.Product, id=id)
form = EditProductForm(instance=instance)
if request.method == "POST":
form = EditProductForm(request.POST, instance=instance)
if form.is_valid():
form.save(commit=True)
return JsonResponse({'form': form})
else:
print("ERROR FORM INVALID")
return JsonResponse({'form': form})
我在 products.html 上有这个：
{% extends "products/base.html" %}
{% load static %}
{% block title %}My Products{% endblock %}
{% block content %}
<div class="container" id="my-products-table-container">
<h2 class="text-left caption">Add, view and edit products</h2>
<hr>
<table class="table table-striped table-sm table-bordered" id="my-products-table">
<thead class="thead-inverse">
<tr class="head-row">
<th>Title</th>
<th>Description</th>
<th>Year</th>
<th>Manufacturer</th>
</thead>
<tbody>
{% for product in products %}
<tr class="table-row">
<td>{{ product.title }}</td>
<td>{{ product.description }}</td>
<td>{{ product.year_manufactured }}</td>
<td>{{ product.manufacturer }}</td>
<td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addNewProductModalForm">Add New product</button></td>
<td><button onclick="findMyForm({{ product.pk }})">Update product</button></td>
{% endfor %}
</tbody>
</table>
</div>
<!-- Modal Add New Product-->
<div class="modal fade" id="addNewProductModalForm" tabindex="-1" role="dialog" aria-labelledby="addNewProductModalFormLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<form class="form" id="add_new_product_form">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addNewProductModalFormLabel">Add New Product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{% csrf_token %}
{{ form.as_p }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="addNewProduct()">Submit</button>
</div>
</div>
</form>
</div>
</div>
<!-- Modal Edit-->
<div class="modal fade" id="editProductModalForm" tabindex="-1" role="dialog" aria-labelledby="editProductModalFormLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<form class="form" id="edit_product_form" >
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editProductModalFormLabel">Edit Product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{% csrf_token %}
<div id='showForm'></div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Submit!">
</div>
</div>
</form>
</div>
</div>
<!-- JS Scripts -->
<script src="{% static "products/js/addProduct.js" %}"></script>
<script>
function findMyForm(productKey) {
$('#editProductModalForm').modal('show');
$.ajax({
type: 'GET',
url: '/product/' + productKey + '/edit/',
success: function(res) {
$("#showForm").html(res);
}
})}
</script>
{% endblock %}
我的 JS 脚本：
#addProduct.js
function addNewProduct(e) {
var addNewProductForm = $("#add_new_product_form");
$.ajax({
type: 'POST',
url: '/product/new/',
data: addNewProductForm.serialize(),
success: function(res){
alert(res['msg'])
}
})
}
我更新了我的代码以说明我可以成功地在我的数据库中添加一个新产品。另外，我一直在编辑我的数据库中的产品。
按下此按钮时：
<button onclick="findMyForm({{ product.pk }})">Update product</button>
应该包含编辑表单的模态出现，然后调用带有 products.pk 参数的函数 findMyForm。之后，对产品编辑 url 执行 ajax get 请求。
根据我的 urls.py，edit_product_view 被调用。
这就是我遇到 EditProductForm 不可序列化的错误。
另外，非常感谢 Tico，感谢他一直以来的帮助。
【问题讨论】：
-
我知道一个解决方案，但与modelform和instance不同，你可以使用ajax
-
当然，无论如何我都计划阅读 AJAX。需要详细说明吗？
-
我没有使用 AJAX 的经验，所以我不确定，但您可以发送 id 并返回实例
-
Invalid left-hand side expression in postfix operation: '字符串'+ + '字符串'。连接是用一个加号完成的。那是因为你引用了一个模板变量“product”，它是上面 for 循环的本地变量。 -
两个字符串之间有product.pk，但我猜它并没有传入字符串连接。
标签： django bootstrap-4