使 Django 表中的行可点击答案

【问题标题】：Make rows in Django table clickable使 Django 表中的行可点击
【发布时间】：2019-11-26 18:44:34
【问题描述】：

首先，我不是网络开发人员。我只是想为自己编写一个简单的 Web 应用程序，我决定在 Django 中完成它，因为我对 Python 非常熟悉。所以我真的不知道比javascript的基础知识更多。

无论如何，我的主页本质上是在屏幕左侧使用 django-tables2 库的表格和在右侧使用 chart.js 库的图表。我已经找到了这两个的骨架。

但现在我无法确定将点击事件添加到表中的行。我想做的是每当我点击表格中的一行时更新图表。我可以在上面找到的所有内容（例如：Adding an onclick event to a table row）让我经历了诸如表 ID 之类的事情。但我不知道有没有为这个表定义的表ID。因为我使用的是 django-tables2，所以我专门创建表格的唯一几行是

{% load render_table from django_tables2 %}
{% render_table table %}

我使用的视图看起来像

class RaceListView(SingleTableView):
    model = Race
    table_class = RaceTable
    template_name = 'prediction.html'

我不确定这段代码是否有帮助，或者您是否需要我提供其他代码，所以请询问是否有什么可以让您更容易看到我在做什么。不过在 Django 中这有点困难，因为到处都是相互连接的。

如果有人有一个简单的例子来说明如何将点击事件添加到这样方便的表格中，那就太棒了。谢谢。

【问题讨论】：

通常最好用你的问题举个例子，你的问题太笼统了。人们只能假设您在说什么，因此假设您当前有一个显示来自 django_table2 的数据的 html 模板，这没有多大意义，因为 Django 模型表通常不以 django_ 开头，它们以 appname_ 开头。也许添加您的 views.py 和 html 模板，人们将能够提供更多帮助。 p.s. google JavaScript 点击事件，你会找到你要找的答案。
django-tables2 是一个 Python 库和 Django 扩展，允许您从 QuerySets 快速创建表。我已经添加了我的 html 和 views.py 文件的相关部分，尽管我不知道它们有多大帮助。

标签： javascript django django-tables2

【解决方案1】：

这是在您的 HTML 中生成 <a ... 标记的问题。有两种方法。一种方法是提供手动呈现表格的模板。另一种是在您的模型上创建一个属性，该属性生成一个适当的标签作为安全文本。类似的东西

@property
def foo_link(self):
   return format_html(
       '<a href="foo/detail/{pk}" class="foo_link">details</a>',
        pk=self.foo.pk
   )

并告诉您的表格生成器显示 foo_link 字段。（在查询集上使用select_related('foo') 以避免每次使用该属性时进行查询）。

刚刚注意到你是在附加点击事件而不是链接之后，但原理是一样的。使用其他地方未使用的 css 类（上面的foo_link）格式化表中的元素，并将 JQuery 或其他内容放入模板中以附加 onclick 事件或其他内容。添加 attr data-foo="{pk}" 或单击处理程序所需的其他信息通常很有用。您可以使用<span class="foo_link" data-foo="{pk}"> 代替<a...>。

如果您希望整行可点击，您需要将 onclick 事件附加到 <tr> 标记。我不知道您是否可以将所需的 css 类传递给 django-tables2。否则表格中的单元格仍然可以使用，您的 JQuery 将识别周围的 <tr> 并将点击处理程序附加到该单元格（如果有帮助，请复制数据属性）。

【讨论】：