在Django管理列表中更改行颜色

nwwlzxa7  于 2023-10-21  发布在  Go
关注(0)|答案(4)|浏览(124)

我想在Django管理页面(change_list.html)中根据模型中名为status的字段高亮显示行(设置backgorund颜色)。最好的方法是什么?
我有三种状态。开放、活动、关闭。我想与开放行是绿色,积极的是橙子和关闭是红色。
我已经找到了documentation about changing the templates所以,但不知道如何检查状态的颜色行。

oxiaedzo

oxiaedzo1#

我错了,还有另一种选择,只使用Django管理员应用程序。
在应用的www.example.com中admin.py,您可以为表格单元格的内容定义渲染器。以下是我的电影库的变体:

class FilmAdmin(admin.ModelAdmin):

    def film_status(self, obj):
        if obj.status() != 'active':
            return '<div style="width:100%%; height:100%%; background-color:orange;">%s</div>' % obj.status()
        return obj.status()
    film_status.allow_tags = True

    list_display = ('id', 'title', 'film_status')

admin.site.register(Film, FilmAdmin)

在这里,我创建了一个字段名film_status,它在Film模型中不存在,并将其定义为FilmAdmin的方法。它会为每一行传递该项。我不得不告诉渲染器allow_tags,这告诉管理应用程序不要“安全”HTML内容。
不过,这不会填充整个单元格,因为单元格本身有一些填充。只有您的应用允许填充的单元格部分(由管理员的样式表定义)将被填充。但对我来说已经足够了。
这就对了两种完全不同但很有用的装饰Django管理列表中单元格内容的技术。

ca1c2owp

ca1c2owp2#

看看django-liststyle,正是你所追求的。

dvtswwa3

dvtswwa33#

事实证明,定制change_list_results. html和相关的生成器是一件相当麻烦的事情。我想提出一个完全不同的解决方案:为您的应用程序添加change_list.html,并使用JavaScript来实现您想要的效果。
我也有和你一样的问题。对于一个电影库,我需要知道电影制作人的注册是否“活跃”或其他什么。以下是我的全部重写:

{% extends "admin/change_list.html" %}

{% block extrahead %}
{{ block.super }}
<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        $('#result_list tr td:nth-child(7)').each(function() {
            if ($(this).text() != 'active') {
                $(this).css('background-color', 'orange');
            }
        });
    });
})(django.jQuery);
</script>
{% endblock %}

这个文件是${TEMPLATE_DIR}/admin/films/film/change_list.html。Django的结果列表是id'd result_list,我在这里所做的就是用不同的背景风格装饰第7列,如果列的内容不符合我的喜好。
管理员已经提供了jQuery,因此不需要对应用程序或管理员进行额外的更改即可实现此功能。

wbgh16ku

wbgh16ku4#

class FilmAdmin(admin.ModelAdmin):
 def get_film_status(self, obj):
        if obj.status() != 'active':
            return mark_safe("<span class='row_gray'>%s</span>" % obj.status())

 class Media:
        js = ("js/my_admin.js", )

在my_admin.js中:

window.onload = function() {
    var x=document.getElementsByClassName("row_gray");
    var i;
    for (i = 0; i < x.length; i++) {
        var ligne=x[i].parentNode;
        while (ligne.tagName !== "TR") {ligne=ligne.parentNode;}
        ligne.style.backgroundColor = "lightgray";
    }
}

相关问题