管理页面的其他 CSS 样式和 JS 脚本

假设你有一个简单的 Customer 模型：

class Customer(models.Model):
    first_name = models.CharField(max_length=255)
    last_name = models.CharField(max_length=255)
    is_premium = models.BooleanField(default=False)

你在 Django 管理员中注册它并通过 first_name 和 last_name 添加搜索字段：

@admin.register(Customer)
class CustomerAdmin(admin.ModelAdmin):
    list_display = ['first_name', 'last_name', 'is_premium']
    search_fields = ['first_name', 'last_name']

执行此操作后，搜索字段将显示在管理列表页面中，并带有默认占位符：“ keyword ”。但是，如果你想将该占位符更改为按名称搜索，该怎么办？

你可以通过将自定义 Javascript 文件传递到 admin Media 来执行此操作：

@admin.register(Customer)
class CustomerAdmin(admin.ModelAdmin):
    list_display = ['first_name', 'last_name', 'is_premium']
    search_fields = ['first_name', 'last_name']
    
    class Media:
        #this path may be any you want, 
        #just put it in your static folder
        js = ('js/admin/placeholder.js', )

你可以使用浏览器调试工具栏查找 Django 设置到此搜索栏的 ID 或类，然后编写你的 js 代码：

$(function () {
   $('#searchbar').attr('placeholder', 'Search by name')
})

另外 Media 类允许你用字典对象添加 css 文件：

class Media:
    css = {
        'all': ('css/admin/styles.css',)
         }

例如，我们需要以特定颜色显示 first_name 列的每个元素。
默认情况下，Django 为 list_display 中的每个项目创建表格列，所有 <td> 标签都将具有类似 field-'list_display_name'的 css 类，在我们的例子中它将是 field_first_name

.field_first_name {
     background-color: #e6f2ff;
 }

如果要通过添加 JS 或某些 css 样式来自定义其他行为，则可以始终在浏览器调试工具中检查 id 和元素类。