Создание функции щелчка Javascript для объектов модели, отформатированных в Django Tables2, которая показывает связанные элементы div
Я пытаюсь создать функцию 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 с идентификатором, совпадающим с идентификатором строки (или в основном соответствующим тем же объектом модели в цикле таблицы и во втором цикле), и остальное все равно будет скрыто. Я надеюсь, что это понятно.
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 немного меньше.