Django管理员自定义ArrayField小部件

时间:2018-03-16 14:39:41

标签: django django-admin django-widget

ArrayField的当前管理窗口小部件是一个字段,逗号为分隔符,如下所示(文本列表):

Current admin ArrayField widget

这不是理想的,因为我会有更长的文本(甚至20个单词)并包含逗号。我可以change the delimiter to be something else,但这对管理员中不可读的内容仍然没有帮助。

我想要的是有一个字段列表,我可以在管理员中更改。与下图相似的东西

Wanted admin ArrayField widget

我可以使用另一张表来解决这个问题,但我想知道是否有可能以这种方式解决它。

2 个答案:

答案 0 :(得分:6)

不幸的是,Django还没有为ArrayField提供方便的小部件。我建议你创建自己的。以下是 Django> = 1.11

的示例
class DynamicArrayWidget(forms.TextInput):

    template_name = 'myapp/forms/widgets/dynamic_array.html'

    def get_context(self, name, value, attrs):
        value = value or ['']
        context = super().get_context(name, value, attrs)
        final_attrs = context['widget']['attrs']
        id_ = context['widget']['attrs'].get('id')

        subwidgets = []
        for index, item in enumerate(context['widget']['value']):
            widget_attrs = final_attrs.copy()
            if id_:
                widget_attrs['id'] = '%s_%s' % (id_, index)
            widget = forms.TextInput()
            widget.is_required = self.is_required
            subwidgets.append(widget.get_context(name, item, widget_attrs)['widget'])

        context['widget']['subwidgets'] = subwidgets
        return context

    def value_from_datadict(self, data, files, name):
        try:
            getter = data.getlist
        except AttributeError:
            getter = data.get
        return getter(name)

    def format_value(self, value):
        return value or []

这是小部件模板:

{% spaceless %}
<div class="dynamic-array-widget">
  <ul>
    {% for widget in widget.subwidgets %}
      <li class="array-item">{% include widget.template_name %}</li>
    {% endfor %}
  </ul>
  <div><button type="button" class="add-array-item">Add another</button></div>
</div>
{% endspaceless %}

一些javascript(为方便起见使用jQuery):

$('.dynamic-array-widget').each(function() {
    $(this).find('.add-array-item').click((function($last) {
        return function() {
            var $new = $last.clone()
            var id_parts = $new.find('input').attr('id').split('_');
            var id = id_parts.slice(0, -1).join('_') + '_' + String(parseInt(id_parts.slice(-1)[0]) + 1)
            $new.find('input').attr('id', id);
            $new.find('input').prop('value', '');
            $new.insertAfter($last);
        };
    })($(this).find('.array-item').last()));
});

您还必须创建自己的表单字段:

from itertools import chain

from django import forms
from django.contrib.postgres.utils import prefix_validation_error

class DynamicArrayField(forms.Field):

    default_error_messages = {
        'item_invalid': 'Item %(nth)s in the array did not validate: ',
    }

    def __init__(self, base_field, **kwargs):
        self.base_field = base_field
        self.max_length = kwargs.pop('max_length', None)
        kwargs.setdefault('widget', DynamicArrayWidget)
        super().__init__(**kwargs)

    def clean(self, value):
        cleaned_data = []
        errors = []
        value = filter(None, value)
        for index, item in enumerate(value):
            try:
                cleaned_data.append(self.base_field.clean(item))
            except forms.ValidationError as error:
                errors.append(prefix_validation_error(
                    error, self.error_messages['item_invalid'],
                    code='item_invalid', params={'nth': index},
                ))
        if errors:
            raise forms.ValidationError(list(chain.from_iterable(errors)))
        if cleaned_data and self.required:
            raise forms.ValidationError(self.error_messages['required'])
        return cleaned_data

最后,在表单上明确设置:

class MyModelForm(forms.ModelForm):

    class Meta:
        model = MyModel
        fields = ['foo', 'bar', 'the_array_field']
        field_classes = {
            'the_array_field': DynamicArrayField,
        }

答案 1 :(得分:1)

试着看看这个:

Better ArrayField admin widget?

我认为在以不同的方式渲染数组之后,更多的是关于js的事情。