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. マイグレーション及びマイグレートして反映させれば完了です。