Question

对不起，这篇文章可能很混乱，不确定如何解释我要寻找的东西，但是什么都没做。

我有一个Django应用程序，并使用django-table2将数据模型打印到表中，当用户单击表行以将页面重定向到等效的编辑表单时，我接下来要做的是

urls.py

import django_tables2 as tables
from customer.models import Customer


class CustomerTable(tables.Table):
    account = tables.Column(attrs={'td': {'class': 'account'}})

    class Meta:
        model = Customer
        attrs = {'id': 'table'}
        exclude = ('is_deleted',)
        template_name = 'django_tables2/bootstrap-responsive.html'

tables.py

from django.shortcuts import render
from django_tables2 import RequestConfig
from customer.models import Customer
from customer.tables import CustomerTable
from django.views.generic import TemplateView


class CustomerView(TemplateView):
    template_name = 'customer/customer.html'

    def get(self, request, *args, **kwargs):
        table = CustomerTable(Customer.objects.all().filter(is_deleted=False))
        RequestConfig(request).configure(table)
        return render(request, 'customer/customer.html', {'table': table})

    def customer_edit(request):
        return render(request, 'customer/customer_edit.html')

views.py

{% extends 'base.html' %}
{% load render_table from django_tables2 %}

{% block head %}
    <title>Dev Genie - Customers</title>
{% endblock %}

{% block body %}
    <div class="input-group col-md-6">
        <input type="button" class="btn btn-success" value="Add">
        <input type="button" class="btn btn-danger" value="Delete">
        <input class="form-control py-2" type="search" value="search" id="example-search-input">
        <span class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">
            <span class="glyphicon glyphicon-search"></span>
        </button>
      </span>
    </div>
    {% render_table table %}
    <script>
        $(document).ready(function () {
            $('table:first').children('tbody:first').children('tr:first').css('background-color', '#0099ff');
            $('table tbody tr').bind("mouseover", function () {
                var colour = $(this).css("background-color");
                $(this).css("background", '#0099ff');

                $(this).bind("mouseout", function () {
                    $(this).css("background", colour);
                });
            });
            $('table tbody tr').click(function () {
                let account = $(this).closest('tr').find('td.account').text();
                alert(account);
                //on table row click event, pass back to django
            });
        });
    </script>
{% endblock %}

模板

{{1}}

我正在努力从onclick获取帐户代码，甚至要将帐户代码传递回Django，以转到下一页以开始编辑记录

我真的以为我用这棵错误的树

任何帮助将不胜感激

Answer 1

我找不到适合我需求的解决方案。

我发现的所有解决方案都需要使用Javascript进行一些奇怪的处理，并从表中解析段和PK来重定向到正确的URL。

我的解决方案？

在模型中定义一个绝对URL。py

def get_absolute_url(self):
    return reverse('product:detail', kwargs={'slug': self.slug})

然后在您的table.py中，向每个希望单击的列添加一个data-href属性。这使我们可以限制哪些列可以单击。

class ProductTable(tables.Table):
    clickable = {'td': {'data-href': lambda record: record.get_absolute_url}}
    name = tables.Column(attrs=clickable)
    in_stock = tables.Column(attrs=clickable)

    class Meta:
        model = Product
        fields = (name, in_stock)

然后在您的模板中添加此简单的事件侦听器，

$(document).ready(function($) {
    $("td").click(function() {
        window.location = $(this).data("href");
    });
});

或者，如果只希望整个行都可单击，则只需使用文档中定义的Row属性，

class ProductTable(tables.Table):
    class Meta:
        model = Product
        row_attrs = {'data-href': lambda record: record.get_absolute_url}
        fields = (name, in_stock)

然后也更改模板脚本

$(document).ready(function($) {
    $("tr").click(function() {
        window.location = $(this).data("href");
    });
});

Answer 2

我想我可能已经找到了上述的实现。

Putting a click event for a dialogue box with Django Tables2

用于删除行，但概念相同

我会测试并检查

Answer 3

今天晚上花了很多时间之后，我发现了一种无需在Python代码中添加href标记即可执行此操作的方法，

通过使用Ajax，我可以从表中获取帐户代码，然后将其传递给url

$('table tbody tr').click(function () {
    let account = $(this).closest('tr').find('td.account').text();
    window.location = account;
});

将主键添加到url.py

    path('<slug:account>/', views.customer_edit, name='customer_edit'),

并将customer_edit def添加到views.py

def customer_edit(request, account):
    customer = get_object_or_404(Customer, pk=account)
    if request.method == 'POST':
        form = CustomerEdit(request.POST, instance=customer)
        if form.is_valid():
            customer.save()
            return redirect(reverse('customer:customer'))

    else:
        form = CustomerEdit(instance=customer)
        args = {'customer': customer, 'form': form}
        return render(request, 'customer/customer_edit.html', args)

这是我可以找到的最佳方法，它可以从Django重定向到另一个视图，而无需在python文件中指定url，我100％表示有更好的方法可以这样做，但是目前这已被接受回答

Answer 4

对于您尝试做的事情，我可能会有些困惑。看来您出于某种原因试图使视图从表上的click事件返回新响应。这就是为什么您被所有这些JavaScript渲染绊倒的原因。您应该简单地将这些单元格渲染为链接，这些链接可以转到您需要它们的位置。

看看TemplateColumn的django-tables2文档。您将只需要它指向一个指定记录pk的模板即可创建网址。

https://django-tables2.readthedocs.io/en/latest/pages/api-reference.html?highlight=templatecolumn#templatecolumn

tables.py
class CustomerTable(tables.Table):
    account = tables.TemplateColumn(template_name="_account.html")

    def render_title(self, record, value, column, bound_column, bound_row):
            value = self.value_title(record, value)
            return mark_safe(  # noqa: S308, S703
                column.render(record, self, value, bound_column, bound_row=bound_row)
            )



_account.html
<a href={% url('customer_edit', args=[record.pk]) %}>your text here</a>

Django / django-tables2 html表在行上单击以编辑表单

4 个答案: