the5fire的技术博客

关注python、vim、linux、web开发和互联网--life is short, we need python.


在django中如何自定义widget(控件)适用于xadmin

作者:the5fire | 标签:       | 发布:2014-06-04 5:38 a.m. | 阅读量: 9981, 9790

上篇文章介绍了怎么把django自带的admin替换成xadmin,这篇文章介绍下怎么自定义一个django的widget,关于widget的使用在django的admin和xadmin中均适用。

基础知识

在开始之前,你得先看下django的文档:https://docs.djangoproject.com/en/1.6/ref/forms/widgets/ ,知道要定义widget的话,需要实现的接口。

一般情况下只需要用的:

def __init__
def render
class Media  # 引入资源文件如js

除了知道widget提供了哪些接口外,还得知道怎么使用widget。依然是在django的文档中:https://docs.djangoproject.com/en/1.6/topics/forms/modelforms/

从xadmin或者admin来说,首先需要在ModelAdmin中定义form指定自定义的form,在自定义的form中定义你想修改的字段比如title,在声明时可以指定widget参数。

好了,来看个需求:自定义一个能实时显示输入字数的input框。

开始定制

首先 ,定义widget:

class TextInputCounter(TextInput):
 """ 显示已经输入多少字符的widget
     依赖于jquery
 """

 def render(self, name, value, attrs=None):
     if value is None:
         value = ''
     self.attrs.update({'class': '%s textinput' % self.attrs.get('class', '')})
     final_attrs = self.build_attrs(attrs, type=self.input_type, name=name)
     if value != '':
         final_attrs['value'] = force_text(self._format_value(value))
     templ = """
     <input{0} onkeyup='javascript:count(this);' />
     <span class='label label-default'>已输入<span class='counter'>%s</span>个字</span>
     """ % len(value)
     script = """
     <script>
         function count(field){
             var counter_label = $(field).next('span').children('span');
             counter_label.html($(field).val().length);
         }
     </script>
     """
     html = format_html(templ, flatatt(final_attrs))
     return '%s%s' % (html, script)

这里只用到了render方法,在页面加载的时候显示input框里的字数,每次输入的时候实施计算已输入多少字。

定义完widget之后,来看form和admin,这里就做简单的示意:

class PostAdminForm(forms.ModelForm):
    title = forms.CharField(widget=TextInputCounter())

class PostAdmin(object):
    form = PostAdminForm
    # ....省略若干代码

如此这般之后,就完工了。

再来捋捋整个流程,关键的概念是:Model,ModalAdmin,Form,Field,Widget。只要搞清了这几个东西之间的关系对如何定制widget就不陌生了。

widget对应的其实就是一个field,每个field都对应了一种widget,有兴趣的可以去django/forms/fields.py中查看。


----EOF-----

扫码关注,或者搜索微信公众号:码农悟凡


其他分类: