管理頁面的其他 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 和元素類。