版权所有,转载请注明出处: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属性。运行效果如下图。
分享到:
相关推荐
代码如下:from django import formsdef __init__(self, attrs = None, color_picker_attrs
Autoforms是Jeff开源的一个基于Django的自定义表单引擎,可用于调查、投票、信息收集甚至是整合至工作流程引擎和PAAS平台当中。 AutoForms的主要特性: 支持14种字段类型13种html输入控件(包括日期选择组件)...
django中自定义了一些singals,用于监听一些操作,并发出通知 官方解释: Django 提供一个“信号分发器”,允许解耦的应用在框架的其它地方发生操作时会被通知到。 简单来说,信号允许特定的sender通知一组receiver...
django+python自定义分页插件,简单易用,只需要三行代码即可展示自定义分页,支持多个展示效果
然而,对应 Model 生成的表单,并不友好,我们希望能像前端开发一样做出各种类型的控件,这就得对其后台的表单进行自定义。 其实 django 已经为我们提供了一些可用的表单控件,比如:多选框、单选按钮等,下面就以...
主要介绍了django 自定义过滤器的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
简答实用的django框架https://pythondjango.cn/django/basics/1-introduction/
实现Django后台页面自定义、搜索功能(基于日期单搜索和日期项目名称多选项搜索)、数据显示(BootstrapTable翻页)、权限(控制表),同时优化输入框联想功能,希望对你有用。
今天小编就为大家分享一篇Django自定义用户表+自定义admin后台中的字段实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
今天小编就为大家分享一篇django 自定义过滤器(filter)处理较为复杂的变量方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
1.django自定义字段类型,实现非主键字段的自增 # -*- encoding: utf-8 -*- from django.db.models.fields import Field, IntegerField from django.core import checks, exceptions from django.utils.translation ...
主要介绍了Django自定义认证方式用法,结合实例形式分析了Django自定义认证的创建、设置及功能实现技巧,需要的朋友可以参考下
主要为大家详细介绍了Django自定义插件实现网站登录验证码功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
今天小编就为大家分享一篇django 自定义filter 判断if var in list的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
最近工作开发主要利用Django搭建公司后台系统,在开发中遇到数据分页(django原生翻页),后台自定义页面、搜索功能(基于日期单搜索和日期项目名称多选项搜索)、数据显示(BootstrapTable翻页)、权限(控制表)等...
特别是在 windows 上,如果报错,尝试用 django-admin 代替 django-admin.py 试试 setting.py 最终的配置文件 import os import sys # Build paths inside the project like this: os.path.join(BASE_DIR, ...) ...
Django 默认使用用户认证的是ModelBackend,这个类也就是我们要下手的地方,ModelBackend里面有一个authenticate的方法,这个方法就是登录时对用户认证的方法。我们要改的就是这个方法。 先看看原码理解一下认证...
主要介绍了Django实现的自定义访问日志模块,结合具体实例形式分析了Django针对日志的相关操作技巧,需要的朋友可以参考下
肯定是可以的,django提供了相应的处理方式,只要在django里 起步 面定义了,无论你今后部署在apache下或者是nginx下,都是生效的。 要想自定义错误页面,需要关闭调试模式 DEBUG = False ,因为调试模式的错误...