django自定義Color Picker控制項

django提供了豐富的部件，以滿足我們對各種html控制項的需求。並且如果有特別的要求，我們還可以很容易的編寫自己的控制項，本文主要內容是自定義乙個顏色選擇器的控制項，該控制項是在input的基礎上，實現顏色的選擇和展示。

如果你不知道如何實現自定義django的form控制項的話，可以檢視django的源**，在檔案django.forms.widgets.py中，這就是開源的好處，如果我們不知道該怎麼入手，可以看看它本身是如何實現的，「依葫蘆畫瓢」就是了。

因為我們的需求是實現顏色選擇器的控制項，即colorpicker，其實這樣的控制項，google一下，也能搜出一大堆的js庫。為了方便我也在網上google到了乙個較簡單實用的color picker庫，jscolor。該庫就乙個js檔案，沒有其他的依賴庫等，並且為了方便，我們也是直接引用該站點下的jscolor.js檔案。

再則，我們的model是使用charfield來表示color欄位的，在資料庫中也是varchar型別，django預設的form控制項是textinput控制項，該控制項需要我們手工在輸入框中輸入顏色的16進製制值，如#ff0000表示紅色。而我們之所以使用jscolor庫，也是因為jscolor是使用的input[type='text']的控制項，因此這裡我們在自定義django的form部件時，從textinput繼承就可以了。**如下：

# -*- coding:utf-8 -*-
from django import forms
from django.conf import settings
from django.utils import ******json
class colorpicker(forms.textinput):
def __init__(self, attrs = none, color_picker_attrs = none):
if color_picker_attrs:
cls = attrs.get('class', '')
json = ******json.dumps(color_picker_attrs)
attrs.update()
super(colorpicker, self).__init__(attrs)
def _media(self):
js = [settings.color_picker_js_url]
return forms.media(js = js)
media = property(_media)

**中的__init__建構函式，與textinput比起來多了乙個color_picker_attrs引數，該引數主要是為jscolor準備的，主要是input控制項的class屬性值，如：，具體可以參考jscolor的文件說明。另外更重要的是_media方法，該方法返回乙個forms.media物件，該物件用來往頁面中輸出js的引用**，並且需要新增media= property(_media)，來定義media屬性。我們這裡將js的定製定義在settings.py檔案中，命名為color_picker_js_url，並且值為

那麼該控制項的使用，就可以參考之前的文章《django如何使foreignkey欄位顯示樹狀結構》中對categoryadmin類的定義方式，重寫formfield_for_dbfield方法，來修改django預設生成的widget控制項。**如下：

class colorstyleadmin(admin.modeladmin):
fields = ('product', 'position', 'color',)
list_display = ('color', )
def formfield_for_dbfield(self, db_field, **kwargs):
if db_field.name == 'color':
return db_field.formfield(widget = colorpicker(attrs = , color_picker_attrs = ))
return super(productstyleadmin, self).formfield_for_dbfield(db_field, **kwargs)

以上**僅在此演示如何使用colorpicker部件而用，主要是formfield_for_dbfield的重寫方式，這裡是將model的color欄位，改變成color picker控制項。並傳遞了hash，cap和required屬性。執行效果如下圖。

django自定義Color Picker控制項

Django 自定義標籤

Django自定義函式

Django自定義外觀

django自定義Color Picker控制項

Django 自定義標籤

Django自定義函式

Django自定義外觀

相關推薦