Python Django/Django-tables2行上的html表单击编辑表单

对不起，这篇文章可能很混乱，不知道如何解释我要找的东西很好，但这里什么都没有

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

url.py

path('', CustomerView.as_view(), name='customer'),
path('customer_edit/', views.customer_edit, name='customer_edit'),

tables.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'

views.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')

模板

{% 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 %}

{%extends'base.html%}
{%load render_Tables from django_Tables 2%}
{%block head%}
开发精灵-客户
{%endblock%}
{%block body%}
{%render_table%}
$（文档）.ready（函数（）{
$（'table:first'）。children（'tbody:first'）。children（'tr:first'）。css（'background-color'，'#0099ff'）；
$（'table tbody tr'）.bind（“mouseover”，函数（）{
var color=$（this.css（“背景色”）；
$（this.css（“background”、“#0099ff”）；
$（this）.bind（“mouseout”，函数（）{
$（this.css（“背景”，颜色）；
});
});
$（'table tbody tr'）。单击（函数（）{
let account=$（this.closest（'tr'）.find（'td.account'）.text（）；
警报（帐户）；
//在表行单击事件上，传递回django
});
});
{%endblock%}

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

我真的认为我用这件事找错人了

---

非常感谢您的任何帮助

我想我可能已经找到了实现上述功能的方法

用于删除一行，但概念相同

---

我将测试并检查

确定在花费了今晚的时间之后，我找到了一种执行此操作的方法，而无需将href标记添加到python代码中

通过使用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'),

---

这是我能找到的从Django重定向到另一个视图的最佳方式，而不必在python文件中指定url。我100%相信有更好的方法可以做到这一点，但目前这将是公认的答案。我找不到任何适合我需要的解决方案

我找到的所有解决方案都需要在Javascript中进行一些奇怪的处理，并解析表中的slug和PK以重定向到正确的URL

我的解决方案

在models.py中定义绝对URL

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

然后，在your tables.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");
    });
});

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

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");
    });
});

---

我可能对你想做什么有点困惑。似乎出于某种原因，您正试图让视图从表上的单击事件返回一个新的响应。这就是为什么您会被所有这些JavaScript呈现绊倒的原因。您只需将这些单元格渲染为指向所需位置的链接即可

看看TemplateColumn的django-tables2文档。您只需要让它指向一个模板，该模板根据记录pk创建url

tables.py
类CustomerTable（tables.Table）：
account=tables.TemplateColumn（template_name=“\u account.html”）
def呈现标题（自身、记录、值、列、绑定列、绑定行）：
值=自身值\标题（记录、值）
返回安全标记（#noqa:S308，S703
render（记录、自身、值、绑定列、绑定行=绑定行）
)
_account.html

我认为您正在试图解决一个问题（没有确切的url），您以后会后悔的。我更喜欢使用显式URL，而不是在许多地方组成URL。我建议将

get\u absolute\u url

添加到您的模型中，并使用django-tables2表的

row\u attrs

属性/参数将显式url添加到表行中。

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

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>