Djangoメモ：入力内容に応じて動的にCSSを切り替える(Models-templates間)

1. Bootstrapを使って、これから作成する緊急度（ユーザーが入力）に応じて帯の色を変える方法を例にします。作成したtodomodel_list.htmlにおいて、<div class=”alert alert-primary” role=”alert”>の部分を<div class=”alert alert-{{ item.priority }}” role=”alert”> に変更します。Bootstrapでは色ごとに名前がデフォルトでいくつか決まっており、その各名称を緊急度に合わせて表示するようにします。そのため、該当箇所を{{ item.priority }}に変更します。

{% extends 'base.html' %}

{% block header %}
<div class="jumbotron jumbotron-fluid">
  <div class="container"> 
    <h1 class="display-4">ToDo LIST</h1>
    <p style="color:black; font-size:16px;"class="lead">　
      Time is money, time is organized by Daily management
    </p>
  </div>
</div>
{% endblock header %}

{% block content %}
<div class='container'> 
{% for item in object_list %}

<div class="alert alert-{{ item.priority }}" role="alert">
  <p>{{ item.title }}</P>
  <a href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">編集</a>
  <a href="#" class="btn btn-success" tabindex="-1" role="button" aria-disabled="true">削除</a>
  <a href="#" class="btn btn-info" tabindex="-1" role="button" aria-disabled="true">詳細</a>
</div>

{% endfor %}
</div>
{% endblock content %}

2. models.pyを以下の通りアップデートします。変数priorityを作成し、テキストを読み取らせ、テキストはchoicesを使って選択できるようにします。選択できる内容は、PRIORITY = ((‘danger’,’high’),(‘info’,’normal’),(‘success’,’low’))で記載し、Bootstrapのカラーと連動させています。また、直接的には関係ありませんが、変数duedateを使い、DateFieldを使って日付を入力できるようにしてあります。duedate = models.DateField() が該当文です。

from django.db import models

# Create your models here.
PRIORITY = (('danger','high'),('info','normal'),('success','low')) #追記 Bootstrapのカラーと連動
class TodoModel(models.Model):
    title = models.CharField(max_length=50)
    note = models.TextField()
    priority = models.CharField( #追記 ToDoリストの優先順位をつける
        max_length = 50,
        choices = PRIORITY
    )
    duedate = models.DateField() #追記
    def __str__(self):
        return self.title

3. マイグレーション及びマイグレートして反映させれば完了です。