为在 Django Tables2 中格式化的模型对象创建一个 Javascript click 函数，显示相关的 div

Question

我正在尝试创建一个涉及 django-tables2 table 的 Javascript 函数，该函数具有模型对象，单击时将显示相关信息。这是相关代码：

models.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)

tables.py

class StudentListTable(tables.Table):
    name = tables.TemplateColumn('''{{ record.first_name }} {{ record.last_name }}''', verbose_name=u'Name')
    manage = tables.TemplateColumn('''<a href="/students/update_student/{{ record.id }}">Update</a> / <a href="/students/delete_student/{{ record.id }}" onclick="return confirm('Are you sure you want to delete this?')">Delete</a>''')
    assign = tables.TemplateColumn('''<a href="/students/id={{ record.id }}/add_studentcourse">Courses</a> / <a href="/students/id={{ record.student_id }}/add_studentemployment">Employment</a> / <a href="/students/id={{ record.id }}/add_studentcounselor">Counselor</a> / <a href="/students/id={{ record.id }}/show_student_lists">Show</a>''')

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

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

all_my_student.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 函数：如您所见，"detailed" class div 隐藏在开始。当你点击模型对象table中的一行时，"detailed"classdiv的id与该行的id相匹配（或者基本上对应于同一个模型对象在 table 循环和第二个循环中）都会显示，其余的仍然会隐藏。我希望这很清楚。

Answer 1

作为旁注，如果 table 中使用的查询集与 student_list 相同，则无需将 student_list 单独传递给模板上下文，您可以使用table.data.

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

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

最好使用数据属性。在下面的示例中，我将属性 data-student-id 添加到 table 行和 <div class="detailed"> 元素。您现在可以 select div[data-student-id="12"] 获取 id = 12:

学生的详细信息 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 %}

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

为在 Django Tables2 中格式化的模型对象创建一个 Javascript click 函数，显示相关的 div

Making a Javascript click function for model objects formatted in Django Tables2 that shows related divs

javascript

python

django

jquery

django-tables2