- Author:
- applecat
- Posted:
- February 24, 2023
- Language:
- JavaScript
- Version:
- Not specified
- Score:
- 0 (after 0 ratings)
A simple jQuery javascript that collapses all stacked inline rows for better handling of large inline fieldsets.
It also adds "Show"/"Hide"-buttons for showing/hiding each row, which could be customized and styled using css.
Usage (see below for example):
Include the javascript on your admin page, together with jQuery, and it'll automatically affect all stacked inlines.
Works with
Django 3.1.4 (Might work with other versions with or without adjustments, but not tested)
Use example:
admin.py:
class DateInline(admin.StackedInline):
model = Date
extra = 10
class EventAdmin(admin.ModelAdmin):
inlines = [DateInline]
class Media:
js = ['js/collapsed-stacked-inlines.js']
admin.site.register(Event, EventAdmin)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | /* collapsed_stacked_inlines.js */ /* Created in May 2009 by Hannes Rydén */ /* Use, distribute and modify freely */ // Original script // https://djangosnippets.org/snippets/1492/ // 2021 updates by Dimitris Karagiannis // @MitchKarajohn // https://djangosnippets.org/snippets/10817/ // 2023 updates by Dmitry Akinin jQuery(function ($) { var linkStyle = 'cursor: pointer; color: #fff; border-radius: 4px; font-weight: 400; padding: 5px 10px; background: #417690; border: none;'; // Only for stacked inlines $('div.inline-group div.inline-related:not(.tabular)').each(function () { const $h3 = $(this.querySelector('h3')); const $fs = $(this.querySelector('fieldset')); const fsErrorsExist = $fs.children('.errors').length; const initialButtonText = fsErrorsExist ? gettext('Hide') : gettext('Show'); const $button = $( $.parseHTML( '<a role="button" style="' + linkStyle + '" class="stacked_collapse-toggle">' + initialButtonText + '</a> ' ) ); // Don't collapse initially if fieldset contains errors if (fsErrorsExist) $fs.addClass('stacked_collapse'); else $fs.addClass('stacked_collapse collapsed'); $h3.prepend($button); }); // Hide/Show button click $('div.inline-group').on('click', '.stacked_collapse-toggle', function () { const $fs = $(this).parents('.inline-related').children('fieldset') if (!$fs.hasClass('collapsed')) { $fs.addClass('collapsed'); this.innerHTML = gettext('Show'); } else { $fs.removeClass('collapsed'); this.innerHTML = gettext('Hide'); } }) }); |
More like this
- Django Collapsed Stacked Inlines by mkarajohn 3 years, 9 months ago
- Dynamically adding forms to a formset. OOP version. by halfnibble 9 years, 5 months ago
- Convert multiple select for m2m to multiple checkboxes in django admin form by abidibo 11 years, 6 months ago
- Django admin inline ordering - javascript only implementation by ojhilt 11 years, 11 months ago
- Google v3 geocoding for Geodjango admin site by samhag 12 years ago
Comments
Please login first before commenting.