在modelformset_factory中使用带有自定义字段窗口小部件的表单吗? [英] Using a form with custom field widgets in a modelformset_factory?

问题描述

我正在尝试使用jquery.formset.js 在modelformset_factory 中创建自定义表单.这是代码:

I'm trying to create a customized form in a modelformset_factory using jquery.formset.js. Here is a code:

自定义表单类:

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,
                )

接下来是问题.当我初始化页面时，所有现有的表单集都使用小部件进行初始化.但是，当我尝试向表单集添加新表单时，即创建了表单，但是小部件不与表单的字段绑定.问题是，如何将小部件与新表单的字段相关联?

The problem is next. When i init page all existing formsets initialize with widgets. But when I try to add new form to formset the form is create, but widgets don't tie with form's fields. The question is, how to tie widgets with new form's fields?

推荐答案

下一步是解决问题.当我们向formset添加新表单时，jquery只是复制与表单字段相对应的隐藏html行，对其进行清理并提供新的ID.但是它不会复制有关小部件的信息.因此，我们应该使用js-callback函数，该函数在新表单添加到formset后被调用:

Problem solving is next. When we add a new form to formset, jquery just copies hidden html row corresponding to form fields, cleans it, and gives new ids. But it doesn't copy information about widgets. So we should use js-callback function which is called after new form to 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>

这篇关于在modelformset_factory中使用带有自定义字段窗口小部件的表单吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！