如何使用 django 和 htmx 对查询集进行排序？

Posted 2023-05-07

【中文标题】如何使用 django 和 htmx 对查询集进行排序？

【英文标题】：how to sort a queryset using django and htmx?

【发布时间】：2021-11-30 09:50:12

【问题描述】：

我正在使用 django-filter 来应用过滤器，并且在新的查询集上我想根据选择标签进行 htmx 请求排序更改新的查询集排序，这是我的观点：

views.py

def sorted_htmx_products(request):
    context = 
    qs= request.GET['order_by']
    print('request', qs['order_by'])
    if qs == "name_a":
        querySet = Product.objects.all().order_by('name')
    elif qs == "name_z":
        querySet = Product.objects.all().order_by('-name')
    elif qs == "price":
        querySet = Product.objects.all().order_by('price')
    elif qs == "brand":
        querySet = Product.objects.all().order_by('brand')
    else:
        querySet = Product.objects.all()

    products = ProductFilter(request.GET, queryset=querySet )
    print('sorted products', products.qs)
    context['products'] = products.qs
    return render(request, 'snippets/htmx_products.html', context)

这是我提出 htmx 请求的 html sn-p

            <div class="product-select-box">
                <div class="product-short" >
                    <form hx-get="% url 'core:sorted-products' %" hx-target="#removed-products" hx-swap="outerHTML" hx-trigger="change">
                        <p>Trier par:</p>
                        <select name="order_by" class="nice-select" >
                            <option value="default">Default</option>
                            <option value="name_a">Nom (A - Z)</option>
                            <option value="name_z">Nom (Z - A)</option>
                            <option value="price">Prix</option>
                            <option value="brand">Marque</option>
                        </select>
                    </form>
                </div>
            </div>
        

为什么这根本不起作用？ 如何在选择选项更改时进行简单的 htmx 表单调用？

【问题讨论】：

你能展示一下 yiu 如何渲染模板中的项目吗？

您的price 选项也以两个<<s 开头。

您希望在更改选择标签时自动发出请求吗？编写一些 javascript 来为您执行此操作（为什么要这样做？只需让用户选择他们的选择并下定决心，然后按一个按钮进行实际过滤）。这里有一个提示：既然你已经在使用它，django-filter 有一个OrderingFilter。

@WillemVanOnsem 确定我编辑了问题并放置了整个产品模板，谢谢您的帮助

@AbdulAzizBarkat 我确实使用了一些带有 onchange="this.form.submit()" 的 js 提交了表单，但它重新加载了它不调用 sorted_htmx_products 函数视图的页面，感谢 OrderingFilter 我我去试试看

【参考方案1】：

你使用hx-trigger="change">。

AFAIK 它需要更改在末尾加上“d”。

顺便说一句：下次请尝试提供一个最小的示例。

【讨论】：

当然，添加d后跟着编辑，它开始请求但得到一个空白页面。

@miyou995 你用 chromium devtools 调试过这个吗？