在 modelformset_factory 中使用带有自定义字段小部件的表单？

Question

我正在尝试在 modelformset_factory using jquery.formset.js 中创建自定义表单。 这是一个代码：

自定义表单类：

class CustomizedForm(forms.ModelForm):
    date = forms.DateField(widget=JQueryUIDatepickerWidget, required=True )
    time_begin = forms.TimeField(widget=JQueryUITimePickerWidget, required=True, initial=time(0, 0))
    time_end = forms.TimeField(widget=JQueryUITimePickerWidget, required=True, initial=time(23,59))

    def __init__(self, *args, **kwargs):
        super(CustomizedForm, self).__init__(*args, **kwargs)

自定义表单集类：

class FormSetWithInitialValues(BaseModelFormSet):
    def __init__(self, initials, **kwargs):
        super(FormSetWithInitialValues, self).__init__(**kwargs)
        self.initials = initials

    def save_new(self, form, commit=True):
        for k, val in self.initials.items():
            form.cleaned_data[k] = val
        return form.save(commit=commit)

表单集工厂：

Formset = modelformset_factory(
                    MyModel,
                    formset=FormSetWithInitialValues,
                    form=CustomizedForm,
                    can_delete=True,
                    extra=1,
                )

接下来是问题。当我初始化页面时，所有现有的表单集都使用小部件进行初始化。但是当我尝试将新表单添加到表单集时，表单被创建，但小部件不与表单的字段绑定。问题是，如何将小部件与新表单的字段联系起来？

Answer 1

图尔，

我不明白你的问题。但是，我发布了我的这段代码。我希望这对你有帮助。这是第一种方法，我们可以细化答案。

formset_f = modelformset_factory(  ItemQualitativa, extra=20 )

if request.method == 'POST':
    formset = formset_f(request.POST)
    if formset.is_valid():
        formset.save()
else:
    formset = formset_f()

for form in formset:
    form.fields['text'].widget.attrs['size'] = 70 #<-try change widget here.

我不明白你的问题是这句话：“但是当我尝试向表单集添加新表单时，表单是创建的”。你什么时候尝试添加新表单？

问候。

Answer 2

接下来是解决问题。当我们向 formset 添加新表单时，jquery 只是复制与表单字段对应的隐藏 html 行，清理它，并提供新的 id。但它不会复制有关小部件的信息。所以我们应该使用新表单后调用的js-callback函数到formset add：

<script src="{{ STATIC_URL }}js/jquery.formset/jquery.formset.js" type="text/javascript"></script>
<script type="text/javascript">

$(function() {
    {% if formset %}
        var datepickerConfig = {};
        datepickerConfig.__proto__ = DatePickerConfig;
        var timepickerConfig = {};
        timepickerConfig.__proto__ = TimePickerConfig;

        $('.calendar_formset_tr').formset({
            prefix : '{{ formset.prefix|escapejs }}',
            deleteText: '&nbsp;<img src="{{ STATIC_URL }}images/icons/delete.png" />',
            addText: '&nbsp;<img src="{{ STATIC_URL }}images/icons/add.png" />',
            addCssClass: 'add_link',
            deleteCssClass: 'remove_link',
            added: function (row) {
                var datePicker = $(row).find('input[name$="date"]');
                if (datePicker.length > 0) {
                    //привязка виджета
                    datePicker.datepicker('destroy').datepicker(datepickerConfig);
                }

                var timeBeginPicker = $(row).find('input[name$="time_begin"]');
                var timeEndPicker = $(row).find('input[name$="time_end"]');
                if (timeBeginPicker.length > 0 && timeEndPicker.length > 0) {
                    //привзяка виджета и проставление значения по-умолчанию
                    timeBeginPicker.val("00.00");
                    timeBeginPicker.timepicker('destroy').timepicker(timepickerConfig);
                    timeEndPicker.val("23.59");
                    timeEndPicker.timepicker('destroy').timepicker(timepickerConfig);
                }
            }
        });
    {% endif %}
});
</script>