爲在Django Tables2中格式化的模型對象製作一個Javascript單擊函數，用於顯示相關的div

Question

我正在試圖製作一個包含模型對象的django-tables2表的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函數：正如您所看到的，「詳細」類div從一開始就是隱藏的。當你點擊模型對象表中的一行時，將會顯示id爲與行匹配的「詳細」class div（或者基本上與表循環和第二個循環中的相同模型對象相對應），並且其餘的將仍然隱藏。我希望這很清楚。

Answer 1

作爲旁註，如果表中使用的查詢集與student_list相同，則不需要單獨將student_list單獨傳遞給模板上下文，您可以僅使用table.data。

我會隱藏使用CSS的<div class="detailed">塊，而不是使用JavaScript，就像使用JavaScript一樣，它們在加載頁面時可能會稍微可見。

您應該儘量避免將id屬性添加到過多的html元素中。在您的示例中，您將學生ID作爲id屬性添加到表<tr>和<div class="detailed">元素。 HTML規範requires ID's to be unique in the whole document，所以如果你想使用它們，確保它們是唯一的。

最好使用數據屬性。在下面的示例中，我將屬性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變小一點。