使用jqueryui tabs优化django后台页面
众所周知,Django官方自带的admin页面是非常简陋的,但是不妨碍我把它当作临时管理后台使用。其中我开发公司内部的ERP系统就还一直使用django admin(又不是不能用,嘻嘻)。但是我对django admin有点不满的就是编辑表单页面。我以下面帐号表单为例,django admin的表单页面会一下子展示很多信息给用户看。除了首行的用户名和密码、还把「个人信息」标签、「权限」等等都一起显
众所周知,Django官方自带的admin页面是非常简陋的,但是不妨碍我把它当作临时管理后台使用。其中我开发公司内部的ERP系统就还一直使用django admin(又不是不能用,嘻嘻)。
但是我对django admin有点不满的就是编辑表单页面。我以下面帐号表单为例,django admin的表单页面会一下子展示很多信息给用户看。除了首行的用户名和密码、还把「个人信息」标签、「权限」等等都一起显示了出来。一个良好的用户界面设计原则是,不要一下子呈现所有的信息,而是要符合渐进式披露原则。所以对于这个表单页面,最好把下面几个信息先隐藏起来,当需要的时候再点开编辑。比较熟悉django的人会建议,可以给fieldsets字段里添加
'classes':('collapse',)
,如下图:虽然信息量一下子减少了,但我依旧不是很满意。因为点击另一个标签的时候,并没有隐藏其他标签。如果要避免一个页面有太多信息,需要先点击隐藏一个标签,再点击显示另一个标签,很麻烦对吧?
后来这个问题一直搁着,直到我翻看odoo的界面设计。知道了我应该使用tabs选项卡控件。为了切合django admin的样式,尽量不使新控件在原本的样式里显得太突出,以及django admin本身就自带jquery的原因,我最终找到了jqueryui tabs。最后改造效果如下:是不是看起来简洁清爽很多了?
之后我花了几天的时间,把这个功能封装成了一个django插件,可以按以下方式快速开始:
安装
pip install django-admin-jqueryui-tabs
代码示例
from django.contrib import admin
from django.contrib.auth.admin import UserAdmin
from django.contrib.auth import get_user_model
from django_admin_jqueryui_tabs.mixins import ModelAdminTabsMixin
User = get_user_model()
class CustomUserAdmin(ModelAdminTabsMixin, UserAdmin):
pass
admin.site.unregister(User)
admin.site.register(User, CustomUserAdmin)
最后,这个功能对大佬来说可能确实没有什么价值。不过对我来说,能把我内心所想的用代码实现出来,就已经很满足了。

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐
所有评论(0)