javascript - 使 Django 表中的行可单击

Question

首先，我不是网络开发人员。我只是想为自己编写一个简单的 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 %}

我正在使用的 View 看起来像

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

我不确定这段代码是否有帮助，或者您是否需要我提供其他代码，所以只需询问是否有一些东西可以让您更轻松地了解我在做什么。但这在 Django 中有点困难，因为事物在各处都是相互连接的。

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

Answer 1

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

@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 事件或其他内容。添加属性data-foo="{pk}"或点击处理程序所需的其他信息通常很有用。您可以使用<span class="foo_link" data-foo="{pk}">代替<a...> .

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