win-django.com

Admin siteのTextareaの高さを自在に変更する - admin.py編

Revision upに対応する

Admin siteのTextareaの高さを自在に変更するでは、admin siteのtemplateファイルを修正して機能を実現してきました。
しかし、DjangoのRevisionをあげるとadmin siteのtemplateを上書きする場面も発生する可能性があります。
その都度templateを修正する必要があります。
面倒ではありませんか?

admin.pyで対処してみましょう。

仕様

今回も

を利用します。

サンプルのmodelとadminを作成

modelにTextFieldを作ったmodelを作成します。

models.py

from django.db import models
from django.contrib.auth.models import User

class Blog(models.Model):
    title = models.CharField(max_length = 50)
    author = models.ForeignKey(User)
    content = models.TextField()
    post_date = models.DateTimeField(default = datetime.now)

admin.py

from django.contrib import admin
from appname.models import Blog

class BlogAdmin(admin.ModelAdmin):
    list_editable = ['author', 'post_date']
    list_display = ('title', 'author', 'post_date')
    fieldsets = (
        (None, {'fields': ('title', ('author', 'post_date'),'content')}),
    )

admin.site.register(Blog, BlogAdmin)

適用前Admin siteスクリーンショット

jQuery, Script, CSS設置

Admin siteのTextareaの高さを自在に変更するでadmin siteのtemplateに記述していたScript, CSSをファイル化します。

jquery.textarearesizer_init.js

$(document).ready(function() {
    $('textarea:not(.processed)').TextAreaResizer();
});

textareasizer.css

div.grippie {
    background:#EEEEEE no-repeat scroll center 2px;
    border-color:#DDDDDD;
    border-style:solid;
    border-width:0pt 1px 1px;
    cursor:s-resize;
    height:9px;
    overflow:hidden;
    margin-left: 106px;
}

textarea {
    display:block;
    margin-bottom:0pt;
    width:95%;
    height: 20%;
}

jQuery、TextAreaResizerをダウンロード、展開して以下のように設置します。
TextAreaResizerの中にある'grippie.png'は省略します。

- project
  - appname
    - admin.py
    - models.py
  - media
    -js
      - jquery.js
      - textareasizer
        - jquery.textarearesizer_init.js
        - jquery.textarearesizer.js
    -css
      - textareasizer
        - textareasizer.css

admin.pyの変更

内部class　Mediaを追加して、js,cssを設定することにより実現できます。

admin.py

from django.contrib import admin
from appname.models import Blog

class BlogAdmin(admin.ModelAdmin):
    list_editable = ['author', 'post_date']
    list_display = ('title', 'author', 'post_date')
    fieldsets = (
        (None, {'fields': ('title', ('author', 'post_date'),'content')}),
    )

    class Media:
        js = ("/media/js/jquery.js",
              "/media/js/textareasizer/jquery.textarearesizer.js",
              "/media/js/textareasizer/jquery.textarearesizer_init.js",)

        css = {'all': ('/media/css/textareasizer.css',),}

admin.site.register(Blog, BlogAdmin)

適用後Admin siteスクリーンショット

再表示してみると高さを自在に変更することが出来るようになります。

admin.pyに記述することによって修正回数をさらに減少させます。
これで、Revision upも心置きなくできます。

ただ、この方法はclassごとに記述しなければならないため少し不便です。
以下の通りに継承を利用すると手間が少し省けます。

admin.py

from django.contrib import admin
from appname.models import Blog

class Textareasizer(admin.ModelAdmin):
    class Media:
        js = ("/media/js/jquery.js",
              "/media/js/textareasizer/jquery.textarearesizer.js",
              "/media/js/textareasizer/jquery.textarearesizer_init.js",)

        css = {'all': ('/media/css/textareasizer.css',),}

class BlogAdmin(Textareasizer):
    list_editable = ['author', 'post_date']
    list_display = ('title', 'author', 'post_date')
    fieldsets = (
        (None, {'fields': ('title', ('author', 'post_date'),'content')}),
    )

admin.site.register(Blog, BlogAdmin)