在 django 中如何自定义 widget（控件）适用于 xadmin
在 django 中如何自定义 widget（控件）适用于 xadmin
上篇文章介绍了怎么把django自带的admin替换成xadmin，这篇文章介绍下怎么自定义一个django的widget，关于widget的使用在django的admin和xadmin中均适用。
基础知识
在开始之前，你得先看下django的文档：https://docs.djangoproject.com/en/2.1/ref/forms/widgets/，知道要定义widget的话，需要实现的接口。
一般情况下只需要用的::
def __init__
def render
class Media # 引入资源文件如js除了知道widget提供了哪些接口外，还得知道怎么使用widget。依然是在django的文档中：https://docs.djangoproject.com/en/2.1/topics/forms/modelforms/ 。
从xadmin或者admin来说，首先需要在ModelAdmin中定义form指定自定义的form，在自定义的form中定义你想修改的字段比如title，在声明时可以指定widget参数。
好了，来看个需求：自定义一个能实时显示输入字数的input框。
开始定制
首先 ，定义widget:
.. code:: python
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，这里就做简单的示意：
.. code:: python
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中查看。