Создание функции щелчка Javascript для объектов модели, отформатированных в Django Tables2, которая показывает связанные элементы div

Question

Я пытаюсь создать функцию Javascript, включающую таблицу django-tables2 с объектами модели, которая будет отображать соответствующую информацию при нажатии. Вот соответствующий код:

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, которая в основном выглядит следующим образом: "Как вы видите," подробные "классы div с самого начала скрыты. Если щелкнуть строку в таблице объектов модели, отобразится "подробный" класс div с идентификатором, совпадающим с идентификатором строки (или в основном соответствующим тем же объектом модели в цикле таблицы и во втором цикле), и остальное все равно будет скрыто. Я надеюсь, что это понятно.

Answer 1

В качестве идентификатора, если используемый в таблице набор запросов совпадает с student_list нет необходимости проходить student_list отдельно от контекста шаблона, вы можете просто использовать table.data,

Я бы спрятал <div class="detailed"> блоки, использующие CSS и не использующие JavaScript, так как если вы используете JavaScript, они могут быть видны в течение небольшого момента, когда страница загружается.

Вы должны стараться избегать добавления id атрибуты слишком много HTML-элементов. В вашем примере вы добавляете идентификатор студента как id приписать обе таблицы <tr>и <div class="detailed"> элементы. Спецификация HTML требует, чтобы идентификаторы были уникальными во всем документе, поэтому, если вы хотите использовать их, убедитесь, что они уникальны.

Лучше использовать атрибуты данных. В приведенном ниже примере я добавил атрибут data-student-id к строке таблицы и тому <div class="detailed"> элемент. Теперь вы можете выбрать div[data-student-id="12"] чтобы получить подробный элемент div для студента с id = 12:

# 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 немного меньше.