版权所有，转载请注明出处：http://guangboo.org/2013/03/21/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 simplejson
class ColorPicker(forms.TextInput):
def __init__(self, attrs = None, color_picker_attrs = None):
if color_picker_attrs:
cls = attrs.get('class', '')
json = simplejson.dumps(color_picker_attrs)
attrs.update({'class':('%s %s' % (cls, json)).strip().replace('"','')})
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属性值，如：<input class="color {hash:true,caps:false}">，具体可以参考jscolor的文档说明。另外更重要的是_media方法，该方法返回一个forms.Media对象，该对象用来往页面中输出js的引用代码，并且需要添加media= property(_media)，来定义media属性。我们这里将js的定制定义在settings.py文件中，命名为COLOR_PICKER_JS_URL，并且值为http://jscolor.com/jscolor/jscolor.js。
那么该控件的使用，就可以参考之前的文章《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 = {'class':'color'}, color_picker_attrs = {'hash':True,'cap':True,'required':not db_field.blank}))
return super(ProductStyleAdmin, self).formfield_for_dbfield(db_field, **kwargs)
以上代码仅在此演示如何使用ColorPicker部件而用，主要是formfield_for_dbfield的重写方式，这里是将Model的color字段，改变成color picker控件。并传递了hash，cap和required属性。运行效果如下图。
