首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Django:将ListView和DeleteView结合起来与HTMX一起使用?

Django:将ListView和DeleteView结合起来与HTMX一起使用?
EN

Stack Overflow用户
提问于 2022-08-04 14:24:19
回答 2查看 232关注 0票数 1

我使用Django和HTMX来管理CRUD表,我想在其中列出和删除对象。

为此,我有一个ListView,它显示一个具有分页、排序和文本搜索功能的表(使用django-表)。它与HTMX一样工作:例如,如果您转到下一页,整个页面不会重新加载:HTMX获取表并上载DOM的特定部分。

看起来是这样的:

ListView的代码如下所示:

代码语言:javascript
运行
复制
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。到目前为止,我已经探索了多种方法:

  1. 只要在对象实际从DB 中删除之后,就从DOM中删除行:虽然它速度快,但它使分页错误/不一致,而且表页中的对象较少。
  2. 告诉HTMX重定向到当前的url (response["HX-Redirect"] = request.htmx.current_url)→坏:虽然最终结果正常,但速度很慢,用户可以使用UI并执行不必要的操作,直到重定向实际发生为止。当然,这里我没有从HTMX部分DOM更新特性中获益。

所以,我想到了第三种听起来更好的方法:

  1. 当用户删除对象时,应该删除DB中的对象,然后在HTMX模式下执行完全类似于ListView的操作(即:返回表页)。这样,我就可以用新的表页在本地更新DOM,而不需要重新加载整个页面。

问题是,我不知道如何在Django这样做。我很确定我不想搞FBVs,但我需要一些指导。下面是我在想的事情:

  • 使用指向相同视图的两个不同的urls (“提议”(GET)和“提议/int:pk/删除”(DELETE))
  • 这个视图可以是一个名为“ListDeleteView”的自定义视图,它将较低级别的Django混合在一起,比如MultipleObjectTemplateResponseMixin + BaseListView + DeletionMixin。或者其他人?

我在正确的道路上吗?如果这对你来说是个好主意的话,你能提供一些指导,特别是关于如何制作组合的泛型视图吗?

非常感谢。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-08-22 12:45:37

您想要做的是在delete列表视图上实现Proposals方法,DeleteMixin实现非常简单,因此您可以使用它并拥有如下内容:

代码语言:javascript
运行
复制
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,我也添加了这个。

票数 1
EN

Stack Overflow用户

发布于 2022-10-04 20:51:59

或者,您可以使用一个不返回任何内容的函数视图来替换已删除的行。跟随你的榜样

代码语言:javascript
运行
复制
@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中,但这将完成任务。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/73237624

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档