django crispy 形式手风琴问题
django crispy forms accordion issue
下面是简单的手风琴:
我想根据 reason_yes
和 reason_no
字段上的值有条件地设置 active=True
或 active=False
:
def __init__(self, *args, **kwargs):
super(MyUpdateForm, self).__init__(*args, **kwargs)
self.helper = FormHelper(self)
self.helper.layout = Layout(
TabHolder(
Tab(
'Tab1',
Accordion(
AccordionGroup(
Field('reason_yes'),
active=False
),
AccordionGroup(
Field('reason_no'),
active=True
)
)
),
Tab(
'Tab2',
Field('other fileds')
)
),
FormActions(
Submit('save_changes', 'Save changes', ),
Button('cancel', 'Cancel', onclick="window.history.back()"),
)
)
最后我得到了如下 jQuery
var reasonYesValue = $('#id_reason_yes option:selected').val();
var reasonNoValue = $('#id_reason_no option:selected').val();
if (reasonYesValue == 'N/A' & reasonNoValue != 'N/A') {
$('#yes-id').removeClass('in');
$('#no-id').addClass('in').prev('.panel-heading').addClass('activeTab');
}
else {
$('#yes-id').prev('.panel-heading').addClass('activeTab');
}
$('.panel-group')
.on('show.bs.collapse', function (e) {
$(e.target).prev('.panel-heading').addClass('activeTab');
})
.on('hide.bs.collapse', function (e) {
$(e.target).prev('.panel-heading').removeClass('activeTab');
});
下面是简单的手风琴:
我想根据 reason_yes
和 reason_no
字段上的值有条件地设置 active=True
或 active=False
:
def __init__(self, *args, **kwargs):
super(MyUpdateForm, self).__init__(*args, **kwargs)
self.helper = FormHelper(self)
self.helper.layout = Layout(
TabHolder(
Tab(
'Tab1',
Accordion(
AccordionGroup(
Field('reason_yes'),
active=False
),
AccordionGroup(
Field('reason_no'),
active=True
)
)
),
Tab(
'Tab2',
Field('other fileds')
)
),
FormActions(
Submit('save_changes', 'Save changes', ),
Button('cancel', 'Cancel', onclick="window.history.back()"),
)
)
最后我得到了如下 jQuery
var reasonYesValue = $('#id_reason_yes option:selected').val();
var reasonNoValue = $('#id_reason_no option:selected').val();
if (reasonYesValue == 'N/A' & reasonNoValue != 'N/A') {
$('#yes-id').removeClass('in');
$('#no-id').addClass('in').prev('.panel-heading').addClass('activeTab');
}
else {
$('#yes-id').prev('.panel-heading').addClass('activeTab');
}
$('.panel-group')
.on('show.bs.collapse', function (e) {
$(e.target).prev('.panel-heading').addClass('activeTab');
})
.on('hide.bs.collapse', function (e) {
$(e.target).prev('.panel-heading').removeClass('activeTab');
});