为Django表2中格式化的模型对象生成Javascript click函数，该函数显示相关的div

Question

我正在尝试创建一个Javascript函数，其中包含一个django-tables2表，其中的模型对象将在单击时显示相关信息。以下是相关代码：

在模型.py在

class Student(models.Model):
    student_id = models.CharField(max_length=128, unique=True, null=True, blank=True)
    first_name = models.CharField(max_length=128)
    last_name = models.CharField(max_length=128)
    ssn = USSocialSecurityNumberField(null=False)
    gender = models.CharField(max_length=128, choices=GENDER_CHOICES)
    country = CountryField(default='US', blank=True)
    primary_phone = models.CharField(max_length=128)
    email = models.EmailField(max_length=254, validators=[validate_email])
    background = models.CharField(max_length=128, choices=BACKGROUND_CHOICES)
    location = models.CharField(max_length=128, choices=LOCATION_CHOICES, default='south_plainfield')
    created_at = models.DateTimeField(null=True, auto_now_add=True)

在表格.py在

^{pr2}$

在视图.py在

def all_My_Student(request):
    student_list = Student.objects.order_by('-created_at')
    table = StudentListTable(student_list)
    RequestConfig(request).configure(table)
    return render(request, 'students/all_my_student.html', {'table': table, 'student_list': student_list})

所有的_学生.html在

{% block main_content %}
    <div class="box box-primary" id="student_list_table">
        {% if table %}
            {% render_table table %}
        {% endif %}
    </div>

    {% for student in student_list %}
        <div class="detailed" id="{{ student.id }}">
            {{ student.first_name }} {{ student.last_name }}
        </div>
    {% endfor %}
{% endblock %}

{% block custom_javascript %}
    <script>

        $(document).ready(function()
            {
                $('.detailed').hide();


            }
        );

    </script>
{% endblock %}

我想做的是创建一个Javascript函数，基本上是这样的：正如您所看到的，从一开始就隐藏了“详细的”类div。当您单击模型对象表中的一行时，将显示“detailed”类div，其id与该行的id相匹配（或者基本上与表循环和第二个循环中的相同模型对象相对应），其余部分仍将隐藏。我希望这是清楚的。在

Answer 1

作为补充说明，如果表中使用的queryset与student_list相同，则无需将student_list分别传递给模板上下文，则可以使用table.data。在

我将使用CSS隐藏<div class="detailed">块，而不是使用JavaScript，就像使用JavaScript一样，当页面加载时，它们可能会在一小段时间内可见。在

您应该尽量避免向太多的html元素添加id属性。在您的示例中，您将student id作为id属性添加到table<tr>和<div class="detailed">元素中。HTML规范requires ID's to be unique in the whole document，因此如果要使用它们，请确保它们是唯一的。在

最好使用数据属性。在下面的示例中，我向表行和<div class="detailed">元素添加了属性data-student-id。现在可以选择div[data-student-id="12"]来获取id=12的学生的details div元素：

# table.py
class StudentListTable(tables.Table):
    name = tables.TemplateColumn('''...''', verbose_name=u'Name')
    manage = tables.TemplateColumn('''....''')

    class Meta:
        model = Student
        fields = ('student_id', 'name', 'gender', 'ssn', 'email', 'primary_phone', 'created_at', 'manage', 'assign')
        row_attrs = {
            'data-student-id': lambda record: record.pk
        }
        attrs = {'class': 'table table-hover', 'id': 'student_list'}

{# django template #}
<style>
    .detailed {
        display: none;
    }
</style>

{% for student in table.data %}
    <div class="detailed" data-student-id="{{ student.id }}">
        {{ student.first_name }} {{ student.last_name }}
    </div>
{% endfor %}

{% block custom_javascript %}
<script>
    $(document).ready(function() {
        $('#student_list tr').on('click', function () {
            var student_id = $(this).data('student-id');
            $('div[data-student-id="' + student_id + '"]').show();
        });
    });
</script>
{% endblock %}

或者，您可以将所需的数据添加到表的data-属性中，并用JavaScript创建详细信息视图。这可能会使生成的HTML小一点。在