我使用Django和HTMX来管理CRUD表,我想在其中列出和删除对象。
为此,我有一个ListView,它显示一个具有分页、排序和文本搜索功能的表(使用django-表)。它与HTMX一样工作:例如,如果您转到下一页,整个页面不会重新加载:HTMX获取表并上载DOM的特定部分。
看起来是这样的:
ListView的代码如下所示:
class Proposals(SingleTableMixin, SearchableMixin, ListView):
table_class = ProposalTable # for django-tables2
ordering = "id"
model = Proposal
paginate_by = 5
search_filters = ["title__icontains"] # custom text search
def get_template_names(self):
# Trick to chose between loading the whole page (first time user goes to the page) or just the table via HTMX (when user uses pagination or sorting, it reloads the table only in the DOM)
if self.request.htmx:
return "fragments/proposals_fragment.html"
return "proposals.html"
现在,我试图添加一个删除功能,最好的UX。到目前为止,我已经探索了多种方法:
response["HX-Redirect"] = request.htmx.current_url
)→坏:虽然最终结果正常,但速度很慢,用户可以使用UI并执行不必要的操作,直到重定向实际发生为止。当然,这里我没有从HTMX部分DOM更新特性中获益。所以,我想到了第三种听起来更好的方法:
问题是,我不知道如何在Django这样做。我很确定我不想搞FBVs,但我需要一些指导。下面是我在想的事情:
MultipleObjectTemplateResponseMixin
+ BaseListView
+ DeletionMixin
。或者其他人?我在正确的道路上吗?如果这对你来说是个好主意的话,你能提供一些指导,特别是关于如何制作组合的泛型视图吗?
非常感谢。
发布于 2022-08-22 12:45:37
您想要做的是在delete
列表视图上实现Proposals
方法,DeleteMixin
实现非常简单,因此您可以使用它并拥有如下内容:
class Proposals(SingleTableMixin, SearchableMixin, DeletionMixin, ListView):
table_class = ProposalTable # for django-tables2
ordering = "id"
model = Proposal
paginate_by = 5
search_filters = ["title__icontains"] # custom text search
def get_template_names(self):
if self.request.htmx and not self.request.htmx.history_restore_request:
return "fragments/proposals_fragment.html"
return "proposals.html"
def delete(self, request, *args, **kwargs):
super().delete(request, *args, **kwargs)
return super().get(request, *args, **kwargs)
在这里,您重写删除,让它播放,然后返回结果,因为它是正常的get而不是重定向。您还想要处理htmx.history_restore_request
,我也添加了这个。
发布于 2022-10-04 20:51:59
或者,您可以使用一个不返回任何内容的函数视图来替换已删除的行。跟随你的榜样
@require_http_methods(['DELETE'])
def delete_proposal(request, pk):
Proposals.objects.filter(id=pk).delete()
return render(request, "proposal/partial/proposal_delete.html")
其中proposal/partial/proposal_delete.html
将是一个空文件。您需要将此视图输入到您的hx-delete
中,但这将完成任务。
https://stackoverflow.com/questions/73237624
复制相似问题